Home / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > Chart > Draw multiple Lines against mutilple X axis values(Categories)

• Devrao

  Posted on Feb 21, 2012 (permalink)

  Hi ,
    I want to plot chart which should plot two lines according to the following data by using Telerik MVC chart
  
              x1= new List<double>() { 50,55, 60, 65, 70, 75, 80, 85, 90, 95, 100 };
             y1= new List<double>() { 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50 };
  
              x2= new List<double>() { 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70 };
             y2 = new List<double>() { 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80 };
  
  I seen all the examples given on site but they plot multiple line taking multiple series and only one category axis.But I want to plot chart in which each line will have different X axis as well as Y axis values.
  
  What is given on site is
  

  <%= Html.Telerik().Chart(Model)
          .Name("chart")
          .ValueAxis(a => a.Numeric().Min(0).Max(100))
          .ValueAxis(a => a.Numeric("secondary").Min(0).Max(1000))
          .Series(series => {
              series.Bar(s => s.Sales).Name("Sales");
              series.Bar(s => s.TotalSales).Axis("secondary").Name("Total Sales");
      })
  %>

  
  So please tell me how I can do this by using telerik.
  
  Thanks & Regards
  Devrao Dhanawade

• Tsvetomir Tsonev Tsvetomir Tsonev

  Posted on Feb 22, 2012 (permalink)

  Hi,

  I can confirm that multiple category axes are not supported. Such feature is unlikely to be added as this feature won't work well with bar series.
  
  My recommendation is to look at scatter series for charts that require multiple X & Y axes. Scatter line series can emulate categorical line chart by assigning discrete X values - 1, 2, 3, etc..  The axis labels can be templated to convert these values to human readable form:
  
  .XAxis(y => y.Numeric("categories").Labels(l => l.Template("${ categoryName(value) }"))
  ...
  <script>
      function categoryName(index) { ... }
  </script>
  
  I hope this helps.

  Greetings,
  Tsvetomir Tsonev
  the Telerik team

  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 Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now.

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > Chart > Draw multiple Lines against mutilple X axis values(Categories)