chart.js time line chart

by sqiudward

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.min.js"></script>
<div style="width: 100%; height: 100%">
  <canvas id="test"></canvas>
</div>

JavaScript

var data = [];
var options = {
    type: 'line',
    data: {
        datasets: data
    },
    options: {
        tooltips: {
        	callbacks: {
          	title(datasets) {
              var time = new Date(datasets[0].xLabel * 1000);
            	return (time.getMonth() + 1) + '/' + time.getDate() + ' ' + time.getHours();
            }
          }
        },
        scales: {
            xAxes: [
              {
                type: 'linear',
                scaleLabel: {
                  display: true,
                  labelString: 'Life span'
                },
                position: 'bottom',
                ticks: {
                  callback(value) {
                    var time = new Date(value * 1000);
                    return (time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds());
                  }
                }
              }
            ]
        }
    }
};
var colors = {
  "red": "rgb(255, 99, 132)",
  "orange": "rgb(255, 159, 64)",
  "yellow": "rgb(255, 205, 86)",
  "green": "rgb(75, 192, 192)",
  "blue": "rgb(54, 162, 235)",
  "purple": "rgb(153, 102, 255)",
  "grey": "rgb(201, 203, 207)"
};
function color(index) {
        function alpha(val) {
          function rgbString() { 
         
         		return colors[index % colors.length].replace(/[^,]+(?=\))/, val);
         };
         
         return rgbString;
      };							

			return alpha;
};



var rawData = [
  {
    "key": "Breather",
    "name": "Breather-1",
    "status": 2,
    "details": [
      {
        "dateTime": "2019-03-29T12:00:44+08:00",
        "status": 1,
        "event": "Rain(Medium)",
        "eventImpact": 0.2,
        "afterImpactLifeSpan": 40,
        "level": 80
      },
      {
        "dateTime": "2019-03-29T12:01:04+08:00",
        "status": 1,
        "event": "Rain(Low)",
        "eventImpact": 0.1,
        "afterImpactLifeSpan": 36,
        "level": 72
      },
      {
        "dateTime": "2019-03-29T12:01:16+08:00",
       ...