2 Charts Synchronization

Thread is closed for posting
4 posts, 0 answers
  1. Marc
    Marc avatar
    39 posts
    Member since:
    Nov 2012

    Posted 16 Jun 2013 Link to this post

    I need to have 2 charts (one on top of the other) and I also need to use the zoom feature. Is there any client events for RadChart I can use to synchronize both charts when the user zoom or scroll the content in the X-Axis (date/time axis)?

    Thanks
  2. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 19 Jun 2013 Link to this post

    Hello,

    To see more information along the lines of the requested functionality, please refer to the following article:

    http://www.telerik.com/help/aspnet-ajax/chart-client-side-api.html

    It elaborates on both how to get the zoom/scroll coordinates, and trigger scrolling from the client. I hope it gets you started properly.

    Regards,
    Yavor
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Marc
    Marc avatar
    39 posts
    Member since:
    Nov 2012

    Posted 19 Jun 2013 Link to this post

    Hi, I had already saw this help topic but there is only properties and methods but no events describes at all in the help for this control.

    I looked deeper and I found something...I found a way to access the DOM element who have the scroll bars and I attached my OnScoll event so I am able to be triggered when the user scroll (I didn't try the complete solution, I just found a way to be get notifiied).

    Here is my code:

    var radChart = $get("<%= radChart.ClientID %>");
    var div = $telerik.$(radChart).find("[id$='_rcPlotArea']")[0];
    div.onscroll = function () {
         // Do something here...
    }


    Can you tell me if doing that will break something in the RadChart behavior or is it a simpler way to do it.

    Thanks.

  5. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 24 Jun 2013 Link to this post

    Hi,

    In the article mentioned previously, you can use the chart.scroll and chart.zoom methods to sync the charts. You can pair this with chart.get_xScrollOffset() and chart.get_yScrollOffset(), to determine the coordinates for the first chart.
    Let me know how this approach meets your requirements.

    Regards,
    Yavor
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top