Dojo Charting: Events

Chart events allow you to attach behavior in response to user actions to various chart features, such as markers, bars, columns, or pie wedges. 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 with the connectToPlot() method, which accepts three arguments:

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: