Dimple.js Axis Labels

Question

I have a dataset where each row has an id and a name property. The id property is the unique key, the names 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 :

Write a manually axis formatter to convert from id to name, like here : https://github.com/PMSI-AlignAlytics/dimple/issues/99
Access the axis.shapes afterwards and change them?

Illustration of this (click the switch button to see what I mean) : http://jsbin.com/bupamo/4/edit?js,output

Good question! I was looking for exaclty this. For my use case this is a rather essential feature and it'd be nice if it was supported by dimple directly. (But its good it can be achieved with a little custom code) — Roland Bouman, May 21 '15 at 19:02

score 4 · Accepted Answer · answered Sep 11 '14 at 08:30

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

John, thanks for the suggestion! I was looking for exactly this kind of thing. Apparently this is not a very sought after feature since I didn't see any mention of it in either docs, or the examples or even blog posts by users. However for me this is an essential feature. It'd be cool if it were supported by dimple directly but I can certainly live with a bit of custom code to achieve it. Thanks again for this answer! — Roland Bouman, May 21 '15 at 19:03

Dimple.js Axis Labels

1 Answers1