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.