PumpSchedule

by b_g_v

HTML

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

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

	<div id="container"></div>

CSS

#container {
    max-width: 1200px;
    min-width: 800px;
    height: 799px;
    width: 850px;
    margin: 1em auto;
    border: 2px solid red;
}

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":...