Using dimple.js, I'm trying to create a simple scatter plot. However, the only result I'm getting is a bar graph, and I'm not sure how to switch it to a scatter. My data looks like this;
var data = [
{"Month":new Date(1942, 8, 1, 1, 1, 1, 1), "Workers":0},
{"Month":new Date(1942, 9, 1, 1, 1, 1, 1), "Workers":667}
...
]
I then create the graph like this
var svg = dimple.newSvg("body", 800, 600);
var chart = new dimple.chart(svg, data);
var x = chart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
chart.addMeasureAxis("y", "Workers");
chart.addSeries(null, dimple.plot.bar);
chart.draw();
I tried changing x
to chart.addMeasureAxis("x", "Month")
, but then the chart would not even render. Any solutions?
To render a scatter plot you need to change:
chart.addSeries(null, dimple.plot.bar);
to
chart.addSeries(null, dimple.plot.bubble);
The different axes allow you to change between the different types of scatter plot. With a category axis on x you will get equally spaced points which might look more suitable as a line chart (just change the above to dimple.plot.line
). Two measure axes will make for a more standard scatter plot, in which case you will probably want to pass a dimension to the first parameter of addSeries, otherwise all the data will be aggregated to a single point. You can see all the basic types of scatter plot and how to create them in the examples on the website.