ChartJS Line Chart

Multiple Line Chart

by jpeter06

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<body>
    <canvas id="chartFive" width="600" height="400"></canvas>
</body>

CSS

canvas { background-color : #eee;
}

JavaScript

var ctx = document.getElementById('chartFive').getContext('2d');

let timeData ={
  "2019-08-10T06:27": 12,
  "2019-08-10T06:26": 10,
  "2019-08-10T06:25": 8,
  "2019-08-10T06:24": 2,
  "2019-08-10T06:28": 1,
  "2019-08-10T06:48": 8
};
let min = '2019-08-10T06:00';
let max = '2019-08-10T08:00';

let labels = [];
let data = [];

let date = moment(min);
let endDate = moment(max);
do {
  let dateStr = date.format("YYYY-MM-DDTHH:mm");
	labels.push(dateStr);
  if(timeData.hasOwnProperty(dateStr))
    data.push(timeData[dateStr]);
  else
    data.push(0);
  date.add(1, 'minute');
} while(date.isBefore(endDate));

var chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels,
        datasets: [{
            label: '# of Messages',
            data,
            backgroundColor: 'rgba(0,0,255,0.3)',
            borderColor: 'blue',
            borderWidth: 1
        }]
    },
    options: {
        title: {
            display: true,
            text: 'Messages Received'
    },
    legend: {
        display: false
    },
    scales: {
        xAxes: [{
            type: 'time',
            time: {
                displayFormats: {
                    hour: 'HH'
                },
                unit: 'hour'
            }
            }],
            yAxes: [{
                gridLines: {
                    display: false
                },
                ticks: {
                    beginAtZero: true,
                    stepSize: 1
                }
            }]
        }
    }
});