Change x-axis Interval Display - dimple.js

Question

I am working on creating a bubble chart using dimple.js. I am currently using the addCategoryAxis() function of create my x-axis based on the data I am using. The problem is that there are too many distinct x-axis values to properly display, as you can see below.

What I would like to accomplish is to display intervals along the x-axis, similar to the current y-axis which is being created by using the addMeasureAxis(). However, when I switch to using the addMeasureAxis() function to generate my x-axis, it groups the data and I am left with just a single data point on my chart.

Does anyone have any suggestions for my situation/am I overlooking some obvious way to do this? Thank you.

Using addCategoryAxis() for X-Axis:

Using addMeasureAxis() for X-Axis:

Answer 1

You are right with the axes in the second example but you need to specify a dimension by which to split your series in the first parameter of the addSeries method. Dimple will draw a bubble for every unique value in the field specified, so to draw the bubbles in the first example you can pass your x dimension.

If you had Price on X and Cost on Y it would look like:

chart.addMeasureAxis("x", "Price");
chart.addMeasureAxis("y", "Cost");
chart.addSeries("Price", dimple.plot.bubble);
chart.draw();

You'll get a bubble for every distinct x value. If there are instances where you have 2 Y values for a single X value and you don't wish to aggregate them you could pass both dimensions to the series:

chart.addMeasureAxis("x", "Price");
chart.addMeasureAxis("y", "Cost");
chart.addSeries(["Price", "Cost"], dimple.plot.bubble);
chart.draw();

This will draw a bubble for every unique combination of Cost and Price. You could also use any other dimension in your data as well/instead.