Dojo Charting: Event Support Has Landed! May 27th, 2008 at 11:21 pm by Eugene Lazutkin
As mentioned in Zooming, Scrolling, and Panning in Dojo Charting, our next goal to tackle was charting events. I am happy to announce that event support for Charting has landed in the Dojo trunk, and shipped with Dojo 1.2. It was the most requested dojox.charting feature, and I am excited that it is finally here!
Now you can interact with following elements representing your data points:
| Chart | Element | Comment |
|---|---|---|
| Default | marker | This chart is responsible for lines and areas with markers, and the scatter chart. |
| Stacked | marker | This chart is responsible for stacked lines and areas. |
| Bars | bar | Horizontal bars. |
| StackedBars | bar | |
| ClusteredBars | bar | A clustered version of bars. |
| Columns | column | Vertical columns. |
| StackedColumns | column | |
| ClusteredColumns | column | A clustered version of columns. |
| Bubble | circle | |
| Pie | slice |
The Following events are supported: onclick, onmouseover, and onmouseout.
Users can attach event handlers to individual plots of a chart:
chart.connectToPlot( plotName, // the unique plot name you specified when creating a plot object, // both object and method are the same used by dojo.connect() method // you can supply a function without an object );
The event handler receives one argument. While it tries to unify information for different charts, its exact layout depends on the chart type:
| Attribute | Expected Value | Description |
|---|---|---|
| type | “onclick”, “onmouseover”, or “onmouseout” | Use this attribute to differentiate between different types of events. |
| element | “marker”, “bar”, “column”, “circle”, or “slice” | Indicates what kind of element has sent the event. Can be used to define highlighting or animation strategies. For details consult the previous table. |
| x | number | The “x” value of the point. Can be derived from the index (depends on a chart). |
| y | number | The “y” value of the point. Can be derived from the index (e.g., for a bar chart). |
| index | number | The index of a data point that caused the event. |
| run | object | The data run object that represents a data series. Example: o.run.data[o.index] — returns the original data point value for the event (o is an event handler’s argument). |
| plot | object | The plot object that hosts the event’s data point. |
| hAxis | object | The axis object that is used as a horizontal axis by the plot. |
| vAxis | object | The axis object that is used as a vertical axis by the plot. |
| event | object | The original mouse event that started the event processing. |
| shape | object | The gfx shape object that represents a data point. |
| outline | object | The gfx shape object that represents an outline (a cosmetic shape). Can be null or undefined. |
| shadow | object | The gfx shape object that represents a shadow (a cosmetic shape). Can be null or undefined. |
| cx | number | The “x” component of the visual center of a shape in pixels. Supplied only for “marker”, “circle”, and “slice” elements. Undefined for all other elements. |
| cy | number | The “y” component of the visual center of a shape in pixels. Supplied only for “marker”, “circle”, and “slice” elements. Undefined for all other elements. |
| cr | number | The radius in pixels of a “circle”, or a “slice” element. Undefined for all other elements. |
And finally it is time to see it in action: the event demo straight from the Dojo nightly. Hover over markers, bars, columns, bubbles, and pie slices, and click on them as well.
Besides dojox.charting, the demo illustrates some other parts of Dojo as well:
- dojo.fx — the Dojo Core animation toolkit for creating and combining animations.
- dojox.fx.easing — a collection of easing functions to spice up visual effects.
- dojox.gfx.fx — 2D graphics-specific animation helpers.
- dojox.lang.functional — power of functional programming at your fingertips.
All of these components make it possible to code up the demo rather quickly — the modular nature of Dojo pays off.
Coming Attractions
In working with events, I was acutely aware of the need for animation support. I want to package up some useful animation effects for chart interactions. The demo previews some possibilities.
Other big features waiting for some attention are integration with widgets and markup support. The former includes interactions with the tooltip widget, and the upcoming Chart Legend widget. Markup support allow creation of some simple interactive charts using just marked-up HTML, with virtually no additional JavaScript.
Stay tuned!
Posted May 28th, 2008 at 12:40 am
Very cool! I can’t wait for the animation effects.
Posted May 28th, 2008 at 6:49 pm
Very Cool !!!
i am waiting for Dojo release .. !!!
Posted June 13th, 2008 at 12:03 am
[…] to the previous article (Dojo Charting: Event Support Has Landed!) the next items on our plan for improving Dojo Charting are the widgetization of charting, events, […]
Posted June 24th, 2008 at 9:08 am
Thanks for your time to document this important feature.
A big addition to the Dojo Charting !
Posted June 26th, 2008 at 7:08 am
This is really awesome stuff… You guys are doing amazing work!
Question though: Which renderers will the event support be fully tested with prior to the official 1.2 release? I am asking because I am considering using the Silverlight renderer due to performance issues with the VML renderer in IE when rendering complex charts, but I don’t want to rely on Silverlight if it isn’t on your roadmap to be fully supported. I tried the events test page from the latest nightly build with the Silverlight renderer, and it mostly worked but there are definitely some issues (I was getting some errors, and the animations that fired on mouseover seemed to get “stuck”).
Posted June 26th, 2008 at 9:25 am
Working on events we spent more time testing them on SVG and VML than on Silverlight. The Silverlight renderer needs some additional work (not directly related to events), and I cannot guarantee that these changes will be done in time for Dojo 1.2. Highly likely they will be finished for Dojo 1.2.1 (the next security/bugfix release).
Stay tuned! In the worst case you’ll be working from the trunk. ;-)
Posted June 26th, 2008 at 5:16 pm
BTW, the problem with Silverlight’s MouseLeave event was fixed in the trunk — once again Microsoft doesn’t follow their own specifications. The event test page should be fine now.
Posted July 25th, 2008 at 7:38 am
By the way: I noticed that in animated pie charts (like e.g. Chart 10 at http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/charting/tests/test_event2d.html ) all slices start a little bigger than the final shape they assume after having been moved and let go at least once. Is this a bug or an intentional feature?
Also, swift maneuvring may leave a tooltip permanently up. For example: again on Chart 10, place the mouse pointer over the green slice, then quickly move it down transiting through the red slice: the “Red is 50%” tooltip remains hoisted. This also happens with bar charts.
Posted July 25th, 2008 at 7:51 am
> By the way: I noticed that in animated pie charts (like e.g. Chart 10 at http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/charting/tests/test_event2d.html ) all slices start a little bigger
To be precise, by the “scale” factor: using
var anima = new dc.action2d.MoveSlice(piechart, “default”, {scale: 1.0});
…the problem disappears.
Posted November 6th, 2008 at 2:18 pm
@Enzo Michelangeli: the tooltip is more stable now. Slices appearance is hard to reproduce. You can track this ticket for that: http://bugs.dojotoolkit.org/ticket/7883.
Posted November 21st, 2008 at 2:03 pm
I think these are beautiful, but I don’t understand how to use them.
The discussion here suggests use of chart.connectToPlot, but the examples show code calling functions like
var anim1a = new dc.action2d.Magnify(chart1, “default”);
To put it plainly, how do I write code to intercept clicks on an xy plot?
Posted November 21st, 2008 at 4:54 pm
(from Eugene): @James Cooper: we provided common event handlers packaged as self-attaching objects. Trust me — they do use chart.connectToPlot() internally. Actually you don’t need to trust me, you can inspect them yourself in dojox/charting/action2d/ directory of Dojo (available online here: http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/charting/action2d/). All files there are quite small and easy to follow, if you know basics of Dojo.
But if you want low-level things just do it like that:
chart.connectToPlot(”default”, function(o){
alert(o.type + ” : ” + o.element);
};
and you are in business.
Now it will not alert you on every single click in chart. See at the beginning of this post the objects you can interact with. If you still need to do it anyway your best bet is to attach your function directly to the surface:
chart.surface.connect(”onmousedown”, function(evt){
alert(”We got the mouse event!”);
};
If you want to know the chart coordinates, use chart.getCoords(), which returns dojo.coords() values for the chart’s surface. If you want to know plot’s offsets within the surface, use chart.offsets. It is an object with 4 properties: “l” for the left offset, “r” for the right offset, “t” for the top offset, and “b” for the bottom offset (all in pixels). chart.offset is populated by the first call to chart.fullGeometry(), but most probably you don’t need to touch it — it will be called automatically when the chart renders itself.
Posted February 11th, 2009 at 6:30 pm
Animated tooltips seems to be the only solution in my case, since I have long text to attache. The demo page works fine for me. But when I try to make Bubbles on my own page with local 1.2.3 release of dojo, the tooltip do not appear and tooltip text goes into top node (dojo.doc) instead. No error is reported. I even literally reproduced the dojo modules loading exactly as in example, but still result is same. Where else can I dig to find the cause and fix this unfortunate case?
Posted February 25th, 2009 at 5:41 pm
Gladly, I was wrong in my previous comment - tooltips work just fine. It works great, actually!
Events support for charting is a very valuable addition. Excelent work, well done! Thanks.
Posted March 2nd, 2009 at 8:27 am
@ Alexandr: How did you get them to work? I am using version 1.2.3 of Dojo and I can not get the tooltips to show up as bubbles when I mouseover the slices (like in the demo).