In this video, we'll show you how to let user save or download the generated chart as image (.png file)
I've prepared all the necessary code needed for chart.js bar chart
And also a dummy button which we'll get it to work soon
To let the user able to save file, we're going to use a 2 Polyfill libraries called FileSaver.js and canvas-toBlob.js
FileSaver.js is a very useful Polyfill library that let user save the file to their local machine
FileSaver.js supports IE10+, Firefox and Chrome
However, FileSaver.js needs a "Blob" object which represent the file we generated. So we'll need another js library for Blob object
canvas-toBlob.js will let us generate the Blob object directly from canvas (our chart) So then we can pass it to FileSaver.js
canvas-toBlob.js also supports IE10+, Firefox and Chrome
I've already included all the libraries to the fiddle (FileSaver.js, chart.js and canvas-toBlob.js)
First, use we'll get our chart canvas using jQuery
Then call toBlob()
Finally, call saveAs() and pass the blob to it
and also a file name (anything.png)
Thank you for watching! Please like or subscribe if you like it :)
