Run the function on chart load for chartjs - Javascript Chart.js

Javascript examples for Chart.js:Chart Configuration

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

Description

Run the function on chart load for chartjs

Demo Code

ResultView the demo in separate window 

<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"></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 = {//from w  ww. ja v  a  2 s  .c  om
            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>

Related Tutorials