Dojo Charting: Event Support Has Landed!

By on May 27, 2008 11:21 pm
Notice: There is a newer version of this post available

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.

Pie chart screenshot

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!

Comments

  • Very cool! I can’t wait for the animation effects.

  • Very Cool !!!
    i am waiting for Dojo release .. !!!

  • Pingback: SitePen Blog » Dojo Charting: Widgets, Tooltips, and Legend()

  • Thanks for your time to document this important feature.
    A big addition to the Dojo Charting !

  • Jesse

    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.

  • Enzo Michelangeli

    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.

  • Enzo Michelangeli

    > 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.

  • James Cooper

    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.

  • Alexandr

    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?

  • Alexandr

    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.

  • Mardig

    @ 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).

  • GoinOff

    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:

  • GoinOff

    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?

  • Pingback: Dojox chart2d connectToPlot links and examples « Ankhos — Oncology EMR Project()

  • smile

    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.