chart.js time line chart

by adelriosantiago

HTML

<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

const rawData = [{
    min: 100,
    max: 220,
    avg: 80,
    time: 12345678000
  },
  {
    min: 200,
    max: 150,
    avg: 5,
    time: 12345688000
  },
  {
    min: 330,
    max: 590,
    avg: 98,
    time: 12345698000
  },
]

const getSingleProp = function(prop, data) {
	const extractedData = data.map((i) => {
  	return { y: i[prop], x: i.time }
  })
  
  return extractedData
}

//console.log("getSingleProp", getSingleProp("min", rawData))

var ctx = document.getElementById("test").getContext("2d");
var scatterChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: 'Min',
      borderColor: "green",
      data: getSingleProp("min", rawData)
    }, {
      label: 'Max',
      borderColor: "blue",
      data: getSingleProp("max", rawData)
    }, {
      label: 'Avg',
      borderColor: "black",
      data: getSingleProp("avg", rawData)
    }]
  },
  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',
        position: 'bottom',
        ticks: {
          callback(value) {
            var time = new Date(value * 1000);
            return (time.getMonth() + 1) + '/' + time.getDate() + ' ' + time.getHours();
          }
        }
      }]
    }
  }
});