JavaScript Dynamic / Live StockChart with Navigator

Download JavaScript StockChart Samples

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.

Try Editing The Code

Download Copy JSFiddle 
  1. window.onload = function () {
  2.   var dataPoints = [], currentDate = new Date(), rangeChangedTriggered = false;
  3.   var stockChart = new CanvasJS.StockChart("chartContainer",{
  4.     theme: "dark1", //"light2", "dark1", "dark2"
  5.     title:{
  6.       text:"Dynamic StockChart"
  7.     },
  8.     rangeChanged: function(e) {
  9.         rangeChangedTriggered = true;
  10.     },
  11.     charts: [{
  12.       axisX: {
  13.         crosshair: {
  14.           enabled: true,
  15.           valueFormatString: "MMM DD, YYYY HH:mm:ss"
  16.         }
  17.       },
  18.       axisY: {
  19.         title: "Pageviews Per Second"
  20.       },
  21.       toolTip: {
  22.         shared: true
  23.       },
  24.       data: [{
  25.         type: "line",
  26.         name: "Pageviews",
  27.         xValueFormatString: "MMM DD, YYYY HH:mm:ss",
  28.         xValueType: "dateTime",
  29.         dataPoints : dataPoints
  30.       }]
  31.     }],
  32.     navigator: {
  33.       slider: {
  34.         minimum: new Date(currentDate.getTime() - (90 * 1000))
  35.       },
  36.       axisX: {
  37.         labelFontColor: "white"
  38.       }
  39.     },
  40.     rangeSelector: {
  41.       enabled: false
  42.     }
  43.   });
  44.   var dataCount = 700, ystart = 50, interval = 1000, xstart = (currentDate.getTime() - (700 * 1000));
  45.   updateChart(xstart, ystart, dataCount, interval);
  46.   function updateChart(xstart, ystart, length, interval) {
  47.     var xVal = xstart, yVal = ystart;
  48.     for(var i = 0; i < length; i++) {
  49.       yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
  50.       yVal = Math.min(Math.max(yVal, 5), 90);
  51.       dataPoints.push({x: xVal,y: yVal});
  52.       xVal += interval;
  53.     }
  54.     if(!rangeChangedTriggered) {
  55.         stockChart.options.navigator.slider.minimum = new Date(xVal - (90 * 1000)) ;
  56.     }
  57.     xstart = xVal;
  58.     dataCount = 1;
  59.     ystart = yVal;
  60.     stockChart.render();
  61.     setTimeout(function() { updateChart(xstart, ystart, dataCount, interval); }, 1000);
  62.   }
  63. }

Related Customizations in StockChart

  • theme
  • colorSet
  • render()