CODEWITHSUNDEEP
dimple.js
jason m
jason m

Reputation: 6835

Odd behavior when charting in dimple.js

I am using dimplejs to create line charts on some sample data that I have.

The data looks like this (see html section, it is stored in data.tsv).

d3.js = dimplejs.org/lib/d3.v3.4.8.js

and the dimple code is:

<head>
  <script src="d3.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
</head>
<body>
  <script type="text/javascript">


 // Pass in an axis object and an interval.
 var cleanAxis = function (axis, oneInEvery) {
     // This should have been called after draw, otherwise do nothing
     if (axis.shapes.length > 0) {
         // Leave the first label
         var del = false;
         // If there is an interval set
         if (oneInEvery > 1) {
             // Operate on all the axis text
             axis.shapes.selectAll("text")
             .each(function (d) {
                 // Remove all but the nth label
                 if (del % oneInEvery !== 0) {
                     this.remove();
                     // Find the corresponding tick line and remove
                     axis.shapes.selectAll("line").each(function (d2) {
                         if (d === d2) {
                             this.remove();
                         }
                     });
                 }
                 del += 1;
             });
         }
     }
 };

    var svg = dimple.newSvg("body", 800, 600);

    d3.tsv("data.tsv", function (data) {
        var myChart = new dimple.chart(svg, data);

        myChart.setBounds(60, 30, 505, 305);
        var x = myChart.addCategoryAxis("x", "Month");
        x.addOrderRule("Date");
        var y  =myChart.addMeasureAxis("y", "Returns");
        y.overrideMax = 200;
        myChart.addSeries("Name", dimple.plot.line);
        myChart.addLegend(60, 10, 500, 20, "right");


        myChart.draw();

        cleanAxis(x, 20);


    });
    /*var data = [
      { "Word":"Hello", "Awesomeness":2000 },
      { "Word":"World", "Awesomeness":3000 }
    ];*/
    /*var chart = new dimple.chart(svg, data);
    chart.addCategoryAxis("x", "Word");
    chart.addMeasureAxis("y", "Awesomeness");
    chart.addSeries(null, dimple.plot.bar);
    chart.draw();*/
  </script>
</body>

And the final chart looks like this: enter image description here

And the questions are:

Why are the numbers not matching? Why is there the big drop in the end of the data? The representation of the data seems inconsistent, and there is no way this library was released with a bug like this.

Thank you for any pointers

Upvotes: 1

Views: 133

Answers (1)

John Kiernander
John Kiernander

Reputation: 4904

Because you're plotting the Month field on the x axis, dimple is summing all of the returns for each month, so those are in fact month totals you are seeing (the drop at the end is presumably due to a partial month).

I think you may have more success with a time axis on x. You will not need the clean axis code then either. Try this (I haven't tested this code but it should be pretty close):

var svg = dimple.newSvg("body", 800, 600);

d3.tsv("data.tsv", function (data) {
    var myChart = new dimple.chart(svg, data);
    myChart.setBounds(60, 30, 505, 305);
    myChart.addTimeAxis("x", "Date", "%m/%d/%Y", "%b-%Y");
    myChart.addMeasureAxis("y", "Returns");
    myChart.addSeries("Name", dimple.plot.line);
    myChart.addLegend(60, 10, 500, 20, "right");
    myChart.draw();
});

Upvotes: 1

Related Questions