Saturday, March 2, 2013

dojox charting tooltip function

Want to have a custom tool tip on your dojox chart?  The easiest thing to do is to use a custom function when creating the Tooltip object.

First: Add the require for the tool tip.

dojo.require( 'dojox.charting.action2d.Tooltip' );

Second: define the function to be used when a tooltip is required.

new dojox.charting.action2d.Tooltip(chart1, "default", {
text : function(o) {
return ( +'<br>' + o.y ); 
} );

As you can see the tool tip function is passed the o object.  This object describes the chart, series and plots you'll need to make a nice tool tip.  What you need is the, which is the name of the series and o.y, which is the value of the data point on the y axis.  Combined with <br> you'll get a two line tool tip.

Well, this is a three liner, but it looks much the same.  That's because I used a more complicated tool tip function that uses the label function to add the x axis label to the tool tip.