chart.js time line chart

by cubicalmonkey

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>

<div style="width: 100%; height: 100%">
  <canvas id="myChart"></canvas>
</div>

JavaScript

var DATA = [16, 17, 17, 16, 17, 16, 17, 17, 16, 1, 1, 16, 17, 16, 17, 1, 16, 17, 17, 16, 17, 17, 1, 16, 17, 1, 16, 1, 17, 16, 17, 17, 16, 17, 16, 17, 16, 17, 1, 1, 16, 1, 1, 17, 1, 16, 1, 1, 16, 16, 1, 16, 1, 2, 1, 2, 1, 16, 1, 16, 1, 16, 16, 2, 16, 1, 16, 17, 1, 16, 1, 2, 1, 17, 16, 17, 17, 16, 1, 16, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 16, 16, 8, 16, 1, 16, 16, 1, 16, 1, 17, 16, 1, 16, 1, 16, 1, 16, 2, 16, 2, 16, 1, 16, 1, 17, 16, 1, 16, 16, 17, 1, 16, 17, 1, 16, 1, 16, 8, 8, 16, 17, 1, 16, 1, 16, 17, 17, 16, 17, 16, 1, 1, 16, 1, 16, 1, 16, 17, 17, 8, 16, 8, 8, 16, 17, 16, 17, 17, 16, 17, 16, 17, 16, 17, 17, 16, 17, 17, 17, 1, 16, 1, 17, 17, 16, 17, 17, 16, 17, 16, 17, 16, 17, 1, 16, 1, 1, 17, 17, 16, 17, 17, 16, 17, 1, 1, 8, 16, 8, 16, 2, 1, 16, 1, 16, 1, 2, 1, 1, 16, 17, 1, 17, 16, 17, 17, 16, 16, 1, 1, 16, 17, 16, 17, 1, 16, 1, 2, 1, 16, 1, 1, 2, 1, 2, 1, 2, 1, 2, 17, 17, 16, 17, 1, 1, 16, 1, 17, 17, 17];

var SNR_15DayHistory= [
{
      "AlarmLevel": "27.7",
      "EndTime": "2022-06-05 22:31:50",
      "CableIF": "cable-upstream  2/0/11.0",
      "IfIndex": 50794593,
      "ResolveLevel": "28.3",
      "UBR": "wch-e6k1.nape.il.cable.rcn.net",
      "StartTime": "2022-06-05 22:28:55"
    },
    {
      "UBR": "wch-e6k1.nape.il.cable.rcn.net",
      "StartTime": "2022-06-05 22:41:18",
      "CableIF": "cable-upstream  2/0/10.0",
      "AlarmLevel": "27.9",
      "EndTime": "2022-06-05 22:44:37",
      "ResolveLevel": "28.2",
      "IfIndex": 50794585
    },
    {
      "StartTime": "2022-06-05 22:46:11",
      "UBR":...