xxxxxxxxxx
<html>
<head>
<title>Chandrakant Thakkar</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="lineSteps.js"></script>
<script>
window.addEventListener('resize', function (event) {
$("#chart").width(window.innerWidth * 0.9);
$("#chart").height(window.innerHeight);
});
</script>
<div id="chart" style="width: 800;height: 100px;">
</div>
<div id="tooltipDiv" style="display:none;background:#3880aa;opacity:0.8;position: absolute;padding: 3;">
<div id="startDate"></div>
<div id="endDate"></div>
<div id="processType"></div>
</div>
<script>
let data = [{
start_date: "2017-09-04 07:00:00",
end_date: "2017-09-08 5:00:00",
processType: "cleaning"
}, {
start_date: "2017-09-08 5:00:00",
end_date: "2017-09-15 6:00:00",
processType: "batch"
}, {
start_date: "2017-09-15 6:00:00",
end_date: "2017-09-20 7:00:00",
processType: "waiting"
}, {
start_date: "2017-09-20 7:00:00",
end_date: "2017-09-24 8:00:00",
processType: "batch"
}, {
start_date: "2017-09-24 8:00:00",
end_date: "2017-09-28 9:00:00",
processType: "cleaning"
}, {
start_date: "2017-09-28 9:00:00",
end_date: "2017-10-07 10:00:00",
processType: "waiting"
}, {
start_date: "2017-10-07 10:00:00",
end_date: "2017-10-12 11:00:00",
processType: "batch"
}, {
start_date: "2017-10-12 11:00:00",
end_date: "2017-10-15 12:00:00",
processType: "cleaning"
}, {
start_date: "2017-10-15 12:00:00",
end_date: "2017-10-20 13:00:00",
processType: "batch"
}, {
start_date: "2017-10-20 13:00:00",
end_date: "2017-10-29 14:00:00",
processType: "waiting"
}, {
start_date: "2017-10-29 14:00:00",
end_date: "2017-11-04 15:00:00",
processType: "batch"
}];
$("#chart").empty();
var chartConfig = {
mainDiv: "#chart",
data: data,
lineColor: " #3880aa",
upLineValue: ["batch"],
typeFields: "processType",
minValueField: "start_date",
maxValueField: "end_date"
};
var lineStepCharts = new lineStepChart(chartConfig);
</script>
</body>
</html>
Modified http://code.jquery.com/jquery-latest.min.js to a secure url
https://code.jquery.com/jquery-latest.min.js
https://d3js.org/d3.v4.min.js