JavaScript Spline Charts with Dynamic or Live Update

Download JavaScript Chart Samples

You can easily create dynamic Spline Chart & update it at given interval using CanvasJS Library. Dynamic Spline Charts are also referred to as live Spline Charts or real-time Spline Charts. The given example shows Dynamic Spline Chart which updates every second. It also contains source code that you can edit in-browser or save to run it locally.

Try Editing The Code

Download Copy JSFiddle 
window.onload = function () {

var dps = [];
var chart = new CanvasJS.Chart("chartContainer", {
	exportEnabled: true,
	title :{
		text: "Dynamic Spline Chart"
	},
	data: [{
		type: "spline",
		markerSize: 0,
		dataPoints: dps 
	}]
});

var xVal = 0;
var yVal = 100;
var updateInterval = 1000;
var dataLength = 50; // number of dataPoints visible at any point

var updateChart = function (count) {
	count = count || 1;
	// count is number of times loop runs to generate random dataPoints.
	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); 

}

Chart Customizations

You can change the thickness or color of line in spline Chart using lineThickness and lineColor properties. Some other common customizations include lineDashType, markerType, markerSize etc.