Geek asks and answers

Changing the oscilloscope along the x axis - dimple.js

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

What I would like to do is display the intervals along the x axis, similar to the current y axis that is created with addMeasureAxis(). However, when I switch to using the function addMeasureAxis()to generate the x axis, it groups the data, and I stay with one data point on my chart.

Does anyone have any suggestions for my situation / I don't notice any obvious way to do this? Thank.

Using addCategoryAxis () for the X axis: dimple.js x-axis values ​​categoryaxis

Using addMeasureAxis () for the X axis: dimple.js x-axis values ​​measureaxis

+3
source share
1 answer

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

If you had a price for X and a price for Y, it would look like this:

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

You will get a bubble for each individual x value. If there are cases when you have 2 Y values ​​for one X value, and you do not want to sum them up, you can transfer both dimensions to a series:

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

" ". . .

+3

More articles:


All Articles