Line chart with multiple series

[jsu]

Hi Team,

Could you please advise how to generate Line chart with multiple series?

Thanks in advance.

[Dharanidharan Dharmasivam]

Hi Jsu, 

 

Greetings from Syncfusion. 

 

Based on your requirement we have prepared sample to generate multiple line series. Here we have created data in controller and passed to view page using ViewBag. You can change this with respect to your requirement. 

 

[ChartController.cs] 

 

 List<ChartData> chartData = new List<ChartData>(); 

 Created data here 

 ViewBag.dataSource = chartData; 

 

[ChartFeature.cshtml] 

 

@Html.EJS().Chart("container").Series(series => 

      { 

 

          Bind the data source and map the x and y fields from data source as highlighted 

          series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).XName("xValue").YName("yValue") 

          .DataSource(ViewBag.dataSource).Add(); 

           

           Other series configurations 

      }).Render() 

 

 

Screenshot: 

 

To know more on multiple series find the help document and online sample can be found here. Sample for reference can be found below. 

http://www.syncfusion.com/downloads/support/forum/141488/ze/chart_Series-127802215  

 

Thanks, 

Dharani. 

[Akshit]

Hi,

I am in similar situation i got the point how you rendered multiple Series. I wanted to ask how can i Re render or change data  on a button click without refreshing the page for same.

[Srihari Muthukaruppan]

Hi Akshit, 

 

Greetings from Syncfusion. 

 

Based on your requirement we have prepared sample to change data on button click without refreshing the page. You can change the data with respect to your requirement.  

 

Code Snippet: 

[ChartController.cs]  

  

 List<ChartData> chartData = new List<ChartData>();  

 Created data here  

 ViewBag.dataSource = chartData;  

  

[ChartFeature.cshtml]  

 <button id="click">Change the Data</button> 

<div class="row"> 

   @Html.EJS().Chart("container").ChartArea(area => area.Border(br=>br.Color("transparent"))).Series(series => 

      { 

          series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).XName("xValue").YName("yValue") 

          .Marker(mr => mr.Visible(true)).DataSource(ViewBag.dataSource).Name("Germany").Add(); 

          series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).XName("xValue").YName("yValue1") 

          .Marker(mr => mr.Visible(true)).DataSource(ViewBag.dataSource).Name("England").Add(); 

           Other series configurations  

      }).Render()  

<script> 

document.getElementById('click').onclick = () => { 

     var chart1 = document.getElementById("container").ej2_instances[0]; 

         chart1.series[0].dataSource = [ 

         {xValue: 0, yValue: 36 }, 

         {xValue: 5, yValue: 38 }, 

        { xValue: 9, yValue: 34 }]; 

     chart1.series[1].dataSource = [ 

        { xValue: 0, yValue1: 46 }, 

        { xValue: 5, yValue1: 48 }, 

        { xValue: 9, yValue1: 44 }]; 

    chart1.series[2].dataSource = [ 

        { xValue: 0, yValue2: 56 }, 

        { xValue: 5, yValue2: 58}, 

        { xValue: 9, yValue2: 54 }]; 

    chart1.series[3].dataSource = [ 

        { xValue: 0, yValue3: 66 }, 

        { xValue: 5, yValue3: 68 }, 

        { xValue: 9, yValue3: 64 }]; 

} 

</script> 

 

 

 Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/change_data2118994867.zip 

 

Let me know, if you have any concerns. 

 

Regards, 

Srihari M