Pan on chart with multiple series

5 posts, 0 answers
  1. David Sanchez
    David Sanchez avatar
    3 posts
    Member since:
    Sep 2006

    Posted 27 Apr 2013 Link to this post

    Hello,
     I am triying to implement the pan behavior over a Line Chart with multiple series.
    With one series it works fine, but when add more series ot still makes the pan, but only the first serie is visible.
    The others series just dissapear.
    I am using one datasource, and each series uses one field of each json node.
    DataSuorce example:

    This DataSource is generated dinamically, bacause the user can adds data and series.
    The original dataSource:
    [{time : "22:10" , count : 1000 },{time : "22:11" , count : 1450}]
    Whe user adds a new data and new serie the next data source is generated dinamically adding more fields to the original dataSource (user adds 3 more data sources, for example):
    [{time : "22:10" , count : 1000 , count_2 : 998, count_3: 756},{time : "22:11" , count : 1450 , count_2 : 398, count_3: 686},etc...]
    The first series defines its "fields source" to "count", the second serie to "count_2",etc...
    Everything is ok at this point, but when I drag the chart ,only the fisrt serie is still visible. If I adds the series again are en the right place, the pan is ok.
    Could you give me any help please?
    Some images are attached to try to explain better..








  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 30 Apr 2013 Link to this post

    Hi David,

    I am not quite sure what causes the problem in your application. For your convenience I prepared a simple jsBIn example which demonstrates a possible implementation of pan / zoom in a Kendo UI Line Chart with two series. Is it possible to edit it and show me your current implementation? This way I would be able to advice you further and provide concrete recommendations. Thank you in advance.

    Regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. David Sanchez
    David Sanchez avatar
    3 posts
    Member since:
    Sep 2006

    Posted 03 May 2013 Link to this post

    Hi!
    Thanks for reply.
    Your code works, but the problem is when you add a series dinamically.
    Here is your code edited to add one more serie bounded  to "high"  field.
    http://jsbin.com/apokib/14/edit

    As you can see, when you click the "add series" button, one more serie appears and shows  a div with the series.length value , but on drag, the new one series dissapears and the series.length is 2 again.
    Thanks!!

  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 07 May 2013 Link to this post

    Hello David,

    In order to achieve the desired behavior you should use the Chart's refresh() method (instead of redraw()). For your convenience I updated the jsBin example.
     
    Regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. David Sanchez
    David Sanchez avatar
    3 posts
    Member since:
    Sep 2006

    Posted 07 May 2013 Link to this post

    Ok!!
    Thank you!
Back to Top