Multi series line chart

[Erik]

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.

[Srihari Muthukaruppan]

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"> 

    <script src="Scripts/jquery-3.3.1.min.js"></script> 

    <script src="Scripts/ej/web/ej.web.all.min.js"></script> 

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

        <PrimaryXAxis Visible="true" MajorGridLines-Visible="true" Title-Text="Manager" /> 

        <PrimaryYAxis AxisLine-Visible="false" Title-Text="Sales" />       

        <Title Text="Sales Comparison"></Title> 

        <Legend  Visible="false"></Legend> 

    </ej:Chart> 

</asp:Content> 

Screenshot:  

 

Let us know, if you have any concerns. 

Regards, 

Srihari M. 

[Erik]

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,

[Durga Gopalakrishnan]

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 

[Erik]

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,

[Durga Gopalakrishnan]

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 

[Erik]

Hi Durga.

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

Regards,

[Srihari Muthukaruppan]

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