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.
Read More >>
window.onload = function () { var dataPoints = [], currentDate = new Date(), rangeChangedTriggered = false; var stockChart = new CanvasJS.StockChart("chartContainer",{ theme: "dark1", //"light2", "dark1", "dark2" title:{ text:"Dynamic StockChart" }, rangeChanged: function(e) { rangeChangedTriggered = true; }, 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: { slider: { minimum: new Date(currentDate.getTime() - (90 * 1000)) }, axisX: { labelFontColor: "white" } }, rangeSelector: { 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; } if(!rangeChangedTriggered) { stockChart.options.navigator.slider.minimum = new Date(xVal - (90 * 1000)) ; } xstart = xVal; dataCount = 1; ystart = yVal; stockChart.render(); setTimeout(function() { updateChart(xstart, ystart, dataCount, interval); }, 1000); } }