Save image to hard drive and convert chart to data URL - Javascript Chart.js

Javascript examples for Chart.js:Chart Data

  1. HOME
  2. Javascript
  3. Chart.js
  4. Chart Data

Description

Save image to hard drive and convert chart to data URL

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.js"></script> 
   </head> 
   <body> 
      <div id="chart_container" style="width: 50%"> 
         <canvas id="canvas" height="450" width="600"></canvas> 
         <button> save </button> 
      </div> 
      <script type="text/javascript">
var data = {//from   www.  j  a va2s.co m
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(0,0,0,0)",
            pointStrokeColor:  "rgba(0,0,0,0)",
            pointHighlightFill: "rgba(0,0,0,0)",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};
    var chart_canvas = document.getElementById("canvas").getContext("2d");
    var line_chart= new Chart(chart_canvas).Line(data);
$("button").on("click", function(){
     window.open(document.getElementById("canvas").toDataURL());
});

      </script>  
   </body>
</html>

Related Tutorials