[Solved]-Problems rendering chart with Dimple.js-d3.js

I noticed that you haven't got any answers so I thought of sharing my idea if it will help you by any chance.

As I see, it won't be easy to plot a multi line chart with the structure of the data you have. If you have any control over the structure of your data, then perhaps changing it to some format like below would make things a lot easier.

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.draw();

Here the thing is how I have changed the structure of the data array.

I know this is not really the solution for your exact case. But I thought it would be worth sharing. :)

Check the fiddle : Fiddle, data are just sample values to make it appear nice.

I hope it helps.