1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Want to bind Pivot chart with Pivot grid Data

Want to bind Pivot chart with Pivot grid Data

Dear sir

I want to implement Pivot Grid with JavsScript(Essential JS 1) . It is working fine , but I want to use Pivot charts with the same data.
I want to fetch the data prepared by user in pivot grid and then want to bind the data with Pivot chart.
I have raw datatable which is provided to Pivot Grid but not able to fetch values, rows, columns  from pivot grid modified by user.

I have checked pivot client control ,it is providing pivot grid and charts also, but I don't want that layout.
So I want to use Pivot Grid and Pivot charts separately.

Waiting for your response.

Thanks & Regards
Manu Vashishtha




 

13 Replies
SN Sivamathi Natarajan Syncfusion Team February 14, 2020 08:49 AM UTC

Hi Manu, 
 
Thanks for contacting Syncfusion support. 
 
Please find the response below. 
 
Query 
Response 
I want to fetch the data prepared by user in pivot grid and then want to bind the data with Pivot chart. 
You can load the pivot chart control with pivot grid data using following code example. 
 
Code Example: 
 
$(function () { 
            $("#PivotGrid1").ejPivotGrid({ 
                dataSource: { 
                    data: pivotData, 
                    rows: [ 
                        { 
                            fieldName: "Country", 
                            fieldCaption: "Country" 
                        }, 
                        { 
                            fieldName: "State", 
                            fieldCaption: "State" 
                        } 
                    ], 
                    columns: [ 
                        { 
                            fieldName: "Product", 
                            fieldCaption: "Product" 
                        }, 
                        { 
                            fieldName: "Date", 
                            fieldCaption: "Date" 
                        } 
                    ], 
                    values: [ 
                        { 
                            fieldName: "Amount", 
                            fieldCaption: "Amount" 
                        }, 
                        { 
                            fieldName: "Quantity", 
                            fieldCaption: "Quantity" 
                        } 
                    ] 
                }, 
                enableGroupingBar: true, 
                renderSuccess: function (args) { 
                    chartObj1 = $("#PivotChart1").data("ejPivotChart"); 
                    if (chartObj1) { 
                        chartObj1.model.dataSource = $("#PivotGrid1").data("ejPivotGrid").model.dataSource; 
                        chartObj1.refreshControl(); 
                    } 
                } 
            }); 
 
            $("#PivotChart1").ejPivotChart({ 
                load: function (args) { 
                    chartObj2 = $("#PivotChart1").data("ejPivotChart"); 
                    if (chartObj2) { 
                        chartObj2.model.dataSource = $("#PivotGrid1").data("ejPivotGrid").model.dataSource; 
                    } 
                } 
            }); 
        }); 
 
 
I have raw datatable which is provided to Pivot Grid but not able to fetch values, rows, columns  from pivot grid modified by user. 
You can fetch the axis details modified by the user in pivot grid using following code example. 
 
Code Example: 
 
renderSuccess: function (args) { 
                    gridObj = $("#PivotGrid1").data("ejPivotGrid"); 
                    if (gridObj) { 
                        // here you can fetch the data modified by the user. 
                        fetchData = gridObj.model.dataSource; 
                    } 
                    chartObj1 = $("#PivotChart1").data("ejPivotChart"); 
                    if (chartObj1) { 
                        chartObj1.model.dataSource = gridObj.model.dataSource; 
                        chartObj1.refreshControl(); 
                    } 
                } 
 
 
 
Meanwhile, we have prepared a sample for your reference. Kindly check the below sample link for your reference. 
 
 
 
Please check the below screenshot. We have rendered pivot grid & chart separately and chart control will be update based on grid changes. 
 
 
 
We hope that the above sample meets your requirement if not kindly share us more details along with screen-shots/video if possible. 
 
Regards, 
Sivamathi. 


MA Manu February 15, 2020 10:19 AM UTC

Thank you so much for response.
This is working for me. 
One more thing I want to ask, As I am saving & loading the report from DB , Everything is working good but, 
I want to refresh the Field List Panel also when  report is loaded. 
i.e. I want to refresh ejPivotSchemaDesigner , according to new loaded report from database.
 I am using 
           1.  var schemaObj = $("#PivotSchemaDesigner2").data("ejPivotSchemaDesigner");
                schemaObj.refreshControl();

          2.  pGridObj = $('#' + _ejPivotReport).data("ejPivotGrid");
              $("#PivotSchemaDesigner2").ejPivotSchemaDesigner({ pivotControl: pGridObj });

but not working.

Please help asap.

Thanks & regards 
Manu Vashishtha

MM Manikandan Murugesan Syncfusion Team February 17, 2020 08:57 AM UTC

Hi Manu, 

We have prepared sample for save and load reports from database using pivot grid and pivot schema designer. 


If this doesn’t resolve your problem, then kindly reproduce the problem in the provided sample and revert us (or) send your sample that replicating the problem. This would be a very helpful for us to investigate the reported problem at our end and provide the solution at earliest. 
 
Thanks, 
Manikandan. 


MA Manu February 19, 2020 07:42 AM UTC

Hello sir

This example is working fine but I am using 
*  version : 15.1.0.33
*  Copyright Syncfusion Inc. 2001 - 2017. All rights reserved.

and this example is not working when I am adding my js and css files .
So , Is there any way to refresh the Pivot Designer when existing report is loaded.


Regards
Manu Vashishtha


SN Sivamathi Natarajan Syncfusion Team February 20, 2020 05:52 AM UTC

Hi Manu, 
 
Thanks for the reply. We have checked the reported problem at our end in (v15.1.0.33). But we are unable to reproduce the issue. Meanwhile, we have prepared a sample in the mentioned version. Kindly check the below sample link for your reference. 
 
 
Please check your application with below 15.1.0.33 CDN links. 
 
<script src="//cdn.syncfusion.com/15.1.0.33/js/web/ej.web.all.min.js"> </script> 
<link rel="stylesheet" rel='nofollow' href="//cdn.syncfusion.com/15.1.0.33/js/web/flat-azure/ej.web.all.min.css" /> 
 
If still the problem exists, kindly reproduce the problem in the provided sample and revert us (or) send your sample that replicating the problem. 
 
Regards, 
Sivamathi. 


MA Manu February 20, 2020 07:21 AM UTC

Hi

The sample provided by you is also not updating field designer, when clicking on Load button after selecting any report.

But ,now  I have refreshed pivot schema designer after loading any report and it is working fine now. 
but I have to put this code with setTimeout function, which is not seeming good.

                 var schemaObj = $("#PivotSchemaDesigner").data("ejPivotSchemaDesigner");
                schemaObj.refreshControl();

I have written this code at the end of load function. You can  check this link

Regards
Manu Vashishtha


SN Sivamathi Natarajan Syncfusion Team February 20, 2020 12:10 PM UTC

Hi Manu, 
 
Sorry for the inconvenience caused. 
 
You can refresh the pivot field list in renderSuccess event. Kindly check the below sample link. 
 
Code Example: 
$("#PivotGrid").ejPivotGrid({ 
                dataSource: { 
                    data: pivot_dataset, 
                    rows: [{ fieldName: "Country", fieldCaption: "Country" }, { fieldName: "State", fieldCaption: "State" }], 
                    columns: [{ fieldName: "Product", fieldCaption: "Product" }], 
                    values: [{ fieldName: "Amount", fieldCaption: "Amount" }, { fieldName: "Quantity", fieldCaption: "Quantity" }], 
                    filters: [{ fieldName: "Date", fieldCaption: "Date" }] 
                }, 
                pivotTableFieldListID: "PivotSchemaDesigner", 
              renderSuccess: "renderSuccess", 
            }); 
 
function renderSuccess(args) { 
                 var schemaObj = $("#PivotSchemaDesigner").data("ejPivotSchemaDesigner"); 
                 if (schemaObj) 
                  schemaObj.refreshControl();  
                } 
 
Kindly check the below sample link for your reference. 
 
 
Please let us know if you have concern. 
 
Regards, 
Sivamathi. 


MA Manu February 21, 2020 07:22 AM UTC

Hi

Now working fine.
Thank you so much.

SN Sivamathi Natarajan Syncfusion Team February 22, 2020 08:25 AM UTC

Hi Manu, 
 
Thanks for the response. Please get in touch with us if you would require any further assistance. 
Regards, 
Sivamathi. 
 


MA Manu February 26, 2020 07:17 AM UTC

Hi Sivamathi

I need one more help from you.
I am using ejSpreadsheet  in my project. I want only file menu in my spreadsheet ribbon. but by default all menu are visible.
I need only file menu in my ribbon header bar like this  File>Save As,Print i.e. Save and print option under File menu.


I am using 
          var excelObj = $("#" + _ejExcelReport).data("ejSpreadsheet");            
            excelObj.XLRibbon.showMenu();

but this is not working. 

Regards
Manu

AD Arunkumar Devendiran Syncfusion Team February 27, 2020 04:19 PM UTC

Hi Sivamathi, 
 
Thank you for contacting Syncfusion support. 
 
We have checked your reported query and we achieved that by using ribbnSettings property. We suggest you to use the removeMenuItem method to remove the file menu option. In this way you can achieved your requirement. Please refer the below code snippet and sample link. 
 
Code snippet 
<body> 
  <div id="Spreadsheet"></div> 
</body> 
<script> 
  $(function () { 
    $("#Spreadsheet").ejSpreadsheet({ 
      ribbonSettings: { 
        applicationTab: { 
          type: ej.Ribbon.ApplicationTabType.Menu, 
          menuSettings: { 
            isAppend: true 
          } 
        } 
      }, 
      exportSettings: 
            { 
                excelUrl: "http://js.syncfusion.com/demos/ejServices/api/Spreadsheet/ExcelExport", 
                csvUrl: "http://js.syncfusion.com/demos/ejServices/api/Spreadsheet/CsvExport", 
                pdfUrl: "http://js.syncfusion.com/demos/ejServices/api/Spreadsheet/PdfExport" 
            }, 
      loadComplete: "loadComplete", 
    }); 
  }); 
 
  function loadComplete(args) { 
    var xlObj = $("#Spreadsheet").data("ejSpreadsheet"); 
    xlObj.XLRibbon.removeMenuItem(1); 
    xlObj.XLRibbon.removeMenuItem(1); 
 
  } 
</script> 
 
 
 
Sample link: 
 
Could you please check the above sample and let us know whether this is fulfilling your requirement or get back to us if you need further assistance. 
 
Regards, 
Arunkumar D 


MA Manu February 28, 2020 07:26 AM UTC

Hi

Thank you for your response.
But this is not my requirement. I am attaching a file. I only need File menu (marked with yellow color) . And want to remove others like [Insert, Data, Page Layout, Review and Others](marked with red color). Because my sheet is readonly, I only want export like functionalities.

Please check.

Regards
Manu

Attachment: DemoNew_fa784576.zip

AD Arunkumar Devendiran Syncfusion Team March 2, 2020 06:58 AM UTC

Hi Manu, 
 
Sorry for the inconvenience caused. 
 
We would like to inform you that we have created the sample for your reported query. In that we have achieved your requirement by using removeTab method. In this way you can remove the tabs in ribbon based on your requirement. Please refer the below sample link. 
 
Code snippet 
 
<body> 
  <div id="Spreadsheet"></div> 
</body> 
<script> 
 
  $(function () { 
    $("#Spreadsheet").ejSpreadsheet({ 
      ribbonSettings: { 
        applicationTab: { 
          type: ej.Ribbon.ApplicationTabType.Menu, 
          menuSettings: { 
            isAppend: true 
          } 
        } 
      } 
      loadComplete: "loadComplete", 
    }); 
  }); 
 
  function loadComplete(args) { 
    var xlObj = $("#Spreadsheet").data("ejSpreadsheet"); 
    xlObj.XLRibbon.removeMenuItem(1); 
    xlObj.XLRibbon.removeMenuItem(1); 
    var totalTabs = 6; 
    for (var i = 0; i < totalTabs; i++) { 
      xlObj.XLRibbon.removeTab(1, true); 
    } 
    $("#Spreadsheet" + "_Ribbon").data("ejRibbon").collapse(); 
  } 
</script> 
 
 
Sample link: 
 
Please refer the below documentation link for more information about remove tabs from ribbon. 
 
Could you please check the above sample and let us know whether this is fulfilling your requirement or get back to us if you need further assistance. 
 
Regards, 
Arunkumar D 


Loader.
Up arrow icon