Dynamic or Live charts are used for displaying data that varies with time. Using Line Chart for Real-time Graph is very common. These Charts are interactive, responsive, support animation and live updates. Given Example shows Line Chart which updates every 500 milliseconds. It also contains source code that you can edit in-browser or save to run locally.
Read More >>
window.onload = function() { var dataPoints = []; var chart = new CanvasJS.Chart("chartContainer", { theme: "light2", title: { text: "Live Data" }, data: [{ type: "line", dataPoints: dataPoints }] }); updateData(); // Initial Values var xValue = 0; var yValue = 10; var newDataCount = 6; function addData(data) { if(newDataCount != 1) { $.each(data, function(key, value) { dataPoints.push({x: value[0], y: parseInt(value[1])}); xValue++; yValue = parseInt(value[1]); }); } else { //dataPoints.shift(); dataPoints.push({x: data[0][0], y: parseInt(data[0][1])}); xValue++; yValue = parseInt(data[0][1]); } newDataCount = 1; chart.render(); setTimeout(updateData, 1500); } function updateData() { $.getJSON("https://canvasjs.com/services/data/datapoints.php?xstart="+xValue+"&ystart="+yValue+"&length="+newDataCount+"type=json", addData); } }
Crosshair can be enabled in the chart by creating a crosshair object. Other commonly used customization options are lineColor, lineThickness, etc.