Showing Date-Time values on a Chart Axis - 2 | JSFiddle Sample Code

Showing Date-Time values on a Chart Axis - 2 | JSFiddle Sample Code

by Khanh Le

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: "Converting in Local Time"
      },

      axisX:{
        title: "time",
        gridThickness: 2,
        interval:1, 
        intervalType: "hour",        
        valueFormatString: "hh TT K", 
        labelAngle: -20
      },
      axisY:{
        title: "distance"
      },
      data: [
      {        
        type: "line",
        dataPoints: [//array
        //{x: new Date(Date.UTC (2019, 03, 10, 7,0) ), y: 26 },
        //{x: new Date( Date.UTC (2019, 03, 10,7,30) ), y: 30  },
          {x: new Date( Date.UTC (2019, 03, 10,7,15) ), y: 32  },
          {x: new Date( Date.UTC (2019, 03, 10,7,30) ), y: 35  },
          {x: new Date( Date.UTC (2019, 03, 10,7,45) ), y: 37  },
          {x: new Date( Date.UTC (2019, 03, 10,8,0) ), y: 38  },
          {x: new Date( Date.UTC (2019, 03, 10,8,15) ), y: 40  },
          {x: new Date( Date.UTC (2019, 03, 10,8,30) ), y: 45  },
          {x: new Date( Date.UTC (2019, 03, 10,8,45) ), y: 50  },
			{x: new Date( Date.UTC (2019, 03, 10,9,0) ), y: 55  },
        ]
      }
      ]
    });

chart.render();
}