CODEWITHSUNDEEP
csvd3.jsdimple.js
Chris
Chris

Reputation: 1317

Display CSV data - 1 row, several bars with d3/dimplejs

As an example I've got a short csv file with 1 row of data:

ID,AmountX,AmountY,AmountZ
1,2,1,7

Now my chart should display 3 bars - one is 2 units tall, one is 1 unit tall and one is 7 units tall.
But I can't get this working at all .. that's my code:

<head>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
</head>
<body>
<div id="chartContainer">
  <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 590, 400);
    d3.csv("tester.csv", function (data) {
      var myChart = new dimple.chart(svg, data);
      myChart.setBounds(60, 30, 510, 305)
      myChart.addCategoryAxis("x", ["AmountX", "AmountY", "AmountZ"]);
      myChart.addMeasureAxis("y", "AmountZ");
      myChart.addSeries(null, dimple.plot.bar);
      myChart.addLegend(65, 10, 510, 20, "right");
      myChart.draw();
    });
  </script>
</div>
</body>

What do I do wrong here?

Changed it into JSON:

{
    "H1Amount": 2,
    "H2Amount": 4,
    "H3Amount": 14,
    "H4Amount": 0
}

And the HTML:

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

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

    var x = null,
        y = null;

    d3.json("test.json", function (data) {
        var myChart = new dimple.chart(svg, data);
        myChart.setBounds(60, 30, 510, 305)

        x = myChart.addMeasureAxis("x", ["H1Amount", "H2Amount", "H3Amount"]);
        x.overrideMin = 0;  
        x.overrideMax = 40;   

        myChart.addMeasureAxis("y", "H1Amount");
        myChart.addSeries(null, dimple.plot.bar);
        myChart.addLegend(65, 10, 510, 20, "right");
        myChart.draw();
    });
  </script>
</div>

</body>

But now I receive a white page - any idea where that comes from?
How can I debug what's going on there?

Upvotes: 1

Views: 218

Answers (1)

Chris
Chris

Reputation: 1317

I've got it working and I guess it's about the data model. Coming from MySQL and relational db modeling I think I simply used the wrong approach and automatically tried to normalize within PHP (where I generate the JSON).
Reading through this massive article about NoSQL data modeling: https://highlyscalable.wordpress.com/2012/03/01/nosql-data-modeling-techniques/ get's me a bit further in understanding how the JSON data should look like.
Thank you for your help - got deeper into d3/dimple as well through poking around a full day with this issue.

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

<h1>Titles</h1>
<div id="chartContainer">
  <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 400, 300);
    var x = null,
    y = null;
    d3.json("test.json", function (error, json) {
        var myChart = new dimple.chart(svg, json);
        myChart.setBounds(60, 30, 310, 205)
        x = myChart.addCategoryAxis("x", ["label"]);
        y = myChart.addMeasureAxis("y", ["value"]);
        myChart.addSeries("Titles",  dimple.plot.bar);
        myChart.addLegend(65, 10, 300, 20, "right");
        myChart.draw();
    });
  </script>
</div>
</body>

And the JSON which changed / is "denormalised" now:

[
    {
        "label": "H1Amount",
        "value": 2
    },
    {
        "label": "H2Amount",
        "value": 4
    },
    {
        "label": "H3Amount",
        "value": 5
    },
    {
        "label": "H4Amount",
        "value": 1
    }
]

Upvotes: 1

Related Questions