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!
Very cool! I can’t wait for the animation effects.
Very Cool !!!
i am waiting for Dojo release .. !!!
[...] 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, [...]
Thanks for your time to document this important feature.
A big addition to the Dojo Charting !
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”).
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. ;-)
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.
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.
> 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.
@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.
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?
(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.
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?
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.
@ 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).
Mardig and Alexandr,
Try the following to get your tooltips to show up on the chart
instead of some weird location on the web page:
* Make sure to include:
* Include this on your HTML body tag:
the html did not appear in the last post,
link stylesheet: link rel=”stylesheet” href=”../dojo-release-1.3.0-src/dijit/themes/tundra/tundra.css”
include class=’tundra’ in your html body tag.
I’m trying to use custom tooltips with the chart types StackedAreas and StackedLines. They don’t seem to work when the series are object arrays.
series = [1,2,3,4,5] – works fine
series = [{x: 0.3, y: 8}, {x: 4, y: 6, tooltip: "Custom tooltip"}, {x: 5.5, y: 2}] – does not work
Any suggestions?
[...] was able to piece together this example from the comments of this post. The main usage for a chart2d mouse event seems to [...]
hi there…
i’m looking for the source code of the example n°10 (pie/chart click event) !
If u have any source code which supports click event on chart, i take it…
thanks for all :D
hey i have a significant problem with the chart event handling.
i used your example above with “onclick”. and it works.
piechart.surface.connect(”onclick”, function(evt){
alert(”We got the onclick event!”);
};
my problem is that…
i have an array of information like this “seriesTrees = [1,2,3,4,5,6,7]”
it is a pie chart and on each part i want a different event. is it possible ?
currently i solved the problem. i navigate through the dom and catch the rgb colors of each part. but there is one bug because the colors change somethings and i dont know why.
another way to solve it (david answered me): http://www.sitepen.com/blog/2010/07/13/dive-into-dojo-charting/comment-page-1/#comment-109093