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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Line chart with multiple series

Thread ID:

Created:

Updated:

Platform:

Replies:

141488 Dec 13,2018 07:48 PM UTC Sep 30,2019 09:50 AM UTC ASP.NET MVC - EJ 2 3
loading
Tags: Chart
jsu
Asked On December 13, 2018 07:48 PM UTC

Hi Team,

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


Thanks in advance.

Dharanidharan Dharmasivam [Syncfusion]
Replied On December 14, 2018 07:10 AM UTC

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. 


Akshit
Replied On September 28, 2019 10:24 AM UTC

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 [Syncfusion]
Replied On September 30, 2019 09:50 AM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;