For the time being the following events can be handled through the chartObject.
-drag event is fired when the plot area of the main chart is dragged.
-zoom event is fired when the mouse wheel is used in the plot area of the main chart.
-select event is fired when the range of the selector from the navigator pane is changed.
JavaScript:
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script>
function OnLoad(sender) {
var chart = sender;
chart._chartObject.bind("dragEnd", OnDragEnd);
chart._chartObject.bind("selectEnd", OnSelectEnd);
chart._chartObject.bind("zoom", OnZoom);
}
function OnDragEnd(e) {
alert("OnDragEnd triggered: \nMin: " + e.axisRanges['mainAxis'].min + "\n Max: " + e.axisRanges['mainAxis'].max);
}
function OnSelectEnd(e) {
alert("OnSelectEnd triggered: \nFrom: " + e.from + "\n To: " + e.to);
}
function OnZoom(e) {
alert("OnZoom triggered: \nMin: " + e.axisRanges['mainAxis'].min + "\n Max: " + e.axisRanges['mainAxis'].max);
}
</script>
</telerik:RadCodeBlock>
ASPX:
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Layout="Stock" Width="800" Height="400"
Transitions="true">
<ClientEvents OnLoad="OnLoad" />
<PlotArea>
<XAxis Name="mainAxis" DataLabelsField="SellDate" Type="Date">
</XAxis>
<Series>
<telerik:ColumnSeries DataFieldY="SellQuantity">
</telerik:ColumnSeries>
</Series>
</PlotArea>
<Navigator Visible="true">
<XAxis Name="navAxis"></XAxis>
<SelectionHint Visible="true" />
<Series>
<telerik:AreaSeries DataFieldY="SellQuantity">
</telerik:AreaSeries>
</Series>
</Navigator>
</telerik:RadHtmlChart>
C#:
protected void Page_Load(object sender, EventArgs e)
{
RadHtmlChart1.DataSource = GetData();
RadHtmlChart1.DataBind();
}
protected DataTable GetData()
{
DataTable dt = new DataTable();
dt.Columns.Add("ID", typeof(int));
dt.Columns.Add("SellQuantity", typeof(int));
dt.Columns.Add("SellDate", typeof(DateTime));
dt.Rows.Add(1, 2, new DateTime(2011, 06, 12));
dt.Rows.Add(1, 5, new DateTime(2011, 12, 12));
dt.Rows.Add(2, 6, new DateTime(2012, 06, 17));
dt.Rows.Add(3, 4, new DateTime(2012, 09, 18));
dt.Rows.Add(4, 7, new DateTime(2013, 03, 18));
return dt;
}