PumpSchedule

HTML

<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<script src="https://code.highcharts.com/gantt/modules/exporting.js"></script>

<div class="scrolling-container">
	<div id="container"></div>
</div>

CSS

#container {
    max-width: 1200px;
    min-width: 800px;
    height: 95vp;
     width: 95vp;
    margin: 1em auto;
}
.scrolling-container {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

JavaScript

// Set to 00:00:00:000 today
		var today = new Date(),
		day = 1000 * 60 * 60 * 24,
		map = Highcharts.map,
		dateFormat = Highcharts.dateFormat;
    var chart;

		// Set to 00:00:00:000 today
		today.setUTCHours(0);
		today.setUTCMinutes(0);
		today.setUTCSeconds(0);
		today.setUTCMilliseconds(0);
		today = today.getTime();
    
    var series = [{
		"PumpName": "Main Pump",
		"PumpId": 7,
		"IrrigationZoneName": "Main Pump",
		"CurrentStatus": "",
		"data": [{
				"start": 1580788800000,
				"end": 1580792400000,
				"DateStartDisplay": "2020-02-04T04:00:00",
				"DateEndDisplay": "2020-02-04T05:00:00",
				"schedule": "Pump-Pulse",
				"y": 0,
				"color": "rgba(0, 0,255, 0.5)",
				"id": "0-1"
			}, {
				"start": 1580794200000,
				"end": 1580797800000,
				"DateStartDisplay": "2020-02-04T05:30:00",
				"DateEndDisplay": "2020-02-04T06:30:00",
				"schedule": "Pump-Pulse",
				"y": 0,
				"color": "rgba(0, 0,255, 0.5)",
				"id": "0-2"
			}, {
				"start": 1580799600000,
				"end": 1580803200000,
				"DateStartDisplay": "2020-02-04T07:00:00",
				"DateEndDisplay": "2020-02-04T08:00:00",
				"schedule": "Pump-Pulse",
				"y": 0,
				"color": "rgba(0, 0,255, 0.5)",
				"id": "0-3"
			}, {
				"start": 1580805000000,
				"end": 1580808600000,
				"DateStartDisplay": "2020-02-04T08:30:00",
				"DateEndDisplay": "2020-02-04T09:30:00",
				"schedule": "Pump-Pulse",
				"y": 0,
				"color": "rgba(0, 0,255, 0.5)",
				"id": "0-4"
			}, {
				"start": 1580810400000,
				"end": 1580814000000,
				"DateStartDisplay": "2020-02-04T10:00:00",
				"DateEndDisplay": "2020-02-04T11:00:00",
				"schedule": "Pump-Pulse",
				"y": 0,
				"color": "rgba(0, 0,255, 0.5)",
				"id": "0-5"
			}, {
				"start": 1580815800000,
				"end": 1580819400000,
				"DateStartDisplay": "2020-02-04T11:30:00",
				"DateEndDisplay": "2020-02-04T12:30:00",
				"schedule": "Pump-Pulse",
				"y": 0,
				"color": "rgba(0, 0,255, 0.5)",
				"id": "0-6"
			}, {
				"start": 1580875200000,
				"end":...