You must be logged in to post your query.
Home › Forums › Feature Requests & Feedback › Export Chart as Image/Get chart data as Base64 format
Hi Team, 1)Is it possible to automatically save the chart as image in specified folder after chart has been rendered?.In this case,chart should be download without user Interaction. Can I use “ExportEnabled=true” option?.
1)Is is possible to get the chart data in base64 format?
Thanks, Sathya S
Sathya,
You can auto-download chart as image with the help of toDataURL. toDataURL lets you get the base64 image data, which you can save as a file after chart is rendered. Below is the code-snippet for the same.
$.when(chart.render()).then(function(){ var canvas = $("#chartContainer .canvasjs-chart-canvas").get(0); var dataURL = canvas.toDataURL('image/png'); //console.log(dataURL); //Save Image creating an element and clicking it var save = document.createElement('a'); save.href = dataURL; save.download = 'CanvasJS.png';//Save as CanvasJS.png-File Name var event = document.createEvent("MouseEvents"); event.initMouseEvent( "click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null ); save.dispatchEvent(event); });
Please take a look at this JSFiddle for an example on the same.
Alternately, you can achieve same by setting exportEnabled to true and auto-clicking the link of format of image you like to save. Please find the code-snippet for this logic below. $('.canvasjs-chart-toolbar div>:nth-child(2)').click(); Please take a look at this JSFiddle for complete code on this approach.
$('.canvasjs-chart-toolbar div>:nth-child(2)').click();
— Vishwas R Team CanvasJS
Vishwas, How to change the download location and image name?
Thanks, Sathya
You can change save.download = 'CanvasJS.png'; in first example to your desired name. Here CanvasJS.png is the image-file name. And in the second example, you can use exportFileName to set image-file name.
save.download = 'CanvasJS.png';
Download location setting is a part of browser setting, it varies from browser-to-browser. You can change it under browser settings. Check these links to change/manage download location in chrome and Firefox.
Vishwas, In my project I have to save the chart image in specified folder.Eg:”C:\\MyProject\UserDocuments\Chart1.png. Is there is any option to achieve this?
Hello, Vishwas! Is this possible to get base64 image from stockchart? My stockchart has multiple charts.
@sunrise,
Exporting entire StockChart as base64 is not available as an inbuilt feature as of now. However you can do so by using html2canvas. Below is the code-snippet for the same.
html2canvas(document.querySelector("#chartContainer")).then(canvas => { var dataURL = canvas.toDataURL(); console.log(dataURL) });
Please take a look at this JSFiddle for complete code.
You must be logged in to reply to this topic. Login/Register