CODEWITHSUNDEEP
javascriptjsond3.jsdimple.js
Marco
Marco

Reputation: 87

Problems rendering chart with Dimple.js

I am trying to make a graphic with Dimple. It has to be displayed the sunset and sunrise in one graphic. I don't understand it at all...

See my code below.

I dont understand how to get multiple series in one graphic. Also it seems logic to me to use the addTimeAxis method, but in many examples also on dates I see they use the method addCategoryAxis.

I hope someone can help me a little bit out, with a hint or two!

Many thanks in advance,

Marco

    <html>
    <div id="chartContainer">
    <script src="http://d3js.org/d3.v4.min.js"></script>
    <script src="http://dimplejs.org/dist/dimple.v2.3.0.min.js"></script>

    <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 590, 400);

    var data = [
      [{ "Date":"01/01/2018", "Sunrise":"08:10", "Sunset":"17:20" },
      {  "Date":"02/01/2018", "Sunrise":"08:08", "Sunset":"17:25" },
      {  "Date":"03/01/2018", "Sunrise":"08:06", "Sunset":"17:30" },
      {  "Date":"04/01/2018", "Sunrise":"08:04", "Sunset":"17:35" },
      {  "Date":"05/01/2018", "Sunrise":"08:02", "Sunset":"17:40" },
      {  "Date":"06/01/2018", "Sunrise":"08:00", "Sunset":"17:45" }]
    ];    

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

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

    var s1 = myChart.addSeries(null, dimple.plot.line, [x,y]);

    s1.lineMarkers = true;
    myChart.addLegend(180, 10, 360, 20, "right");
    myChart.draw();

  </script>
</div>
</html>

Upvotes: 0

Views: 100

Answers (1)

Nimeshka Srimal
Nimeshka Srimal

Reputation: 8950

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.

Upvotes: 1

Related Questions