Canvas Html5 JAvascript Creating Dynamic Charts Graficos con JAvascript

http://canvasjs.com/docs/charts/how-to/creating-dynamic-charts/

Creating Dynamic Charts

CanvasJS allows you to create dynamic charts that update at a given interval. Dynamic charts are required when you are displaying data that changes with time like stock price, temperature, etc. Technically, dynamic charts are created the same way as any other chart type except that dataPoints are added/removed at a predefined interval.
All available charts in CanvasJS support dynamic updates including Line Chart, Area Chart, Column Chart etc.
Here are the steps for creating Dynamic Chart.

Step1:

Create a basic chart as usual. But, assign dataPoints to a pre-defined variable (dps in this example)

var dps = [{x: 1, y: 10}, {x: 2, y: 10}, {x: 3, y: 10}, {x: 4, y: 10}, {x: 5, y: 10}];   //dataPoints. 
 
var chart = new CanvasJS.Chart("chartContainer",{
 title :{
  text: "Live Data"
 },
 axisX: {      
  title: "Axis X Title"
 },
 axisY: {      
  title: "Units"
 },
 data: [{
  type: "line",
  dataPoints : dps
 }]
});
 
chart.render();

Step2:

Now, we see that values inside dps are being rendered. Now, in order to make the chart dynamic, we just need to change dps array as required and then call chart.render() again.

var xVal = dps.length + 1;
var yVal = 100; 
var updateInterval = 1000;
 
var updateChart = function () {
 
 
  yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
  dps.push({x: xVal,y: yVal,});
  
  xVal++;
 
 chart.render();  
 
 // update chart after specified time. 
 
};
setInterval(function(){updateChart()}, updateInterval); 

In the above code, we are calling updateChart method every second. Each time updateChart adds a new dataPoint and calls chart.render().

Step3:

If you don’t want the dataPoints to keep getting accumulated, you can remove old values from the beginning of the Array as shown below.

if (dps.length >  10 )
{
 dps.shift();    
}

Finalising

To summarize, in order to create live charts, you should update the array containing the dataPoints and call chart.render()
Below is the compilation of final code.