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?
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.
And the JSON which changed / is "denormalised" now: