Dynamic Line Chart with Date-Time Axis showing labels at Axis Viewportminimum & Viewportmaximum using Stripline | CanvasJS JavaScript Charts

Dynamic Line Chart with Date-Time Axis showing labels at Axis Viewportminimum & Viewportmaximum using Stripline | CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var dataPoints = [];

var chart = new CanvasJS.Chart("chartContainer", {
	axisX: {
  	stripLines: [{
    	thickness: 0,      
      labelAlign: "near",
    	//labelPlacement: "outside" //Uncomment to show label outside the axis      
    },{
    	thickness: 0,      
    	labelAlign: "near",
      //labelPlacement: "outside" //Uncomment to show label outside the axis      
    }]
  },
  data: [{ 
    type: "line",
    xValueType: "dateTime",
    yValueFormatString: "$####.00",
    xValueFormatString: "hh:mm:ss TT",
    dataPoints: dataPoints
  }]
});

var updateInterval = 500, yValue = 600, time = new Date();

// starting at 9.30 am
time.setHours(9);
time.setMinutes(30);
time.setSeconds(00);
time.setMilliseconds(00);

function updateChart(count) {
  count = count || 1;
  var deltaY;
  for (var i = 0; i < count; i++) {
    time.setTime(time.getTime()+ updateInterval);
    
    deltaY = .5 + Math.random() *(-.5-.5);

    yValue = Math.round((yValue + deltaY)*100)/100;

    dataPoints.push({
      x: time.getTime(),
      y: yValue
    });
  }
	
  chart.render();
  updateStripLines(chart);
}

function updateStripLines(chart) {
	chart.axisX[0].stripLines[0].set("value", chart.axisX[0].viewportMinimum, false);
  chart.axisX[0].stripLines[0].set("label", CanvasJS.formatDate(chart.axisX[0].viewportMinimum, chart.axisX[0].valueFormatString));
  
  chart.axisX[0].stripLines[1].set("value", chart.axisX[0].viewportMaximum, false);
  chart.axisX[0].stripLines[1].set("label", CanvasJS.formatDate(chart.axisX[0].viewportMaximum, chart.axisX[0].valueFormatString));
}

updateChart(100);	
setInterval(function(){updateChart()}, updateInterval);