We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Line chart with multiple series

Hi Team,

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


Thanks in advance.

3 Replies

DD Dharanidharan Dharmasivam Syncfusion Team December 14, 2018 02:10 AM

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. 
 
Thanks, 
Dharani. 



AK Akshit September 28, 2019 06:24 AM

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.


SM Srihari Muthukaruppan Syncfusion Team September 30, 2019 05:50 AM

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> 
 
 
 
Let me know, if you have any concerns. 
 
Regards, 
Srihari M 


Loader.
Live Chat Icon For mobile
Up arrow icon