onClick Option for Rickshaw Charting

Question

I was wondering if there is actually an out-of-the-box support for onclick event on a data point or I have to modify the library to make it works. I scanned through some parts of the source code and I didn't see anything that allows binding custom click actions. Tutorial on their site also doesn't show this option (http://code.shutterstock.com/rickshaw/).

Any help is appreciative. I'm currently evaluating between flot, rickshaw and flotr2. So far none of them satisfy all requirements and I'm very surprised the with exception of flot, there is no option for custom onClick event in other libraries. I saw that some people added some hack-ish way for flotr2, but it's very specific to bar charts only.

Answer 1

This is a bit of a hack, but I had the same requirement. I already had a HoverDetail object hooked up, so I hooked into the onShow event of the HoverDetail object to store the value of the selected item's x label.

(This was in an angular app, so that's why I'm setting the variable on scope)

var hoverDetail = new Rickshaw.Graph.HoverDetail({
    onShow: function(event){
        scope.data.activeDate = $(".x_label").text();
    },
    graph: graph
});

Then, I hooked up the normal click handler to the graph, and accessed the variable stored by the onShow handler in there.

For more information on how to work with the HoverDetail object and other Rickshaw constructs have a look at this screencast: http://tagtree.tv/d3-with-rickshaw-and-angular