How to create Syncfusion Chart using SQL query data?

[Sam]

Hi All,

How to create Syncfusion Chart using SQL query data? Thanks in advance.

[Anandaraj T]

Hi Sam,

Thanks for using Syncfusion products.

For binding data returned from Sql query with chart, the data should be passed to a data set such as data table or to an array list or binding list, then we can bind the data with chart.

Please refer the following code snippet to achieve this:
<code>
[CS]

           //Passing data returned from sql query to data table
           SqlConnection connection = new SqlConnection(connectionString);
           SqlCommand command = new SqlCommand(queryString, connection);
           SqlDataAdapter adapter = new SqlDataAdapter(command);
           DataTable data = new DataTable();
           adapter.Fill(data);

           MVCChartModel chartModel = new MVCChartModel();
           //Binding data in data table to a data binding model
           ChartDataBindModel model = new ChartDataBindModel(data);

           //Binding a column of data table to x name
           model.XName = "EmployeeID";

           //Binding a column of data table with y names
           model.YNames = new string[] {"EmployeeName"};

           ChartSeries series = new ChartSeries("Data Binding");
          
           //Binding model with series
           series.SeriesModel = model;

           chartModel.Series.Add(series);

</code>

For more information about data binding, please refer our online documentation in the following link:
Binding a DataSet to the Chart

Please let us know if you have any concern.

Regards,
Anandaraj

[Sam]

How to do in simple ASP.net?

[Anandaraj T]

Hi Sam,

Thanks for the update.

Since the two forums, "How to create Syncfusion Chart using SQL query data? " and "How to syncfusion grid and chart control while creating webpart in sharepoint?" have similar queries, we request you to follow up with the forum "How to syncfusion grid and chart control while creating webpart in sharepoint?" for further updates.

Please let us know if you have any concern.

Regards,
Anandaraj

[Sam]

Hi,

In your example 'chartcontrols' has been used, but in my case I am using 'ChartWebContols'. While using your sample facing this issue:

'Syncfusion.windows.forms.charts.Chartmodel.NewSeries(series) is Obsolete-use Chart series constructor'

Please provide me exact solution.

Thanks.

Capture_bdc37a2e.rar

[Anandaraj T]

Hi Sam,

Thanks for the update.

We regret for the inconvenience caused. The "NewSeries" method is obsolete for creating new series, we suggest you to create series objects using "ChartSeries" class and then add it to the chart series collection.

Please refer the following code snippet to achieve this:

<code>

[CS]

//Create a new series

ChartSeries series=new ChartSeries("SeriesName", ChartSeriesType.Line);

//To add points to the series

series.points.add(10,20);

//Adding series to the chart series collection

chartWebControl1.Series.Add(series);

For more information about series, please refer our online documentation in the following link:

Chart Series

Please let us know if you have any concern.

Regards,

Anandaraj

[Sasireka Thangavel]

Hi Anandaraj,

   Good Day! I am using Visual Studio 2008 C# and Syncfusion Essential Studio 13.4.0.53. Thanks for this code snippet. This one is working great. But i need to adapt multiple series to chart control. In my SQL table i have LineNo, StdWt, Wt LCL, Wt UCL, Cookie Wt. X axis - Line No and series are StdWt, Wt LCL, Wt UCL, Cookie Wt. In this condition i could not adapt all series into chart control. This one i tried with Chart Wizard its working fine. But i want it in button click event based SQL Query data. In one chart control have to adapt different charts based user combo selection based SQL Query data. How to solve this problem. 

Thanks & Regards

Sasireka Thangavel

.....................................

Go Green

[Anandaraj T]

Hi Sasireka, 

Thanks for using Syncfusion products. 

We have prepared a simple sample based on your requirements and it can be downloaded from the following link 

http://www.syncfusion.com/downloads/support/forum/110154/ze/ChartDataBinding-821581477 

Note: Since this forum belongs to windows forms platform, we have provided a windows forms sample. Please let us know if you need the sample in  a different platform. 

Query #1: I could not adapt all series into Chart control 

We can bind data to multiple series in Chart using the “SeriesModel” property in each series. A demo for this requirement is available in the “Bind data to multiple series” tab of above sample. 

Please refer the following code snippet to achieve this 

[C#] 

 

            string[] yNames = new string[] { "StdWt", "Wt LCL", "WtUCL", "Cookie Wt" }; 

 

            //This loop will create a new series bound with data source and add it to Chart control during each iteration 

            foreach (string yName in yNames) 

            { 

                 

                ChartSeries series2 = new ChartSeries(yName, ChartSeriesType.Column); 

 

                //Bind data table with Chart Series 

                series2.SeriesModel = new ChartDataBindModel(data) { 

 

                    //Name of the field in data source to bind with X-values (values along X-axis) 

                    XName = "LineNo", 

 

                    //Name of the field in data source to bind with Y-values (values along Y-axis) 

                    YNames = new string[] { yName } 

                }; 

 

                this.chartControl1.Series.Add(series2); 

       } 

 

[Screenshot of binding data to multiple Chart Series] 

 

Query #2: In one chart control have to adopt different charts based on user combo selection based SQL query data 

We can dynamically change all the options available in Chart. We should call the Refresh method of Chart control after updating.  

In the above sample, we have dynamically changed the data source bound with Chart series based on combo box selection. Similarly, we can change any property in Chart control. 

Please refer the following code snippet to achieve this 

[C#] 

 

        //Combo box selected index changed event 

        private void comboBox1_SelectedIndexChanged(object sender, EventArgs e) 

        { 

            //Change properties based on user selection 

            object dataSource = ((ChartDataBindModel)chart.Series[0].SeriesModel).DataSource; 

            this.chart.Series[0].SeriesModel = new ChartDataBindModel(dataSource) { XName = "LineNo", YNames = new string[] { this.comboBox1.SelectedItem.ToString() } }; 

 

            //Call refresh method after making necessary changes 

            this.chart.Refresh(); 

        } 

Please let us know if you have any concern. 

Regards, 

Anandaraj

[Anandaraj T]

Hi Sasireka, 

  

 We have modified the sample in our previous update for Visual Studio 2008 and it can be downloaded from the following link 

http://www.syncfusion.com/downloads/support/directtrac/110154/ze/ChartDataBinding-249331110  

  

Regards, 

Anandaraj 

[Sasireka Thangavel]

Hi Anamdraj,

  Good Day! Thanks a lot for valuable reply. I will try with this and update you.

[Sasireka Thangavel]

Hi Sasireka, 

Thanks for using Syncfusion products. 

We have prepared a simple sample based on your requirements and it can be downloaded from the following link 

http://www.syncfusion.com/downloads/support/forum/110154/ze/ChartDataBinding-821581477 

Note: Since this forum belongs to windows forms platform, we have provided a windows forms sample. Please let us know if you need the sample in  a different platform. 

Query #1: I could not adapt all series into Chart control 

We can bind data to multiple series in Chart using the “SeriesModel” property in each series. A demo for this requirement is available in the “Bind data to multiple series” tab of above sample. 

Please refer the following code snippet to achieve this 

[C#] 

 

            string[] yNames = new string[] { "StdWt", "Wt LCL", "WtUCL", "Cookie Wt" }; 

 

            //This loop will create a new series bound with data source and add it to Chart control during each iteration 

            foreach (string yName in yNames) 

            { 

                 

                ChartSeries series2 = new ChartSeries(yName, ChartSeriesType.Column); 

 

                //Bind data table with Chart Series 

                series2.SeriesModel = new ChartDataBindModel(data) { 

 

                    //Name of the field in data source to bind with X-values (values along X-axis) 

                    XName = "LineNo", 

 

                    //Name of the field in data source to bind with Y-values (values along Y-axis) 

                    YNames = new string[] { yName } 

                }; 

 

                this.chartControl1.Series.Add(series2); 

       } 

 

[Screenshot of binding data to multiple Chart Series] 

 

Query #2: In one chart control have to adopt different charts based on user combo selection based SQL query data 

We can dynamically change all the options available in Chart. We should call the Refresh method of Chart control after updating.  

In the above sample, we have dynamically changed the data source bound with Chart series based on combo box selection. Similarly, we can change any property in Chart control. 

Please refer the following code snippet to achieve this 

[C#] 

 

        //Combo box selected index changed event 

        private void comboBox1_SelectedIndexChanged(object sender, EventArgs e) 

        { 

            //Change properties based on user selection 

            object dataSource = ((ChartDataBindModel)chart.Series[0].SeriesModel).DataSource; 

            this.chart.Series[0].SeriesModel = new ChartDataBindModel(dataSource) { XName = "LineNo", YNames = new string[] { this.comboBox1.SelectedItem.ToString() } }; 

 

            //Call refresh method after making necessary changes 

            this.chart.Refresh(); 

        } 

Please let us know if you have any concern. 

Regards, 

Anandaraj

Hi Anandaraj,

    Good Day! I tried your code but i have small problem. i can adapt Std Wt and Wt UCL but i couldn't adapt Wt LCL and Cookie Wt. I have attached image. In this image first one is statically adapted (chart wizard) picture and next one is dynamically adapted. I will attach my code also. Am i missing any thing. Please give me a solution.

Attachment: ChartCodePic_7e32a1a2.rar

[Sasireka Thangavel]

Dear Anandaraj,

      Good Day! Thanks a lot. I got expected output. Its my mistake. By mistake i made space in column name. Instead of " string[] yNames = new string[] { "StdWt", "WtLCL", "WtUCL", "CookieWt" }; "  i used like "string[] yNames = new string[] { "StdWt", "Wt LCL", "WtUCL", "Cookie Wt" }; ". Now i got the output. Thanks once again.

Thanks & Regards

Sasireka Thangavel

.....................................

Go Green

[Sanjith Kesavan]

Hi Sasireka, 

We are glad that your issue has been resolved. Please get back to us if you require further assistance on this. 

Regards, 

Sanjith. 

[Sasireka Thangavel]

Hi Sanjith,

   Good Day! Thanks to all.