Reputation: 2427
I have a dataset where each row has an id
and a name
property. The id
property is the unique key, the name
s may be duplicated. I want the name to be shown on the category axis of a Dimple.js chart.
If I use "name" as the argument to chart.addCategoryAxis
, the correct labels are drawn, but users with duplicate names are grouped into single bars.
If I use "id" as the argument, the bars are separated but with the wrong labels.
Is there a "Dimple" way to achieve this, or should I just either :
Illustration of this (click the switch button to see what I mean) : http://jsbin.com/bupamo/4/edit?js,output
Upvotes: 4
Views: 2537
Reputation: 4904
Thanks for the nice clear explanation. This isn't really something which is native to dimple, however you can achieve it by drawing with the id and replacing them after the fact:
You will also need to make a couple of other tweaks like this:
// Set the title before drawing
xAxis.title = 'name';
// Draw the axis with id's
chart.draw(0, false);
// Now set the category fields to name so that the tooltips are correct
xAxis.categoryFields = ['name'];
// Select the ID labels and replace the text with names
xAxis.shapes
.selectAll("text")
.text(function (d) {
var i;
for (i = 0; i < initialData.length; i += 1) {
if (initialData[i].id === d) {
return initialData[i].name;
}
}
});
http://jsbin.com/lezocu/4/edit?js,output
Upvotes: 4