Adding additional data points to a chart

Question

I am creating a simple bar chart (using dimple.js) showing participation in a chat room. The Y axis are the different participants and the X axis is the amount of messages they have sent to the room.

The chart I am creating is very simple, and based on data from three columns (participantID, Participant_Name, Message_Count):

var svg = dimple.newSvg("#chrt_participants", 1200, 600);
var chrt_participants = new dimple.chart(svg, data.result);
chrt_participants.addCategoryAxis("y", "Participant_Name");
chrt_participants.addMeasureAxis("x", "Message_Count");
chrt_participants.addSeries(null, dimple.plot.bar);
chrt_participants.draw();

I would like to associate the participantID into the chart, so that when someone for instance clicks on a bar, that ID is sent via an ajax call somewhere else. The challenge I am having is that I seem to only be able to access the values I explicitly send to the chart when creating it (via the addCategoryAxis and addMeasureAxis functions) and I am not able to assign any more values to a bar.

So my question is, how do you assign more variables to an element of a chart, when those variables do not have any "visual purpose"?

Answer 1

This difficulty here is that dimple works on an aggregated data set so your original data rows will not be directly accessible. This can be worked around if you pre-aggregate your data to the level you require it and then tell dimple to disaggregate the series by your desired value (which will have no effect on the drawing), this will make the extra value accessible. In this fiddle I update a label using the volume field which I associate with the series, even though it isn't drawn.

chart = new dimple.chart(svg, data);
x = chart.addCategoryAxis("x", ["Fruit", "Year"]);
x.addGroupOrderRule([2012, 2013]);
chart.addMeasureAxis("y", "Value");
s = chart.addSeries(["Volume", "Year"], dimple.plot.bar);
s.addEventHandler("click", function (e) { 
d3.select("#infoLabel")
    .text("In " + e.seriesValue[1] + " we sold " + 
           e.seriesValue[0]  + " " + e.xValue + "s!");
});
chart.draw();

See the fully working example here: http://jsfiddle.net/uafGn/

Answer 2

If you're using jQuery, I'd recommend giving all of them the same class 'example_class' (or something with a better name)

Then give them dynamic id to each of those that you could parse out like '[user_id]:[x_axis]:[y_axis]

Then, add a jquery function like:

$('.example_class').on('click', function(){
    my_parse_function($(this).attr('id'));
}

Or, better yet, go beyond me and study the new HTML5 data attribute

http://html5doctor.com/html5-custom-data-attributes/