Dimple Multiline Chart D3

Answer for a stackoverflow question. Answer Link - https://stackoverflow.com/a/48448993/3571366

by Nimeshka Srimal

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dimple/2.3.0/dimple.latest.js"></script>
<div id="chartContainer"></div>

JavaScript

var svg = dimple.newSvg("#chartContainer", 590, 400);

var data = [
      	{ "Date":"01/01/2018", "Mode":"Sunrise", "Time":"08:10" },
      	{ "Date":"02/01/2018", "Mode":"Sunrise", "Time":"09:01" },
        { "Date":"03/01/2018", "Mode":"Sunrise", "Time":"09:30" },
        { "Date":"04/01/2018", "Mode":"Sunrise", "Time":"08:05" },
        { "Date":"05/01/2018", "Mode":"Sunrise", "Time":"08:10" },
        { "Date":"06/01/2018", "Mode":"Sunrise", "Time":"08:35" },
        { "Date":"01/01/2018", "Mode":"Sunset", "Time":"16:20" },
        { "Date":"02/01/2018", "Mode":"Sunset", "Time":"15:25" },
        { "Date":"03/01/2018", "Mode":"Sunset", "Time":"14:05" },
        { "Date":"04/01/2018", "Mode":"Sunset", "Time":"15:10" },
        { "Date":"05/01/2018", "Mode":"Sunset", "Time":"16:02" },
        { "Date":"06/01/2018", "Mode":"Sunset", "Time":"15:15" },
      ];

var myChart = new dimple.chart(svg, data);
myChart.setBounds(70, 40, 490, 320)

var x = myChart.addTimeAxis("x", "Date", "%d/%m/%Y", "%d/%m/%Y");
var y = myChart.addTimeAxis("y", "Time","%H:%M", "%H:%M");

var parseTime = d3.timeParse("%H:%M:%S");
y.overrideMin = parseTime("07:00:00");
y.overrideMax = parseTime("19:00:00");

var s = myChart.addSeries("Mode", dimple.plot.line);
s.interpolation = "cardinal";
s.lineMarkers = true;

myChart.addLegend(180, 10, 360, 20, "right");
myChart.draw();