Line chart with multiple series

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.

Reply | Reply with quote

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.

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

Thanks,

Dharani.

Reply | Reply with quote

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.

Reply | Reply with quote

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>

@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()

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

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US