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

Multi series line chart

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.

7 Replies

SM Srihari Muthukaruppan Syncfusion Team 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. 

 
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. 



ER Erik 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,






DG Durga Gopalakrishnan Syncfusion Team 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 
 
If the provided suggestion, doesn’t meet your requirement, kindly revert us. 
 
Regards, 
Durga 



ER Erik 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,






DG Durga Gopalakrishnan Syncfusion Team 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 
  
Kindly revert us, if you have any concerns. 
  
Regards, 
Durga 



ER Erik January 15, 2020 11:12 AM UTC

Hi Durga.

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


Regards,




SM Srihari Muthukaruppan Syncfusion Team 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 


Loader.
Live Chat Icon For mobile
Up arrow icon