Dynamic or Live charts are useful in displaying data that changes with time like stock price, temperature, real time sensor readings, etc. Dynamic Chart are also known as Real Time charts. Dynamic updates are supported by all chart types including line, area, column, bar, pie, etc. The given example shows dynamic updating of data and also includes HTML / JavaScript source code that you can edit in-browser or save to run locally.
Read More >>
window.onload = function () { var dps = []; // dataPoints var chart = new CanvasJS.Chart("chartContainer", { title :{ text: "Dynamic Data" }, data: [{ type: "line", dataPoints: dps }] }); var xVal = 0; var yVal = 100; var updateInterval = 1000; var dataLength = 20; // number of dataPoints visible at any point var updateChart = function (count) { count = count || 1; for (var j = 0; j < count; j++) { yVal = yVal + Math.round(5 + Math.random() *(-5-5)); dps.push({ x: xVal, y: yVal }); xVal++; } if (dps.length > dataLength) { dps.shift(); } chart.render(); }; updateChart(dataLength); setInterval(function(){updateChart()}, updateInterval); }
You can change the color or thickness of line using lineColor and lineThickness respectively. Some other customizations include markerSize, markerType, label etc.