Dynamic charts are also known as Live or Real-Time chart and are useful while displaying data that changes with time. The given example shows a dynamic Line chart where the data updates every one and half seconds. It also includes HTML / jQuery source code that you can edit in-browser or save to run locally.
Read More >>
window.onload = function() { var dataPoints = []; var options = { theme: "light2", title: { text: "Live Data" }, data: [{ type: "line", dataPoints: dataPoints }] }; $("#chartContainer").CanvasJSChart(options); 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; $("#chartContainer").CanvasJSChart().render() setTimeout(updateData, 1500); } function updateData() { $.getJSON("https://canvasjs.com/services/data/datapoints.php?xstart="+xValue+"&ystart="+yValue+"&length="+newDataCount+"&type=json", addData); } }
The size of the marker can be customized using markerSize property. You can also modify thickness of the line by using the thickness property. Other frequently used customizations are changing the label, markerType, lineColor etc.