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
close icon

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

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

10 Replies

AT Anandaraj T Syncfusion Team June 17, 2013 11:59 AM UTC

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


SA Sam July 14, 2013 06:10 AM UTC

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.


AT Anandaraj T Syncfusion Team July 19, 2013 09:12 AM UTC

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


SA Sam July 22, 2013 08:46 AM UTC

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


AT Anandaraj T Syncfusion Team July 25, 2013 10:53 AM UTC

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


SA Sam July 29, 2013 01:40 PM UTC

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


AT Anandaraj T Syncfusion Team August 1, 2013 09:03 AM UTC

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


SA Sam August 2, 2013 02:28 PM UTC

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


SA Sam August 6, 2013 10:37 AM UTC

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

        }
    }
}


AT Anandaraj T Syncfusion Team August 8, 2013 09:20 AM UTC

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

Loader.
Live Chat Icon For mobile
Up arrow icon