0

I want to save the chart output as image, I am using Charts.js to produce the graph and the following code works fine for the graph but not the saving part.

<html>
  <head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
  <script type="text/javascript" src="https://cdn.rawgit.com/eligrey/canvas-toBlob.js/master/canvas-toBlob.js"></script>

<script type="text/javascript" src="https://cdn.rawgit.com/eligrey/FileSaver.js/master/FileSaver.min.js"></script>
  </head>

  <body>
    <canvas id="myChart" width="400" height="400"></canvas>
<br/><br/>
<button id="save-btn">Save Chart Image</button>

    <script>
      // Get the context of the canvas element we want to select


var data = [
    {
        value: 300,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
    },
    {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green"
    },
    {
        value: 100,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Yellow"
    },
    {
        value: 40,
        color: "#949FB1",
        highlight: "#A8B3C5",
        label: "Grey"
    },
    {
        value: 120,
        color: "#4D5360",
        highlight: "#616774",
        label: "Dark Grey"
    }

];

var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).PolarArea(data);


$("#save-btn").click(function() {
  $("#myChart").get(0).toBlob(function(blob) {
    saveAs(blob, "chart_1");
  });
});
    </script>
  </body>
</html>

Is this method fine or should i use other methods like base64 or image2canvas etc. Thanks in advance.

umzee
  • 11
  • 1
  • 6
  • http://stackoverflow.com/questions/15211742/html5-saveas-support-in-google-chrome may be useful – Spechal May 21 '17 at 07:13

1 Answers1

0

You just forgot to add jQuery. Add it to the head!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>