Multi series line chart

Erik

Asked On December 26, 2019 01:38 PM UTC

Greetings!

I need an example of data binding for a datatable result for the line chart with the following rows:

Row1 = series name

Row2 = X value

Row3 = Y value

The series should be created dynamically as the result may vary. I tried some examples but with no success. E.g.:

foreach (var row in dt)

{

Series series = new Series();

series.DataSource = row.Data;

series.XName = "XName";

series.YName = "YName";

series.Name = row.SeriesName;

this.Chart1.Series.Add(series);

};

Thanks in advance.

Reply | Reply with quote

Srihari Muthukaruppan [Syncfusion]

Replied On December 30, 2019 01:07 PM UTC

Hi Erik,

We have analyzed your query. Based on your requirement we have prepared a sample for your reference with the datatable for binding data to chart. Please find below code snippet, screenshot and sample.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MultiLineSeries-290519188.zip

Code Snippet:

Default.aspx.cs

//..

DataTable dt = new DataTable();

dt.Columns.Add("xValue");

dt.Columns.Add("yValue");

dt.Columns.Add("yValue1");

dt.Rows.Add(new Object[] { "John", 28, 31 });

dt.Rows.Add(new Object[] { "Jake", 25, 28 });

dt.Rows.Add(new Object[] { "Peter", 26, 30 });

dt.Rows.Add(new Object[] { "James", 27, 36 });

dt.Rows.Add(new Object[] { "Mary", 32, 34 });

Series series = new Series();

series.XName = "xValue";

series.YName = "yValue";

series.Name = "Series1";

this.Chart1.Series.Add(series);

Series series1 = new Series();

series1.XName = "xValue";

series1.YName = "yValue1";

series1.Name = "Series2";

this.Chart1.Series.Add(series1);

this.Chart1.DataSource = dt;

this.Chart1.DataBind();

//..

Default.aspx

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

<ej:Chart ClientIDMode="Static" ID="Chart1" runat="server" Height="600" IsResponsive="true">

</ej:Chart>

</asp:Content>

Screenshot:

Let us know, if you have any concerns.

Regards,

Srihari M.

Reply | Reply with quote

Erik

Replied On January 6, 2020 11:17 AM UTC

Hi Srihari.

Thank you for the response. The sample is fine but I need an example for the Line chart. In this chart I'm building I have different categories (series) and their total by month. So, the data should be like:

XValue = Month

YValue = Total

Serie = Category

But I don't know how to bind these data when the datasource is from a DataTable.

Regards,

Reply | Reply with quote

Durga Gopalakrishnan [Syncfusion]

Replied On January 7, 2020 04:50 PM UTC

Hi Erik,

We have analyzed your query. We have prepared sample based on your requirement. Please check with the below code snippet and sample.

Code Snippet

Default.aspx.cs

//…

Series series1 = new Series();

series1.XName = "Month";

series1.YName = "Total1";

series1.Name = "Series2";

series1.Type = SeriesType.Line;

this.Chart1.Series.Add(series1);

//…

Screenshot

Sample

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

If the provided suggestion, doesn’t meet your requirement, kindly revert us.

Regards,

Durga

Reply | Reply with quote

Erik

Replied On January 8, 2020 11:37 AM UTC

Hi Durga.

I think I didn't expressed myself properly. What I need is for each category to have a line in the chart. This is the structure from my data:

dt.Rows.Add(new Object[] { "Jan", "Category1", 28 });

dt.Rows.Add(new Object[] { "Jan", "Category2", 30 });

dt.Rows.Add(new Object[] { "Jan", "Category3", 26 });

...

dt.Rows.Add(new Object[] { "Feb", "Category1", 28 });

dt.Rows.Add(new Object[] { "Feb", "Category2", 29 });

dt.Rows.Add(new Object[] { "Feb", "Category3", 32 });

...

dt.Rows.Add(new Object[] { "Mar", "Category1", 30 });

dt.Rows.Add(new Object[] { "Mar", "Category2", 29 });

dt.Rows.Add(new Object[] { "Mar", "Category3", 27 });

... and so on.

In my example there are three categories but this data may change as the user can add new categories. Is this doable?

Sorry for the inconvenience. Regards,

Reply | Reply with quote

Durga Gopalakrishnan [Syncfusion]

Replied On January 12, 2020 04:59 AM UTC

Hi Erik,

We have analyzed your query. We have splitted data table using category field and converted those data tables into list to assign it to series dataSource. Based on that we have prepared sample. Please check with the below code snippet and sample.

Code Snippet

Default.aspx.cs

// To split based on categories

List<DataTable> result = dt.AsEnumerable()

.GroupBy(row => row.Field<string>("Category"))

.Select(g => g.CopyToDataTable())

.ToList();

// To assign splitted data table to series

foreach (var item in result)

{

Series series = new Series();

series.XName = "Month";

series.YName = "Total";

series.Type = SeriesType.Line;

// To convert datatable to list

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

for (int j = 0; j < item.Rows.Count; j++)

{

series.Name = item.Rows[j].ItemArray[1].ToString();

Data.Add(new ChartData(item.Rows[j].ItemArray[0].ToString(), item.Rows[j].ItemArray[1].ToString(), Convert.ToInt32(item.Rows[j].ItemArray[2])));

}

series.DataSource = Data;

this.Chart1.Series.Add(series);

}

this.Chart1.DataBind();

Screenshot

Sample

https://www.syncfusion.com/downloads/support/directtrac/general/ze/LineChart-808817090.zip

Kindly revert us, if you have any concerns.

Regards,

Durga

Reply | Reply with quote

Erik

Replied On January 15, 2020 11:12 AM UTC

Hi Durga.

That's exactly what I needed. Thank you very much.

Regards,

Reply | Reply with quote

Srihari Muthukaruppan [Syncfusion]

Replied On January 15, 2020 02:58 PM UTC

Hi Erik,

Most welcome. Kindly get in touch with us, if you requires further assistance. We are always happy in assisting you.

Thanks,

Srihari M

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
150210	Dec 26,2019 01:38 PM UTC	Jan 15,2020 02:58 PM UTC	ASP.NET Web Forms	7

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US