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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Multi series line chart

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
loading
Tags: 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.

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. 

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





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


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,





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


Erik
Replied On January 15, 2020 11:12 AM UTC

Hi Durga.

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


Regards,



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 


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

Live Chat Icon For mobile
Live Chat Icon