Chart.js to animate right to left - Javascript Chart.js

Javascript examples for Chart.js:Chart Configuration

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

Description

Chart.js to animate right to left

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://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> 
      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@1.5.0/dist/chartjs-plugin-streaming.min.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){/* w ww  .  ja va 2s .c o m*/
var ctx = document.getElementById("chart").getContext("2d");
var chart = new Chart(ctx, {
   type: 'line',
  data: {
    labels: [],
    datasets: [{
      label: "My First dataset",
      backgroundColor: "rgba(95,186,88,0.7)",
      borderColor: "rgba(95,186,88,1)",
      pointBackgroundColor: "rgba(0,0,0,0)",
      pointBorderColor: "rgba(0,0,0,0)",
      pointHoverBackgroundColor: "rgba(95,186,88,1)",
      pointHoverBorderColor: "rgba(95,186,88,1)",
      data: []
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'realtime'
      }]
    },
    plugins: {
      streaming: {
        onRefresh: function(chart) {
          chart.data.labels.push(Date.now());
          chart.data.datasets[0].data.push(
             Math.floor(10 + Math.random() * 80)
          );
        },
        delay: 2000
      }
    }
  }
});
    });

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

Related Tutorials