How to syncfusion grid and chart control while creating webpart in sharepoint?

[Sam]

Hi,

How to syncfusion grid and chart control while creating webpart in sharepoint? Thanks in advance.

[Anandaraj T]

Hi Sam,

Thanks for using Syncfusion products.

Would you please let us know whether you are using asp.net or asp.net mvc platform? The information provided would be of great help in providing the solution.

Thanks,
Anandaraj

[Sam]

Hi Anand,

Thanks for your reply, I am using asp.net only and looking to use in SharePoint2013 Silverlight webpart. My scenario is to create a Pie-Chart using data from SQL, If I click any slice in that Chart it should drill down to a Grid view which should contain that particular slice date only.

For that I am trying to use Syncfusion controls and expecting your suggestion for this scenario, thanks.

[Anandaraj T]

Hi Sam,

Thanks for the update.

Drill down charts can be implemented by listening to the click events in chart and replacing with another chart that has drill-down information or reinitializing the chart with new information.

For using drill down to display a grid on clicking a pie slice, we suggest you to hide the chart control and display the grid control with required data when the pie slice is clicked. The "ChartRegionClick" event of chart web control can be used to identify any click events happened in the chart and "CalcRegions" property of chart web control should be set to true for binding this event with chart web control.

The properties "SeriesIndex" and "PointIndex" can be used to determine the series and the point clicked by the user. The value of "PointIndex" property can be used to identify the pie slice clicked and now the chart web control can be hidden by setting "Visible" property of chart web control to false. After hiding the chart web control, grid control can be loaded with data required based on the "PointIndex" value.

We have also created a simple sample for drill down chart. Please download the sample attached and let us know if you have any concerns.

Regards,
Anandaraj

DrilldownWebSample_96935fde.zip

[Sam]

That's really great Anand. The Sample which you sent is working fine, but I need data should from SQL query. Here I have attached support document and please let me how to achieve using Syncfusion controls. 

Drill Down Doughnut Chart Scenario using Syncfusion Controls_8017a10f.rar

[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]

Thanks for your reply Anand, Could you please tell how to bind SQL data to normal Syncfusion 'Chartwebcontrol' control?

[Anandaraj T]

Hi Sam,

Thanks for the update.

We regret for the inconvenience caused. We have modified the code snippet provided by us in our update for 'ChartWebControl'.

Please refer the following code snippet to bind sql query data with 'ChartWebControl':
<code>

          //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);

           //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;
           this.ChartWebControl1.Series.Add(series);

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

Binding a DataSet to the Chart

Please find our online sample for data binding in the following link:
Data Binding

Please let us know if you have any concern.

Regards,
Anandaraj

[Sam]

Thanks, after deploy my project Syncfusion control not visible. How to fix this issue?

[Sam]

After tried your solution, chart is not visible.

Here is my code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Data.SqlClient;

using Syncfusion.Windows.Forms.Chart;

namespace WebApplication25

{

    public partial class _Default : Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            chartss();

        }

        public void chartss()

        {

            ChartDataBindModel model1 = null;

            SqlConnection connection = new SqlConnection(@"Server=####; Database=@@@@; User Id=%%; password=!!!!");

            SqlCommand command = new SqlCommand("select ROW_NUMBER() over(order by AC.Description) as Id,  Count(*) as Total from ReqDetail  rd inner join ReqHead rh on rd.Company =rh.Company and rd.ReqNum = rh.ReqNum  inner join  Part P on rd.Company=P.Company and rd.PartNum=P.PartNum inner join AnalysisCd AC on P.Company=AC.Company and  P.Mtl_AnalysisCode=AC.AnalysisCode where  rh.OpenReq =1 and rh.company='COMP01'  group by AC.Description,AC.AnalysisCode  having  Count(*)> 11 ", connection);

            SqlDataAdapter adapter = new SqlDataAdapter(command);

            DataTable dt = new DataTable("ChartSeries");

            adapter.Fill(dt);

            //Binding data in data table to a data binding model

            model1 = new ChartDataBindModel(dt);

            //Binding a column of data table to x name

            model1.XName = "Id";

            //Binding a column of data table with y names

            model1.YNames = new string[] { "Total" };

            ChartSeries series = new ChartSeries("Data Binding");

            series.Type = ChartSeriesType.Pie;

            //Binding model with series

            series.SeriesModel = model1;

            ChartWebControl1.Series.Add(series);

            

        }

    }

}

[Anandaraj T]

Hi Sam,

Thanks for the update.

Since your query is related to the incident 111214, we request you to follow up the incident for solution.

Please let us know if you have any concern.

Regards,

Anandaraj