Dynamically Bind Multiple Data Series with different scales to Line Chart

2 posts, 0 answers
  1. George
    George avatar
    3 posts
    Member since:
    Nov 2012

    Posted 15 Dec 2012 Link to this post

    I have followed the demo of "grouped" data and I can successfully get 3 dynamically loaded datasets to display on a line graph.  Hooray.  But each of the series should be using a different scale.  How can I map each series dynamically to different scales? 

    Maybe there is someway to use the GroupNameTemplate syntax ("#group.value#") in the .Axis() setting to get it set correctly?  I've tried that but it's not working.

    Maybe I should be using something other than Grouped data?
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 18 Dec 2012 Link to this post

    Hello George,

    You can achieve this as set the axes dynamically through the chart options and then call the redraw() method. For example:
    var chart =  $("#chart").data("kendoChart");
    var chartOptions = chart.options;
             
    var valueAxis = $("#chart").data("kendoChart").options.valueAxis;   
          chartOptions.valueAxis = [];  
          chartOptions.valueAxis.push(valueAxis);
          chartOptions.valueAxis.push({});
          chartOptions.valueAxis.push({});
                                      
          chartOptions.valueAxis[0].name = "FirstSeries Axis";   
          chartOptions.series[0].axis = "FirstSeries Axis";
                         
          chartOptions.valueAxis[1].name = "SecondSeries Axis";
          chartOptions.series[1].axis = "SecondSeries Axis";
                         
          chartOptions.valueAxis[2].name = "ThirdSeries Axis";
          chartOptions.series[2].axis = "ThirdSeries Axis";
                             
          chart.redraw();

    For convenience I attached a simple HTML page which demonstrates such approach in action.

    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!
Back to Top