how to draw line graph with line animation from left to right in line chart - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

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

Description

how to draw line graph with line animation from left to right in line chart

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.3.js"></script> 
      <script type="text/javascript" src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//from   ww w.  j  av a 2 s  .  c  o  m
var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(95,186,88,0.7)",
            strokeColor: "rgba(95,186,88,1)",
            pointColor: "rgba(0,0,0,0)",
            pointStrokeColor: "rgba(0,0,0,0)",
            pointHighlightFill: "rgba(95,186,88,1)",
            pointHighlightStroke: "rgba(95,186,88,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        }
    ]
};
Chart.types.Line.extend({
    name: "LineAlt",
    initialize: function(data){
        Chart.types.Line.prototype.initialize.apply(this, arguments);
        this.eachPoints(function(point, index){
            Chart.helpers.extend(point, {
                x: this.scale.calculateX(0),
                y: this.scale.calculateY(point.value)
            });
            point.save();
        }, this);
    }
});
var ctx = document.getElementById("chart1").getContext("2d");
new Chart(ctx).LineAlt(data);
    });

      </script> 
   </head> 
   <body> 
      <canvas id="chart1" height="300" width="600"></canvas>  
   </body>
</html>

Related Tutorials