Completed
Last Updated: 09 Nov 2017 08:52 by Hessel
ADMIN
Danail Vasilev
Created on: 11 Feb 2014 11:25
Category: HtmlChart
Type: Feature Request
4
ADD client-side events for drag and zoom in RadHtmlChart
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;
    }
5 comments
Hessel
Posted on: 04 May 2017 11:02
Hi Danail,
how to get this working in a AJX-ified environment? It seems that the is not reached...
Rick
Posted on: 05 Apr 2016 14:16
Many thanks for this, however wondering if I may have found a bug. I have to create the charts dynamically in code behind I have found if I enable pan the axisRanges is null. 

Does this not work with panning also?

My code:

private static void Setup(this RadHtmlChart chart)
        {
            chart.Legend.Appearance.Position = ChartLegendPosition.Bottom;
            chart.Zoom.Enabled = true;
            chart.Zoom.MouseWheel.Enabled = true;
            chart.Zoom.MouseWheel.Lock = AxisLock.Y;
            chart.Zoom.Selection.Enabled = true;
            chart.Zoom.Selection.Lock = AxisLock.Y;
            chart.Zoom.Selection.ModifierKey = ModifierKey.Shift;
            chart.ClientIDMode = System.Web.UI.ClientIDMode.Static;

            // If I enable this axisRanges is null
            chart.Pan.Enabled = true;
        
        }

Attached Files:
ADMIN
Danail Vasilev
Posted on: 29 Jan 2016 13:21
Since the drag and zoom event have already been implemented in the chart I have created another item for the select event - http://feedback.telerik.com/Project/108/Feedback/Details/181474
ADMIN
Stamo Gochev
Posted on: 16 Oct 2015 11:00
The "drag" and "zoom" events will be provided with the implementation of panning and zooming, which is scheduled for the next major release.
Guru
Posted on: 16 Feb 2014 14:53
chart._chartObject.bind("zoom", OnZoom);   doesnt seem to be working. select and drag is working though. 
i tried it on both IE and firefox. when i zoom i am not getting the message box as per your example. plz help