javascript - Canvas js export enable not working on android device - Stack Overflow

admin管理员组

文章数量:1302379

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

Galaxy j7 2015

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

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

Galaxy j7 2015

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

• javascript
• android
• canvasjs

Share Improve this question Follow edited Dec 9, 2016 at 7:54 Moeez asked Dec 3, 2016 at 5:24 MoeezMoeez 4781111 gold badges6060 silver badges170170 bronze badges 16

• What browser are you using? – Bivek Commented 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 Commented Dec 5, 2016 at 5:30
• You mean chrome on android, right? It is working fine on my Android device. – Bivek Commented 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 Commented 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. – Pravin Divraniya Commented Dec 6, 2016 at 10:20

 |  Show 11 more ments

3 Answers 3

Sorted by: Reset to default 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

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

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)

本文标签： javascriptCanvas js export enable not working on android deviceStack Overflow