[Chartjs]-Run the function on load

by

0👍

This can be achieved by adding the following piece of code in your chart options …

onAnimationComplete: function() {
   $("#save-btn").click();
}

Here is a working example …

<html>
   <head>
      <script type="text/javascript" src="https://cdn.rawgit.com/eligrey/canvas-toBlob.js/master/canvas-toBlob.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
      <script type="text/javascript" src="https://cdn.rawgit.com/eligrey/FileSaver.js/master/FileSaver.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></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 = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [
               {
                  label: "My First dataset",
                  backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
                  borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
                  borderWidth: 1,
                  data: [65, 59, 80, 81, 56, 55, 40],
        }
    ]
         };
         var ctx = document.getElementById("myChart").getContext("2d");
         var myNewChart = new Chart(ctx).Bar(data, {
            onAnimationComplete: function() {
               $("#save-btn").click();
            }
         });
         $("#save-btn").click(function() {
            $("#myChart").get(0).toBlob(function(blob) {
               saveAs(blob, "chart_1");
            });
         });
      </script>
   </body>
</html>

note: be aware that, the user will be prompted with a save as dialog box on page load

Leave a comment