12

I am working on CANVASjS and build a sample app which is displaying data on chart. I have enabled export to save chart in .png and .jpeg and print also. While deploying it on ripple emulator the export is working perfect but when i deploy it on my android device it's not working. Below is the code part in which i have enabled export.

var chart = new CanvasJS.Chart("container", {
            zoomEnabled: true,
            zoomType: "xy",
            animationEnabled: true,
            animationDuration: 2000,
            exportEnabled: true,
// all other chart code 
});

Update 1:

 function drawChart(data)
            {
                var chart = new CanvasJS.Chart("container", {
                    zoomEnabled: true,
                    zoomType: "xy",
                    animationEnabled: true,
                    animationDuration: 2000,
                    exportEnabled: true,
                    exportFileName: "Column Chart",
                    title: {
                        text: "Energy vs Date Time"
                    },
                    axisY: {
                        title: "EnergykWh",
                        interlacedColor: "#F8F1E4",
                        tickLength: 10,
                        suffix: "k",
                    },
                    legend: {
                        cursor: "pointer",
                        itemclick: function (e) {
                            if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                                e.dataSeries.visible = false;
                            } else {
                                e.dataSeries.visible = true;
                            }
                            e.chart.render();
                        }
                    },
                    dataPointWidth: 20,
                    data: [{
                        //legendText: "EngergykWh",
                        showInLegend: true,
                        type: 'column',
                        //xValueType: "dateTime",
                        xValueFormatString: "DD/MMM/YYYY h:mm TT",
                        //xValueFormatString: "YYYY-MM-DD hh:mm:ss TT",
                        showInLegend: true,
                        name: "series1",
                        legendText: "EnergykWh",
                        dataPoints: data                          
                    }]
                });

                chart.render();
            }

Update 2:

Bellow are the info images and a link of OS versions of android devices on which i have tried

enter image description here

enter image description here

Galaxy j7 2015

I don't know what is the main problem of it. Any help would be highly appreciated.

16
  • What browser are you using?
    – Bivek
    Dec 5, 2016 at 5:12
  • I am using google chrome, but the export is working only on browser not on any android device.
    – Moeez
    Dec 5, 2016 at 5:30
  • You mean chrome on android, right? It is working fine on my Android device.
    – Bivek
    Dec 5, 2016 at 6:12
  • No no i am saying that when i run my application on ripple(chrome) then the export is working, but when i run it on my device (android mobile) it doesn't work
    – Moeez
    Dec 5, 2016 at 6:31
  • 1
    Ok...I was asking for it because what I was thinking is, there might be some issue with storage permission in Android 6.0 and higher devices. If it is not granted by user for the browser app, you won't be able to save that image to external storage. Dec 6, 2016 at 10:20

3 Answers 3

7
+100

There is no Download Manager in webview that you have created, so you need to handle the download functionality manually. There are 2 ways to download a file from webview.

1.Using Android Download Manager

2.Using web browser opened from webview (which internally uses Android Download Manager)

The required permission includes WRITE_EXTERNAL_STORAGE

Then set a download-listener for webview.

webView.setDownloadListener(new DownloadListener(){
    public void onDownloadStart(String url, String userAgent, String contentDisposition, String mimetype, long contentLength){
        //for downloading directly through download manager
        Request request = new Request(Uri.parse(url));
        request.allowScanningByMediaScanner();
        request.setNotificationVisibility(DownloadManager.Request.VISIBILITY_VISIBLE_NOTIFY_COMPLETED);
        request.setDestinationInExternalPublicDir(Environment.DIRECTORY_DOWNLOADS, "download");
        DownloadManager dm = (DownloadManager) getSystemService(DOWNLOAD_SERVICE);
        dm.enqueue(request);
    }
});

Refer the following Links for more info: Link 1, Link2, Link 3, Link4

1
  • How to use it with canvasJS in cordova ?
    – Moeez
    Mar 8, 2017 at 10:38
2

When you tap the download option canvasJS is using the HTML5 download attribute to trigger the download, which works well in browsers that support it.

However when you tap the same link within your Cordova application, the webview it's running inside of doesn't know how to handle file downloads. Therefore nothing happens.

It looks like you could potentially enable this feature yourself by adding some custom Java to the app. Unfortunately I'm not an Android Java developer, but this issue might help you out - Download File inside WebView

1
  • How to use it with CanvasJS in Cordova?
    – Moeez
    Mar 8, 2017 at 10:38
1

This plugin should help you save your image as a download file.

Prodvided your canvas is "myCanvas":

Canvas2Image.saveAsPNG(myCanvas, width, height)

or

Canvas2Image.saveAsJPEG(myCanvas, width, height)
1
  • How to use it with CanvasJS in Cordova?
    – Moeez
    Mar 8, 2017 at 10:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.