StockCharts are mostly used to represent real-time data with live updates. In the below example, try setting different update interval by changing interval variable. You can also try various themes available by setting theme property.
window.onload = function () {
var dataPoints = [], currentDate = new Date();
var stockChart = new CanvasJS.StockChart("chartContainer",{
theme: "dark1", //"light2", "dark1", "dark2"
title:{
text:"Dynamic StockChart"
},
charts: [{
axisX: {
crosshair: {
enabled: true,
valueFormatString: "MMM DD, YYYY HH:mm:ss"
}
},
axisY: {
title: "Pageviews Per Second"
},
toolTip: {
shared: true
},
data: [{
type: "line",
name: "Pageviews",
xValueFormatString: "MMM DD, YYYY HH:mm:ss",
xValueType: "dateTime",
dataPoints : dataPoints
}]
}],
navigator: {
axisX: {
labelFontColor: "white"
}
},
rangeSelector: {
selectedRangeButtonIndex: 0,
buttons: [
{
range: 1,
rangeType: "minute",
label: "1m"
}, {
range: 5,
rangeType: "minute",
label: "5m"
}, {
rangeType: "all",
label: "All"
}
],
inputFields: {
enabled: false
}
}
});
var dataCount = 700, ystart = 50, interval = 1000, xstart = (currentDate.getTime() - (700 * 1000));
updateChart(xstart, ystart, dataCount, interval);
function updateChart(xstart, ystart, length, interval) {
var xVal = xstart, yVal = ystart;
for(var i = 0; i < length; i++) {
yVal = yVal + Math.round(5 + Math.random() *(-5-5));
yVal = Math.min(Math.max(yVal, 5), 90);
dataPoints.push({x: xVal,y: yVal});
xVal += interval;
}
xstart = xVal;
dataCount = 1;
ystart = yVal;
stockChart.render();
setTimeout(function() { updateChart(xstart, ystart, dataCount, interval); }, 1000);
}
}