Chart.js Interpolation - Javascript Chart.js

Javascript examples for Chart.js:Chart Configuration

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

Description

Chart.js Interpolation

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://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/* w  ww  .ja v a  2s .  co  m*/
var ctx = document.getElementById("test").getContext("2d");
var i = -100;
var data = [{x: i, y: i}];
var scatterChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      borderWidth: 2,
      pointRadius: 0,
      borderColor: 'rgba(0, 0, 255, 1)',
      label: 'Scatter Dataset 1',
      data: data,
      fill: false,
      lineTension: 0,
      cubicInterpolationMode: 'linear'
    }, {
      borderWidth: 2,
      pointRadius: 0,
      borderColor: 'rgba(0, 0, 255, 0.4)',
      label: 'Scatter Dataset 2',
      data: [{x:-100,y:-100},{x:100,y:100}],
      fill: false,
      lineTension: 0,
      cubicInterpolationMode: 'linear'
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'linear',
        position: 'bottom'
      }]
    },
    pan: {
      enabled: true,
      mode: 'xy'
    },
    zoom: {
      enabled: true,
      mode: 'xy',
    },
    responsive: true,
    maintainAspectRatio: true,
  }
});
var step = 1;
var intervalId = setInterval(function() {
  i += step;
  if (i <= 100) {
    scatterChart.data.datasets[0].data.push({x:i,y:i});
    scatterChart.update();
  } else {
    clearInterval(intervalId);
  }
}, 200);
    }

      </script> 
   </head> 
   <body> 
      <canvas id="test" width="400" height="300"></canvas>  
   </body>
</html>

Related Tutorials