Getting Started

28 Jun 201724 minutes to read

The AngularJS directives are usually included within the ej.widget.angular.min.js file and all these directives are usually packed together in a common module known as ejangular. For basic details on how to configure Syncfusion widgets in AngularJS framework, refer here.

To get start with the PivotClient control in AngularJS framework, the following list of external dependencies are mandatory,

The external AngularJS script file angular.min.js can also be accessed from the following installed location.

  • (installed location)\Syncfusion\Essential Studio\24.2.3\JavaScript\assets\external

An another mandatory script is ej.widget.angular.min.js, which can be accessed from the below specified location.

  • (installed location)\Syncfusion\Essential Studio\24.2.3\JavaScript\assets\scripts\common

Script/CSS Reference

Create a new HTML file and include the below initial code.

  • HTML
  • <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta charset="utf-8" />
            <title> </title>
        </head>
        <body>
        </body>
    </html>

    Refer the CSS file from the specific theme folder to your HTML file within the head section as shown below. Refer the built-in available themes from here.

  • HTML
  • <head>
        <meta charset="utf-8" />
        <title>Getting Started - PivotClient</title>
        <link href="http://cdn.syncfusion.com/24.2.3/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
    </head>

    The scripts and style sheets listed below in the <head> tag could be found in any of the following locations:

    Local Disk: Click here to know more about script and style sheets installed in local machine.

    CDN Link: Click here to know more about script and style sheets available online.

    NuGet Package: Click here to know more about script and style sheets available in NuGet package.

  • HTML
  • <head>
        <meta charset="utf-8" />
        <title>Getting Started - PivotClientt</title>
        <link href="http://cdn.syncfusion.com/24.2.3/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
        <script src="http://cdn.syncfusion.com/js/assets/external/jquery-3.0.0.min.js"></script>
        <script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
        <script src="http://cdn.syncfusion.com/js/assets/external/angular.min.js"></script>
        <script src="http://cdn.syncfusion.com/24.2.3/js/web/ej.web.all.min.js"></script>
        <script src="http://cdn.syncfusion.com/24.2.3/js/common/ej.widget.angular.min.js"></script>
    </head>

    In the above code, ej.web.all.min.jsscript reference has been added for demonstration purpose. It is not recommended to use this for deployment purpose, as its file size is larger since it contains all the widgets. Instead, you can use[CSG](http://csg.syncfusion.com/# “”) utility to generate a custom script file with the required widgets for deployment purpose.

    Creating a simple application with PivotClient and Relational datasource (Client Mode)

    This section covers the information that you need to know to populate a simple PivotClient with Relational data completely on the client-side.

    Initialize PivotClient

    Create the PivotClient control using ej-pivotclient directive and define all its other properties prefixed with e- as shown in the below code.

  • HTML
  • <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" ng-app="PivotClientApp">
    <head> <!-- Dependency file references --> </head>
    <body>
        <div ng-controller="PivotClientCtrl">
            <!--Create a tag which acts as a container for ejPivotClient widget-->
            <div id="PivotClient1" ej-pivotclient />
        </div>
    </body>
    </html>

    Populate PivotClient With Data

    Let us now see how to populate the PivotClient control using a sample JSON data as shown below.

  • JAVASCRIPT
  • var pivot_dataset = [
            { Amount: 100, Country: "Canada", Date: "FY 2005", Product: "Bike", Quantity: 2, State: "Alberta" },
            { Amount: 200, Country: "Canada", Date: "FY 2006", Product: "Van", Quantity: 3, State: "British Columbia" },
            { Amount: 300, Country: "Canada", Date: "FY 2007", Product: "Car", Quantity: 4, State: "Brunswick" },
            { Amount: 150, Country: "Canada", Date: "FY 2008", Product: "Bike", Quantity: 3, State: "Manitoba" },
            { Amount: 200, Country: "Canada", Date: "FY 2006", Product: "Car", Quantity: 4, State: "Ontario" },
            { Amount: 100, Country: "Canada", Date: "FY 2007", Product: "Van", Quantity: 1, State: "Quebec" },
            { Amount: 200, Country: "France", Date: "FY 2005", Product: "Bike", Quantity: 2, State: "Charente-Maritime" },
            { Amount: 250, Country: "France", Date: "FY 2006", Product: "Van", Quantity: 4, State: "Essonne" },
            { Amount: 300, Country: "France", Date: "FY 2007", Product: "Car", Quantity: 3, State: "Garonne (Haute)" },
            { Amount: 150, Country: "France", Date: "FY 2008", Product: "Van", Quantity: 2, State: "Gers" },
            { Amount: 200, Country: "Germany", Date: "FY 2006", Product: "Van", Quantity: 3, State: "Bayern" },
            { Amount: 250, Country: "Germany", Date: "FY 2007", Product: "Car", Quantity: 3, State: "Brandenburg" },
            { Amount: 150, Country: "Germany", Date: "FY 2008", Product: "Car", Quantity: 4, State: "Hamburg" },
            { Amount: 200, Country: "Germany", Date: "FY 2008", Product: "Bike", Quantity: 4, State: "Hessen" },
            { Amount: 150, Country: "Germany", Date: "FY 2007", Product: "Van", Quantity: 3, State: "Nordrhein-Westfalen" },
            { Amount: 100, Country: "Germany", Date: "FY 2005", Product: "Bike", Quantity: 2, State: "Saarland" },
            { Amount: 150, Country: "United Kingdom", Date: "FY 2008", Product: "Bike", Quantity: 5, State: "England" },
            { Amount: 250, Country: "United States", Date: "FY 2007", Product: "Car", Quantity: 4, State: "Alabama" },
            { Amount: 200, Country: "United States", Date: "FY 2005", Product: "Van", Quantity: 4, State: "California" },
            { Amount: 100, Country: "United States", Date: "FY 2006", Product: "Bike", Quantity: 2, State: "Colorado" },
            { Amount: 150, Country: "United States", Date: "FY 2008", Product: "Car", Quantity: 3, State: "New Mexico" },
            { Amount: 200, Country: "United States", Date: "FY 2005", Product: "Bike", Quantity: 4, State: "New York" },
            { Amount: 250, Country: "United States", Date: "FY 2008", Product: "Car", Quantity: 3, State: "North Carolina" },
            { Amount: 300, Country: "United States", Date: "FY 2007", Product: "Van", Quantity: 4, State: "South Carolina" }
    ];

    Now set the JSON data to the “data” property present inside the “dataSource” object. “dataSource” object allows us to set both the raw data input as well as the fields that needs to be displayed in the row, column, value and filter section of the PivotClient control.

  • HTML
  • <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" ng-app="PivotClientApp">
    <head> <!-- Dependency file references --> </head>
    <body>
        <div ng-controller="PivotClientCtrl">
            <div id="PivotClient1" ej-pivotclient e-datasource="dataSource" e-title="Relational Browser" />
        </div>
        <script>
            angular.module('PivotClientApp', ['ejangular']).controller('PivotClientCtrl', function ($scope) {
                var pivot_dataset = [
                        { Amount: 100, Country: "Canada", Date: "FY 2005", Product: "Bike", Quantity: 2, State: "Alberta" },
                        { Amount: 200, Country: "Canada", Date: "FY 2006", Product: "Van", Quantity: 3, State: "British Columbia" },
                        { Amount: 300, Country: "Canada", Date: "FY 2007", Product: "Car", Quantity: 4, State: "Brunswick" },
                        { Amount: 150, Country: "Canada", Date: "FY 2008", Product: "Bike", Quantity: 3, State: "Manitoba" },
                        { Amount: 200, Country: "Canada", Date: "FY 2006", Product: "Car", Quantity: 4, State: "Ontario" },
                        { Amount: 100, Country: "Canada", Date: "FY 2007", Product: "Van", Quantity: 1, State: "Quebec" },
                        { Amount: 200, Country: "France", Date: "FY 2005", Product: "Bike", Quantity: 2, State: "Charente-Maritime" },
                        //..
                ];
                $scope.dataSource = {
                    data: pivot_dataset,
                    rows: [
                        {
                            fieldName: "Country",
                            fieldCaption: "Country"
                        }
                    ],
                    columns: [
                        {
                            fieldName: "Product",
                            fieldCaption: "Product"
                        }
                    ],
                    values: [
                        {
                            fieldName: "Amount",
                            fieldCaption: "Amount"
                        }
                    ]
                };
            });
        </script>
    </body>
    </html>

    Now, PivotClient is rendered with PivotChart and PivotGrid with “Country” field in Row, “Product” field in Column and “Amount” field in Value section.

    Creating a simple application with PivotClient and Relational datasource (Server Mode)

    This section covers the information required to create a simple PivotClient bound to Relational datasource from server-side.

    NOTE

    We will be illustrating this section by creating a simple Web Application through Visual Studio IDE since PivotClient with server-side datasource requires .NET dependency. The Web Application would contain a HTML page and a service that would transfer data to server-side, process and return back the data to client-side for control re-rendering. The service utilized for communication could be either WCF or WebAPI based on user requirement and we have also illustrated both for user convenience.

    Project Initialization

    Create a new ASP.NET Empty Web Application by using Visual Studio IDE and name the project as “PivotClientDemo”.

    Next you need to add a HTML page. To add a HTML page in your Web Application, right-click on the project in Solution Explorer and select Add > New Item. In the Add New Item window, select HTML Page and name it as “GettingStarted.html”, click Add.

    Now you need to set “GettingStarted.html” as start-up page. In-order to do so, right-click on “GettingStarted.html” page and select “Set As Start Page”.

    Control Initialization

    Create the PivotClient control using ej-pivotclient directive and define all its other properties prefixed with e- as shown in the below code.

  • HTML
  • <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" ng-app="PivotClientApp">
    <head> <!-- Dependency file references --> </head>
    <body>
        <div ng-controller="PivotClientCtrl">
            <div id="PivotClient1" ej-pivotclient e-url="url" e-title="Relational Browser" />
        </div>
        <script>
            angular.module('PivotClientApp', ['ejangular']).controller('PivotClientCtrl', function ($scope) {
                $scope.url: "/Relational"
            });
        </script>
    </body>
    </html>

    The “url” property in PivotClient widget points the service endpoint, where data are processed and fetched in the form of JSON. The service used for the PivotClient widget as endpoint are WCF and WebAPI.

    WebAPI

    Adding a WebAPI Controller

    To add a WebAPI controller in your existing Web Application, right-click on the project in Solution Explorer and select Add > New Item. In the Add New Item window, select WebAPI Controller Class and name it as “RelationalController.cs”, click Add.

    Now WebAPI controller is added into your application successfully which in-turn comprise of the following file. The utilization of this file will be explained in the immediate sections.

    • RelationalController.cs

    NOTE

    While adding WebAPI Controller Class, name it with the suffix “Controller” that is mandatory. For example, in demo the controller is named as “RelationalController”.

    Next, remove all the existing methods such as “Get”, “Post”, “Put” and “Delete” present inside RelationalController.cs file.

  • C#
  • namespace PivotClientDemo
    {
        public class RelationalController: ApiController
        {
            
        }
    }

    List of Dependency Libraries

    Next you need to add the below mentioned dependency libraries into your Web Application. These libraries could be found in GAC (Global Assembly Cache) as well.

    To add them to your Web Application, right-click on References in Solution Explorer and select Add Reference. Now in the Reference Manager dialog, under Assemblies > Extension, the following Syncfusion libraries are found.

    • Syncfusion.Compression.Base
    • Syncfusion.Linq.Base
    • Syncfusion.Olap.Base
    • Syncfusion.PivotAnalysis.Base
    • System.Data.SqlServerCe (Version: 4.0.0.0)
    • Syncfusion.XlsIO.Base
    • Syncfusion.Pdf.Base
    • Syncfusion.DocIO.Base
    • Syncfusion.EJ
    • Syncfusion.EJ.Export
    • Syncfusion.EJ.Pivot

    List of Namespaces

    Following are the list of namespaces to be added on top of the main class inside RelationalController.cs file.

  • C#
  • using Syncfusion.JavaScript;
    using Syncfusion.PivotAnalysis.Base;
    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Data.SqlServerCe;
    using System.Linq;
    using System.Net.Http;
    using System.Text;
    using System.Web;
    using System.Web.Http;
    using System.Web.Script.Serialization;
    using Syncfusion.JavaScript.Olap;
    
    namespace PivotClientDemo
    {
        public class RelationalController : ApiController
        {
    
        }
    }

    Datasource Initialization

    A simple collection is provided as a datasource for the PivotClient in this demo section. This datasource is placed inside a separate class “ProductSales” in RelationalController.cs file. Refer to the following code example.

  • C#
  • namespace PivotClientDemo
    {
    ………
    ………
    ………
    internal class ProductSales
        {
            public string Product { get; set; }
    
            public string Date { get; set; }
    
            public string Country { get; set; }
    
            public string State { get; set; }
    
            public int Quantity { get; set; }
    
            public double Amount { get; set; }
    
            public static ProductSalesCollection GetSalesData()
            {
                /// Geography
                string[] countries = new string[] { "Australia", "Canada", "France", "Germany", "United Kingdom", "United States" };
                string[] ausStates = new string[] { "New South Wales", "Queensland", "South Australia", "Tasmania", "Victoria" };
                string[] canadaStates = new string[] { "Alberta", "British Columbia", "Brunswick", "Manitoba", "Ontario", "Quebec" };
                string[] franceStates = new string[] { "Charente-Maritime", "Essonne", "Garonne (Haute)", "Gers", };
                string[] germanyStates = new string[] { "Bayern", "Brandenburg", "Hamburg", "Hessen", "Nordrhein-Westfalen", "Saarland" };
                string[] ukStates = new string[] { "England" };
                string[] ussStates = new string[] { "New York", "North Carolina", "Alabama", "California", "Colorado", "New Mexico", "South Carolina" };
    
                /// Time
                string[] dates = new string[] { "FY 2005", "FY 2006", "FY 2007", "FY 2008", "FY 2009" };
    
                /// Products
                string[] products = new string[] { "Bike", "Van", "Car" };
                Random r = new Random(123345345);
    
                int numberOfRecords = 2000;
                ProductSalesCollection listOfProductSales = new ProductSalesCollection();
                for (int i = 0; i < numberOfRecords; i++)
                {
                    ProductSales sales = new ProductSales();
                    sales.Country = countries[r.Next(1, countries.GetLength(0))];
                    sales.Quantity = r.Next(1, 12);
                    /// 1 percent discount for 1 quantity
                    double discount = (30000 * sales.Quantity) * (double.Parse(sales.Quantity.ToString()) / 100);
                    sales.Amount = (30000 * sales.Quantity) - discount;
                    sales.Date = dates[r.Next(r.Next(dates.GetLength(0) + 1))];
                    sales.Product = products[r.Next(r.Next(products.GetLength(0) + 1))];
                    switch (sales.Product)
                    {
                        case "Car":
                            {
                                sales.Date = "FY 2005";
                                break;
                            }
                    }
                    switch (sales.Country)
                    {
                        case "Australia":
                            {
                                sales.State = ausStates[r.Next(ausStates.GetLength(0))];
                                break;
                            }
                        case "Canada":
                            {
                                sales.State = canadaStates[r.Next(canadaStates.GetLength(0))];
                                break;
                            }
                        case "France":
                            {
                                sales.State = franceStates[r.Next(franceStates.GetLength(0))];
                                break;
                            }
                        case "Germany":
                            {
                                sales.State = germanyStates[r.Next(germanyStates.GetLength(0))];
                                break;
                            }
                        case "United Kingdom":
                            {
                                sales.State = ukStates[r.Next(ukStates.GetLength(0))];
                                break;
                            }
                        case "United States":
                            {
                                sales.State = ussStates[r.Next(ussStates.GetLength(0))];
                                break;
                            }
                    }
                    listOfProductSales.Add(sales);
                }
    
                return listOfProductSales;
            }
    
            public override string ToString()
            {
                return string.Format("{0}-{1}-{2}", this.Country, this.State, this.Product);
            }
    
            public class ProductSalesCollection : List<ProductSales>
            {
            }
        }
    }

    Service methods in WebAPI Controller

    Now you need to define the service methods inside RelationalController class, found inside RelationalController.cs file, created while adding WebAPI Controller Class to your Web Application.

  • C#
  • namespace PivotClientDemo
    {
        public class RelationalController : ApiController
        {
            PivotClient pivotClient = new PivotClient();
            PivotChart pivotChart = new PivotChart();
            PivotGrid pivotGrid = new PivotGrid();
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            string conStringforDB = "";//Enter appropriate connection string to connect database for saving and loading operation of reports.
    
            [System.Web.Http.ActionName("InitializeClient")]
            [System.Web.Http.HttpPost]
            public Dictionary<string, object> InitializeClient(Dictionary<string, object> jsonResult)
            {
                this.BindData();
                return pivotClient.GetJsonData(jsonResult["action"].ToString(), ProductSales.GetSalesData(), null);
            }
    
            [System.Web.Http.ActionName("FetchMembers")]
            [System.Web.Http.HttpPost]
            public Dictionary<string, object> FetchMembers(Dictionary<string, object> jsonResult)
            {
                pivotClient.PopulateData(jsonResult["currentReport"].ToString());
                return pivotClient.GetJsonData(jsonResult["action"].ToString(), ProductSales.GetSalesData(), jsonResult["headerTag"].ToString());
            }
    
            [System.Web.Http.ActionName("DrillChart")]
            [System.Web.Http.HttpPost]
            public Dictionary<string, object> DrillChart(Dictionary<string, object> jsonResult)
            {
                this.BindData();
                this.pivotChart.PivotEngine.PivotRows = this.pivotClient.PivotReport.PivotRows;
                this.pivotChart.PivotEngine.PivotColumns = this.pivotClient.PivotReport.PivotColumns;
                this.pivotChart.PivotEngine.PivotCalculations = this.pivotClient.PivotReport.PivotCalculations;
                return pivotChart.GetJsonData(jsonResult["action"].ToString(), ProductSales.GetSalesData(), jsonResult["drilledSeries"].ToString());
            }
    
            [System.Web.Http.ActionName("Filtering")]
            [System.Web.Http.HttpPost]
            public Dictionary<string, object> Filtering(Dictionary<string, object> jsonResult)
            {
                pivotClient.PopulateData(jsonResult["currentReport"].ToString());
                return pivotClient.GetJsonData(jsonResult["action"].ToString(), ProductSales.GetSalesData(), jsonResult["filterParams"].ToString());
            }
    
            [System.Web.Http.ActionName("NodeDropped")]
            [System.Web.Http.HttpPost]
            public Dictionary<string, object> NodeDropped(Dictionary<string, object> jsonResult)
            {
                return pivotClient.GetJsonData(jsonResult["action"].ToString(), ProductSales.GetSalesData(), jsonResult["args"].ToString());
            }
    
            [System.Web.Http.ActionName("ToolbarOperations")]
            [System.Web.Http.HttpPost]
            public Dictionary<string, object> ToolbarOperations(Dictionary<string, object> jsonResult)
            {
                return pivotClient.GetJsonData(jsonResult["action"].ToString(), ProductSales.GetSalesData(), jsonResult["args"].ToString());
            }
            [System.Web.Http.ActionName("SaveReportToDB")]
            [System.Web.Http.HttpPost]
            public Dictionary<string, object> SaveReportToDB(Dictionary<string, object> jsonResult)
            {
                string operationalMode = jsonResult["operationalMode"].ToString(), analysisMode = jsonResult["analysisMode"].ToString(), reportName = string.Empty;
                reportName = jsonResult["reportName"].ToString() + "##" + operationalMode.ToLower() + "#>>#" + analysisMode.ToLower();
                SqlCeConnection con = new SqlCeConnection() { ConnectionString = conStringforDB };
                con.Open();
                SqlCeCommand cmd1 = new SqlCeCommand("insert into ReportsTable Values(@ReportName,@Reports)", con);
                cmd1.Parameters.Add("@ReportName", reportName);
                cmd1.Parameters.Add("@Reports", Encoding.UTF8.GetBytes(jsonResult["clientReports"].ToString()).ToArray());
                cmd1.ExecuteNonQuery();
                con.Close();
                return null;
            }
    
            [System.Web.Http.ActionName("RemoveReportFromDB")]
            [System.Web.Http.HttpPost]
            public Dictionary<string, object> RemoveReportFromDB(Dictionary<string, object> jsonResult)
            {
                string operationalMode = jsonResult["operationalMode"].ToString(), analysisMode = jsonResult["analysisMode"].ToString(), reportName = string.Empty;
                SqlCeConnection con = new SqlCeConnection() { ConnectionString = conStringforDB };
                con.Open();
                reportName = jsonResult["reportName"].ToString() + "##" + operationalMode.ToLower() + "#>>#" + analysisMode.ToLower();
                SqlCeCommand cmd1 = null;
                foreach (DataRow row in GetDataTable().Rows)
                {
                    if ((row.ItemArray[0] as string).Equals(reportName))
                    {
                        cmd1 = new SqlCeCommand("DELETE FROM ReportsTable WHERE ReportName LIKE '%" + reportName + "%'", con);
                    }
                }
                cmd1.ExecuteNonQuery();
                con.Close();
                return null;
            }
    
            [System.Web.Http.ActionName("RenameReportInDB")]
            [System.Web.Http.HttpPost]
            public Dictionary<string, object> RenameReportInDB(Dictionary<string, object> jsonResult)
            {
                string operationalMode = jsonResult["operationalMode"].ToString(), analysisMode = jsonResult["analysisMode"].ToString(), reportName = string.Empty, renameReport = string.Empty;
                SqlCeConnection con = new SqlCeConnection() { ConnectionString = conStringforDB };
                con.Open();
                reportName = jsonResult["selectedReport"].ToString() + "##" + operationalMode.ToLower() + "#>>#" + analysisMode.ToLower();
                renameReport = jsonResult["renameReport"].ToString() + "##" + operationalMode.ToLower() + "#>>#" + analysisMode.ToLower();
                SqlCeCommand cmd1 = null;
                foreach (DataRow row in GetDataTable().Rows)
                {
                    if ((row.ItemArray[0] as string).Equals(reportName))
                    {
                        cmd1 = new SqlCeCommand("update ReportsTable set ReportName=@RenameReport where ReportName like '%" + reportName + "%'", con);
                    }
                }
                cmd1.Parameters.Add("@RenameReport", renameReport);
                cmd1.ExecuteNonQuery();
                con.Close();
                return null;
            }
    
            [System.Web.Http.ActionName("Export")]
            [System.Web.Http.HttpPost]
            public void Export()
            {
                string args = HttpContext.Current.Request.Form.GetValues(0)[0];
                Dictionary<string, string> gridParams = serializer.Deserialize<Dictionary<string, string>>(args);
                pivotClient.PopulateData(gridParams["currentReport"]);
                string fileName = "Sample";
                pivotClient.ExportPivotClient(ProductSales.GetSalesData(), args, fileName, System.Web.HttpContext.Current.Response);
            }
    
            [System.Web.Http.ActionName("FetchReportListFromDB")]
            [System.Web.Http.HttpPost]
            public Dictionary<string, object> FetchReportListFromDB(Dictionary<string, object> jsonResult)
            {
                string reportNames = string.Empty, currentRptName = string.Empty, operationalMode = jsonResult["operationalMode"].ToString(), analysisMode = jsonResult["analysisMode"].ToString();
                foreach (System.Data.DataRow row in GetDataTable().Rows)
                {
                    currentRptName = (row.ItemArray[0] as string);
                    if (currentRptName.IndexOf("##" + operationalMode + "#>>#" + analysisMode) >= 0)
                    {
                        currentRptName = currentRptName.Replace("##" + operationalMode + "#>>#" + analysisMode, "");
                        reportNames = reportNames == "" ? currentRptName : reportNames + "__" + currentRptName;
                    }
                }
                Dictionary<string, object> dictionary = new Dictionary<string, object>();
                dictionary.Add("ReportNameList", reportNames);
                dictionary.Add("action", jsonResult["action"].ToString());
                return dictionary;
            }
    
            [System.Web.Http.ActionName("LoadReportFromDB")]
            [System.Web.Http.HttpPost]
            public Dictionary<string, object> LoadReportFromDB(Dictionary<string, object> jsonResult)
            {
                PivotReport report = new PivotReport();
                string operationalMode = jsonResult["operationalMode"].ToString(), analysisMode = jsonResult["analysisMode"].ToString();
                Dictionary<string, object> dictionary = new Dictionary<string, object>();
                string currentRptName = string.Empty;
                foreach (DataRow row in GetDataTable().Rows)
                {
                    currentRptName = (row.ItemArray[0] as string).Replace("##" + operationalMode.ToLower() + "#>>#" + analysisMode.ToLower(), "");
                    if (currentRptName.Equals(jsonResult["reportName"].ToString()))
                    {
                        byte[] reportString = new byte[2 * 1024];
                        reportString = (row.ItemArray[1] as byte[]);
                        if (analysisMode.ToLower() == "pivot" && operationalMode.ToLower() == "servermode")
                            dictionary = pivotClient.GetJsonData("LoadReport", ProductSales.GetSalesData(), Encoding.UTF8.GetString(reportString));
                        else
                            dictionary.Add("report", Encoding.UTF8.GetString(reportString));
                        break;
                    }
                }
                return dictionary;
            }
            private DataTable GetDataTable()
            {
                SqlCeConnection con = new SqlCeConnection() { ConnectionString = conStringforDB };
                con.Open();
                DataSet dSet = new DataSet();
                new SqlCeDataAdapter("Select * from ReportsTable", con).Fill(dSet);
                con.Close();
                return dSet.Tables[0];
            }
    
            private void BindData()
            {
                this.pivotClient.PivotReport.PivotRows.Add(new PivotItem { FieldMappingName = "Country", FieldHeader = "Country", TotalHeader = "Total" });
                this.pivotClient.PivotReport.PivotColumns.Add(new PivotItem { FieldMappingName = "Product", FieldHeader = "Product", TotalHeader = "Total" });
                this.pivotClient.PivotReport.PivotCalculations.Add(new PivotComputationInfo { CalculationName = "Amount", Description = "Amount", FieldHeader = "Amount", FieldName = "Amount", Format = "C", SummaryType = Syncfusion.PivotAnalysis.Base.SummaryType.DoubleTotalSum });
            }
        }
            .....
            ..... // Initialize the datasource
            .....
    }

    Configure routing in Global Application Class

    To add a Global.asax in your existing Web Application, right-click on the project in Solution Explorer and select Add > New Item. In the Add New Item window, select Global Application Class and name it as “Global.asax”, click Add.

    Once you finish adding the Global.asax file, immediately add the namespace “using System.Web.Http;” and then you can configure routing like in the following code example.

  • C#
  • public class Global : System.Web.HttpApplication
        {
            protected void Application_Start(object sender, EventArgs e)
            {
                System.Web.Http.GlobalConfiguration.Configuration.Routes.MapHttpRoute(
                    name: "DefaultApi",
                    routeTemplate: "{controller}/{action}/{id}",
                    defaults: new { id = RouteParameter.Optional });
                AppDomain.CurrentDomain.SetData("SQLServerCompactEditionUnderWebHosting", true);
            }
    }

    Now, PivotClient is rendered with PivotChart and PivotGrid with “Country” field in Row, “Product” field in Column and “Amount” field in Value section.

    WCF

    This section demonstrates the utilization of WCF service as endpoint binding Relational datasource to a simple PivotClient. For more details on this topic, click here.