ejPivotChart

14 Feb 201917 minutes to read

The pivot chart widget is a lightweight control that reads both OLAP and relational data sources and visualizes it in a graphical format with the ability to drill up and down. The pivot chart uses services to initialize and operate the widget and also to export the pivot chart to a Microsoft Excel, Microsoft Word, PDF, or image document.

WCF/WebAPI service to populate pivot chart

You can populate a simple pivot chart with the OLAP/relational data completely from the server-side using the WCF/WebAPI service. You can refer the Getting Started document available in the following UG documentation section.

For relational data source, click here.

For OLAP data source, click here.

Exporting service

Excel export

You can export the contents of the pivot chart to Excel document for future archival, references, and analysis purposes.

URL

https://js.syncfusion.com/ejservices/api/PivotChart/Olap/ExcelExport

Parameter

Type URL MultipleExport
Excel https://js.syncfusion.com/ejservices/api/PivotChart/Olap/ExcelExport False

Request

To achieve Excel export, the service URL and the file name are set as parameters.

JS
  • HTML
    • <html>
//...
<body>

     <div id="PivotChart1" style="min-height: 275px; min-width: 525px; height: 460px; width: 950px"></div>
     <button id="btnExport">Export</button>
     <script type="text/javascript">
        $(function() {
            $("#PivotChart1").ejPivotChart({
                dataSource: {
                   data: pivot_dataset,
                   rows: [{
                      fieldName: "Country",
                      fieldCaption: "Country"
                   }],
                  columns: [{
                      fieldName: "Product",
                      fieldCaption: "Product"
                  }],
                  values: [{
                      fieldName: "Amount",
                      fieldCaption: "Amount"
                  }]
               }
           });
           $("#btnExport").ejButton({
              click: "exportBtnClick"
           });
       });
       function exportBtnClick(args)
       {
          var pChartObj = $('#PivotChart1').data("ejPivotChart");
          pChartObj.exportPivotChart("https://js.syncfusion.com/ejservices/api/PivotChart/Olap/ExcelExport","fileName");
       }

     </script>
</body>
</html>
    C#
  • C#
    • [System.Web.Http.ActionName("ExcelExport")]
[System.Web.Http.HttpPost]
public void ExcelExport()
{
    PivotChartExcelExport pivotChartExcelExport = new PivotChartExcelExport();
    string args = HttpContext.Current.Request.Form.GetValues(0)[0];
    Dictionary<string, string> chartParams = serializer.Deserialize<Dictionary<string, string>>(args);
    pivotChartExcelExport.ExportToExcel(chartParams);
}

    Response

    Code: 200
    Content-Type: application/octet-stream
    Response for Excel export:

    The browser will prompt a dialog box to save the Excel document.

    Word export

    You can export the contents of the pivot chart to a Word document for future archival, references, and analysis purposes.

    URL

    https://js.syncfusion.com/ejservices/api/PivotChart/Olap/WordExport

    Parameter

    Type URL MultipleExport
    Word https://js.syncfusion.com/ejservices/api/PivotChart/Olap/WordExport False

    Request

    To achieve Word export, the service URL and the file name are set as parameters.

    JS
  • HTML
    • <html>
//...
<body>

     <div id="PivotChart1" style="min-height: 275px; min-width: 525px; height: 460px; width: 950px"></div>
     <button id="btnExport">Export</button>
     <script type="text/javascript">
        $(function() {
            $("#PivotChart1").ejPivotChart({
                dataSource: {
                   data: pivot_dataset,
                   rows: [{
                      fieldName: "Country",
                      fieldCaption: "Country"
                   }],
                  columns: [{
                      fieldName: "Product",
                      fieldCaption: "Product"
                  }],
                  values: [{
                      fieldName: "Amount",
                      fieldCaption: "Amount"
                  }]
               }
           });
           $("#btnExport").ejButton({
              click: "exportBtnClick"
           });
       });
       function exportBtnClick(args)
       {
          var pChartObj = $('#PivotChart1').data("ejPivotChart");
          pChartObj.exportPivotChart("https://js.syncfusion.com/ejservices/api/PivotChart/Olap/WordExport","fileName");
       }

     </script>
</body>
</html>
    C#
  • C#
    • [System.Web.Http.ActionName("WordExport")]
[System.Web.Http.HttpPost]
public void WordExport()
{
    PivotChartWordExport pivotChartWordExport = new PivotChartWordExport();
    string args = HttpContext.Current.Request.Form.GetValues(0)[0];
    Dictionary<string, string> chartParams = serializer.Deserialize<Dictionary<string, string>>(args);
    pivotChartWordExport.ExportToWord(chartParams);
}

    Response

    Code: 200
    Content-Type: application/octet-stream
    Response for Word export:

    The browser will prompt a dialog box to save the Word document.

    PDF export

    You can export the contents of the pivot chart to a PDF document for future archival, references, and analysis purposes.

    URL

    https://js.syncfusion.com/ejservices/api/PivotChart/Olap/PDFExport

    Parameter

    Type URL MultipleExport
    PDF https://js.syncfusion.com/ejservices/api/PivotChart/Olap/PDFExport False

    Request

    To achieve PDF export, the service URL and the file name are set as parameters.

    JS
  • HTML
    • <html>
//...
<body>

     <div id="PivotChart1" style="min-height: 275px; min-width: 525px; height: 460px; width: 950px"></div>
     <button id="btnExport">Export</button>
     <script type="text/javascript">
        $(function() {
            $("#PivotChart1").ejPivotChart({
                dataSource: {
                   data: pivot_dataset,
                   rows: [{
                      fieldName: "Country",
                      fieldCaption: "Country"
                   }],
                  columns: [{
                      fieldName: "Product",
                      fieldCaption: "Product"
                  }],
                  values: [{
                      fieldName: "Amount",
                      fieldCaption: "Amount"
                  }]
               }
           });
           $("#btnExport").ejButton({
              click: "exportBtnClick"
           });
       });
       function exportBtnClick(args)
       {
          var pChartObj = $('#PivotChart1').data("ejPivotChart");
          pChartObj.exportPivotChart("https://js.syncfusion.com/ejservices/api/PivotChart/Olap/PDFExport","fileName");
       }

     </script>
</body>
</html>
    C#
  • C#
    • [System.Web.Http.ActionName("PDFExport")]
[System.Web.Http.HttpPost]
public void PDFExport()
{
    PivotChartPDFExport pivotChartPDFExport = new PivotChartPDFExport();
    string args = HttpContext.Current.Request.Form.GetValues(0)[0];
    Dictionary<string, string> chartParams = serializer.Deserialize<Dictionary<string, string>>(args);
    pivotChartPDFExport.ExportToPDF(chartParams);
}

    Response

    Code: 200
    Content-Type: application/octet-stream
    Response for PDF export:

    The browser will prompt a dialog box to save the PDF document.

    Image export

    You can export the contents of the pivot chart to an image format for future archival, references, and analysis purposes. You can export the pivot chart to the following image formats:

    • PNG
    • EMF
    • JPG
    • GIF
    • BMP

    URL

    https://js.syncfusion.com/ejservices/api/PivotChart/Olap/ImageExport

    Parameter

    Type URL MultipleExport
    Image https://js.syncfusion.com/ejservices/api/PivotChart/Olap/ImageExport False

    Request

    To export pivot chart in the PNG format, the service URL, file name and “ej.PivotChart.ExportOptions.PNG” enumeration value are set as parameters. This is similar to other image formats.

    JS
  • HTML
    • <html>
//...
<body>

     <div id="PivotChart1" style="min-height: 275px; min-width: 525px; height: 460px; width: 950px"></div>
     <button id="btnExport">Export</button>
     <script type="text/javascript">
        $(function() {
            $("#PivotChart1").ejPivotChart({
                dataSource: {
                   data: pivot_dataset,
                   rows: [{
                      fieldName: "Country",
                      fieldCaption: "Country"
                   }],
                  columns: [{
                      fieldName: "Product",
                      fieldCaption: "Product"
                  }],
                  values: [{
                      fieldName: "Amount",
                      fieldCaption: "Amount"
                  }]
               }
           });
           $("#btnExport").ejButton({
              click: "exportBtnClick"
           });
       });
       function exportBtnClick(args)
       {
          var pChartObj = $('#PivotChart1').data("ejPivotChart");
          pChartObj.exportPivotChart("https://js.syncfusion.com/ejservices/api/PivotChart/Olap/ImageExport","fileName", ej.PivotChart.ExportOptions.PNG); //PNG Export
          pChartObj.exportPivotChart("https://js.syncfusion.com/ejservices/api/PivotChart/Olap/ImageExport","fileName", ej.PivotChart.ExportOptions.EMF); //EMF Export
          pChartObj.exportPivotChart("https://js.syncfusion.com/ejservices/api/PivotChart/Olap/ImageExport","fileName", ej.PivotChart.ExportOptions.JPG); //JPG Export
          pChartObj.exportPivotChart("https://js.syncfusion.com/ejservices/api/PivotChart/Olap/ImageExport","fileName", ej.PivotChart.ExportOptions.GIF); //GIF Export
          pChartObj.exportPivotChart("https://js.syncfusion.com/ejservices/api/PivotChart/Olap/ImageExport","fileName", ej.PivotChart.ExportOptions.BMP); //BMP Export
       }

     </script>
</body>
</html>
    C#
  • C#
    • [System.Web.Http.ActionName("ImageExport")]
[System.Web.Http.HttpPost]
public void ImageExport()
{
    PivotChartImageExport pivotChartImageExport = new PivotChartImageExport();
    string args = HttpContext.Current.Request.Form.GetValues(0)[0];
    Dictionary<string, string> chartParams = serializer.Deserialize<Dictionary<string, string>>(args);
    pivotChartImageExport.ExportToImage(chartParams);
}

    Response

    Code: 200
    Content-Type: application/octet-stream
    Response for PNG export:

    The browser will prompt a dialog box to save the PNG image.