Telerik UI for Windows 8 HTML

This article describes the events fired by RadChart, their usage and most notable event arguments.

Event Name

Description

Arguments

axislabelclick

Fires when an axis label is clicked.

e.axis: The axis that the label belongs to.

e.dataItem: Tthe original data item used to generate the label. Applicable only for data bound category axis.

e.index: The label sequential index or category index.

e.text: The label text.

e.target: The RadChart instance.

e.value: The label value or category name.

databound

Fires immediately after the control is databound.

e.target: The RadChart instance.

drag

Fired as long as the user is dragging the chart using the mouse or swipe gestures.

e.axisRanges: A hastable containing the initial range (min and max values) of named axes. The axis name is used as a key.

e.originalEvent: The original user event that triggered the drag action.

e.target: The RadChart instance.

dragend

Fires when the user stops dragging the chart.

e.axisRanges: A hastable containing the initial range (min and max values) of named axes. The axis name is used as a key.

e.originalEvent: The original user event that triggered the drag end action.

e.target: The RadChart instance.

dragstart

Fires when the user starts dragging the chart.

e.axisRanges: A hastable containing the initial range (min and max values) of named axes. The axis name is used as a key.

e.originalEvent: The original user event that triggered the drag action.

e.preventDefault: If invoked the drag operation will be aborted.

e.target: The RadChart instance.

legenditemclick

Fires when an item in the chart legend is clicked or tapped.

e.series: The chart series object represented by the legend item.

e.seriesIndex: The index of the chart series.

e.target: The RadChart instance.

e.text: The legend item text.

legenditemhover

Fires when an item in the chart legend is hovered.

e.series: The chart series object represented by the legend item.

e.seriesIndex: The index of the chart series.

e.target: The RadChart instance.

e.text: The legend item text.

plotareaclick

Fires when the plot area is clicked.

e.category: the data point category. Available only for categorical charts (bar, line, area and similar).

e.target: The RadChart instance.

e.value: the data point value. Available only for categorical charts (bar, line, area and similar).

select

Fires when the user modifies the visible selection of RadChart.

The range units are: Generic axis - Category index (0-based); Date axis - Date instance.

e.from : The lower boundary of the selected range.

e.target: the RadChart instance.

e.to: The upper boundary of the selected range. The last selected category is at index [to - 1] unless the axis is justified. In this case it is at index [to].

selectend

Fires when the user completes modifying the selection.

The range units are: Generic axis - Category index (0-based); Date axis - Date instance.

e.from : The lower boundary of the selected range.

e.target: the RadChart instance.

e.to: The upper boundary of the selected range. The last selected category is at index [to - 1] unless the axis is justified. In this case it is at index [to].

selectstart

Fires when the user starts modifying the axis selection.

The range units are: Generic axis - Category index (0-based); Date axis - Date instance.

e.from : The lower boundary of the selected range.

e.target: the RadChart instance.

e.to: The upper boundary of the selected range. The last selected category is at index [to - 1] unless the axis is justified. In this case it is at index [to].

seriesclick

Fires when any of the chart series is clicked.

e.category: The data point category.

e.dataItem: The original data item (when binding to dataSource).

e.series: The clicked series. You can get the name and type of the series through the respective properties (e.series.name, e.series.type).

e.target: The RadChart instance.

e.value: The data point value.

serieshover

Fires when any of the chart series is hovered.

e.category: The data point category.

e.dataItem: The original data item (when binding to dataSource).

e.series: The clicked series. You can get the name and type of the series through the respective properties (e.series.name, e.series.type).

e.target: The RadChart instance.

e.value: The data point value.

zoom

Fired as long as the user is zooming the chart using the mousewheel.

e.axisRanges: A hastable containing the initial range (min and max values) of named axes. The axis name is used as a key.

e.delta: A number that indicates the zoom amount and direction. A negative value indicates "zoom in", while a positive "zoom out".

e.originalEvent: The original user event that triggered the zoom action.

e.target: the RadChart instance.

zoomend

Fires when the user stops zooming the chart.

e.axisRanges: A hastable containing the initial range (min and max values) of named axes. The axis name is used as a key.

e.originalEvent: The original user event that triggered the zoom end action.

e.target: The RadChart instance.

zoomstart

Fires when the user uses the mouse wheel to zoom the chart.

e.axisRanges: A hastable containing the initial range (min and max values) of named axes. The axis name is used as a key.

e.originalEvent: If invoked the zoom operation will be aborted.

e.preventDefault: The original user event that triggered the zoom action.

e.target: The RadChart instance.

The following example shows how to use the seriesclick event to display information about the clicked series.

Attaching the Event Handler Copy imageCopy
<div id="myChart" data-win-control="Telerik.UI.RadChart" data-win-options="{
            dataSource: {
                data: [
                { year: '2000', sales: 200, profit: 100 },
                { year: '2001', sales: 450, profit: 370 },
                { year: '2003', sales: 125, profit: 87 }]
            },
            series: [
                { type: 'line', field: 'sales', name: 'Sales' },
                { type: 'line', field: 'profit', name: 'Profit' }
            ],
            categoryAxis: {
                field: 'year'
            },
            onseriesclick: Sample.Helpers.seriesClick
        }">
</div>
<p id="seriesInfo" style="color: #336699"></p>
<p id="selection" style="color: #33ccff"></p>
Handling the seriesclick Event Copy imageCopy
WinJS.Namespace.define("Sample.Helpers", {
    seriesClick: WinJS.Utilities.markSupportedForProcessing(function (e) {
        var dataItem = e.dataItem;
        document.getElementById("seriesInfo").innerHTML = "On <span style='color: white'>" + e.series.name
        + "</span> series, clicked a data point with value of <span style='color: white'>" + e.value + "</span>.";
    })
});