Levey-Jennings Chart (LJ Chart) using striplines | CanvasJS JavaScript Charts

Levey-Jennings Chart (LJ Chart) using striplines | CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="chartContainer" style="height: 300px; width: 100%;"></div>

JavaScript

window.onload = function () {
  var chart = new CanvasJS.Chart("chartContainer", {
    title:{
      text: "Levey-Jennings Chart"              
    },
    axisY: {
      gridThickness: 0
    },
    data: [              
      {
        type: "line",
        xValueType: "dateTime",
        dataPoints: [
          { x:new Date(2019,03,01), y: 245 },
          { x:new Date(2019,03,02), y: 247 },
          { x:new Date(2019,03,03), y: 245 },
          { x:new Date(2019,03,04), y: 246 },
          { x:new Date(2019,03,05), y: 243 },
          { x:new Date(2019,03,06), y: 245 },
          { x:new Date(2019,03,07), y: 244 },
          { x:new Date(2019,03,08), y: 240 },
          { x:new Date(2019,03,09), y: 243 },
          { x:new Date(2019,03,10), y: 245 },
          { x:new Date(2019,03,11), y: 246 },
          { x:new Date(2019,03,12), y: 248 },
          { x:new Date(2019,03,13), y: 249 },
          { x:new Date(2019,03,14), y: 250 },
          { x:new Date(2019,03,15), y: 249 },
          { x:new Date(2019,03,16), y: 252 },
          { x:new Date(2019,03,17), y: 247 },
          { x:new Date(2019,03,18), y: 246 },
          { x:new Date(2019,03,19), y: 248 },
          { x:new Date(2019,03,20), y: 245 },
          { x:new Date(2019,03,21), y: 246 },
          { x:new Date(2019,03,22), y: 243 },


        ]
      }
    ]
  });

  function createLJChart() {
    var i,average=0, standardDeviation=0;
    var dataPoint = chart.options.data[0].dataPoints;
    
    //calculate Average/Median
    for(i=0;i< dataPoint.length;i++) {
      average += dataPoint[i].y;
    }
    average = average / dataPoint.length;

		//calculate Standasrd Deviation
    for(i=0;i< dataPoint.length;i++) {
      standardDeviation += Math.pow((dataPoint[i].y - average),2);
    }
    standardDeviation = Math.sqrt(standardDeviation/(dataPoint.length-1));

    if(chart.options.axisY === undefined) {
      chart.options.axisY = {};
    }

    var stripLines = chart.options.axisY.stripLines = [];
   ...