Geek Answers Handbook

Axial Marks Dimple.js

I have a dataset where each row has a property idand name. The property idis a unique key that namecan be duplicated. I want the name to be displayed on the category axis of the Dimple.js chart.

If I use the "name" as an argument for chart.addCategoryAxis, the correct labels will be drawn, but users with double names are grouped into separate columns. If I use "id" as an argument, the lines are split, but with the wrong labels.

Is there a "Dimple" way to achieve this, or should I just:

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

+4
source share
1 answer

Thanks for the good explanation. This is actually not something that is native to the dimple, however you can achieve this by drawing with an identifier and replacing them after the fact:

You also need to make a couple of other settings, such as:

// 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

+4
source

More articles:


All Articles