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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

PivotView chart With DashboardLayout problem

Thread ID:

Created:

Updated:

Platform:

Replies:

144352 May 2,2019 08:43 AM UTC Aug 23,2019 12:10 PM UTC JavaScript - EJ 2 34
loading
Tags: PivotView
Foulont Gaetan
Asked On May 2, 2019 08:43 AM UTC

Hello, 
I have currently a problem to integrate PivotView With DashboardLayout.
I would like to show Pivot Grid inside a Panel of DashBoard but when I Try to set ShowFieldList property to true the dialog appear  but not like a real pop up. 
I would like to show this pop up over any panel inside the dashboard.

Could you please give me some sample to achieve this ?

See my ScreenShot : 


Sabaridass Ramamoorthy [Syncfusion]
Replied On May 3, 2019 12:37 PM UTC

Hi Foulont, 

You can change the field list position by using dataBound event. Please refer following code snippet. 
Code Snippet: 
var pivotGridObj = new ej.pivotview.PivotView({ 
        dataBound: function (args) { 
          this.pivotFieldListModule.dialogRenderer.fieldListDialog.target = document.body; 
          this.pivotFieldListModule.dialogRenderer.fieldListDialog.targetEle = document.body; 
          document.body.appendChild(this.pivotFieldListModule.dialogRenderer.fieldListDialog.element); 
        }, 
        showFieldList: true, 
        width: '100%', 
        height: 300, 
        gridSettings: { columnWidth: 140 } 
    }); 
    pivotGridObj.appendTo('#PivotView'); 
 
 

Please let us know if you need further assistance on this. 

Regards, 
Sabaridass R 


Foulont Gaetan
Replied On May 3, 2019 01:11 PM UTC

Hello, 

Great it works like a charm !

Coul you please say me how to resize the chart inside the panel when the panel is resizable ?


Here a example : I would like the chart to resize to fit his content (panel).



Thx
 

Manikandan Murugesan [Syncfusion]
Replied On May 3, 2019 02:39 PM UTC

Hi Foulont ,

 

You can refresh chart in resizeStop event. Please refer following code snippet.

 

Code Snippet: 

 

var dashboard = new ej.layouts.DashboardLayout({ 

        cellSpacing: [1010], 

        columns: 5, 

        allowResizing: true, 

        resizeStop: function(args) { 

          args.element.querySelector('.e-pivotview').ej2_instances[0].chart.refresh(); 

        } 

    }); 

 

Sample: https://stackblitz.com/edit/fenywc?file=index.js

 

Please let us know if you need further assistance on this.

 

Regards,

Manikandan.


Foulont Gaetan
Replied On May 6, 2019 09:04 AM UTC

Hello,

Cool it works thanks. 

I'm facing with another problem with PivotView. When I set the datasource properties with columns , values , rows to empty array, and we show FieldList when I try to drag and drop fieldList to columns its breaks with this error :

treemap.ts:2 Uncaught TypeError: Cannot read property 'style' of undefined
    at t.e.animateRect (treemap.ts:2)
    at t.e.animate (treemap.ts:2)
    at t.doAnimation (treemap.ts:2)
    at t.performAnimation (treemap.ts:2)
    at t.renderSeries (treemap.ts:2)
    at t.renderSeries (treemap.ts:2)
    at t.renderSeriesElements (treemap.ts:2)
    at t.renderElements (treemap.ts:2)
    at t.refreshBound (treemap.ts:2)
    at t.processData (treemap.ts:2)

Here a sample with the error : https://stackblitz.com/edit/fenywc-d3zcdq


Second question I would like to showFieldList inside another element : it works when I add this code :

But when I resize the panel and I re click to show the field List I can't close with close Button.
The field list appear behind the panel.
                        dataBound: function () {
                            this.pivotFieldListModule.dialogRenderer.fieldListDialog.allowDragging = false;
                            this.pivotFieldListModule.dialogRenderer.fieldListDialog.target = document.getElementById('main');
                            this.pivotFieldListModule.dialogRenderer.fieldListDialog.targetEle = document.getElementById('main');
                            document.getElementById('main').appendChild(this.pivotFieldListModule.dialogRenderer.fieldListDialog.element);
                        },



Foulont Gaetan
Replied On May 7, 2019 11:48 AM UTC

Hi Foulont ,

 

You can refresh chart in resizeStop event. Please refer following code snippet.

 

Code Snippet: 

 

var dashboard = new ej.layouts.DashboardLayout({ 

        cellSpacing: [1010], 

        columns: 5, 

        allowResizing: true, 

        resizeStop: function(args) { 

          args.element.querySelector('.e-pivotview').ej2_instances[0].chart.refresh(); 

        } 

    }); 

 

Sample: https://stackblitz.com/edit/fenywc?file=index.js

 

Please let us know if you need further assistance on this.

 

Regards,

Manikandan.


Hello,
any news from my question inside previous post ?

Manikandan Murugesan [Syncfusion]
Replied On May 7, 2019 02:01 PM UTC

Hi Foulont , 
 
Thanks for the reply. 
 
 
Query 
Comments 
1. 
I'm facing with another problem with PivotView. When I set the datasource properties with columns , values , rows to empty array, and we show FieldList when I try to drag and drop fieldList to columns its breaks with this error : 
 
treemap.ts:2 Uncaught TypeError: Cannot read property 'style' of undefined 
    at t.e.animateRect (treemap.ts:2) 
    at t.e.animate (treemap.ts:2) 
    at t.doAnimation (treemap.ts:2) 
    at t.performAnimation (treemap.ts:2) 
    at t.renderSeries (treemap.ts:2) 
    at t.renderSeries (treemap.ts:2) 
    at t.renderSeriesElements (treemap.ts:2) 
    at t.renderElements (treemap.ts:2) 
    at t.refreshBound (treemap.ts:2) 
    at t.processData (treemap.ts:2) 
 
Here a sample with the error : https://stackblitz.com/edit/fenywc-d3zcdq 
Currently, we are checking this problem at our end. We will update further details by tomorrow (May 8). 
2. 
Second question I would like to showFieldList inside another element : it works when I add this code : 
 
But when I resize the panel and I re click to show the field List I can't close with close Button. 
The field list appear behind the panel. 
You can fix this by using below CSS. 
 
CSS: 
.e-pivotfieldlist-wrapper { 
   z-index: 2000 !important; 
} 
 
 
 
 
 
Please let us know, if you have any concern. 
 
Regards, 
Manikandan. 


Foulont Gaetan
Replied On May 7, 2019 03:27 PM UTC

Hi Foulont , 
 
Thanks for the reply. 
 
 
Query 
Comments 
1. 
I'm facing with another problem with PivotView. When I set the datasource properties with columns , values , rows to empty array, and we show FieldList when I try to drag and drop fieldList to columns its breaks with this error : 
 
treemap.ts:2 Uncaught TypeError: Cannot read property 'style' of undefined 
    at t.e.animateRect (treemap.ts:2) 
    at t.e.animate (treemap.ts:2) 
    at t.doAnimation (treemap.ts:2) 
    at t.performAnimation (treemap.ts:2) 
    at t.renderSeries (treemap.ts:2) 
    at t.renderSeries (treemap.ts:2) 
    at t.renderSeriesElements (treemap.ts:2) 
    at t.renderElements (treemap.ts:2) 
    at t.refreshBound (treemap.ts:2) 
    at t.processData (treemap.ts:2) 
 
Here a sample with the error : https://stackblitz.com/edit/fenywc-d3zcdq 
Currently, we are checking this problem at our end. We will update further details by tomorrow (May 8). 
2. 
Second question I would like to showFieldList inside another element : it works when I add this code : 
 
But when I resize the panel and I re click to show the field List I can't close with close Button. 
The field list appear behind the panel. 
You can fix this by using below CSS. 
 
CSS: 
.e-pivotfieldlist-wrapper { 
   z-index: 2000 !important; 
} 
 
 
 
 
 
Please let us know, if you have any concern. 
 
Regards, 
Manikandan. 


thx for your reply.

When I try to add : 
.e-pivotfieldlist-wrapper { 
   z-index2000 !important; 
} 

It works when I'm not resizing the panel all functionnalities works. 
But after I resize the panel the field list appears front of the panel but I can't click on 'close', 'open', or defer layout...
But I can drag and drop field.





Manikandan Murugesan [Syncfusion]
Replied On May 8, 2019 02:51 PM UTC

Hi Foulont, 
 
Thanks for the reply. 
 
 
Query 
Comments 
1. 
I'm facing with another problem with PivotView. When I set the datasource properties with columns , values , rows to empty array, and we show FieldList when I try to drag and drop fieldList to columns its breaks with this error : 
 
treemap.ts:2 Uncaught TypeError: Cannot read property 'style' of undefined 
    at t.e.animateRect (treemap.ts:2) 
    at t.e.animate (treemap.ts:2) 
    at t.doAnimation (treemap.ts:2) 
    at t.performAnimation (treemap.ts:2) 
    at t.renderSeries (treemap.ts:2) 
    at t.renderSeries (treemap.ts:2) 
    at t.renderSeriesElements (treemap.ts:2) 
    at t.renderElements (treemap.ts:2) 
    at t.refreshBound (treemap.ts:2) 
    at t.processData (treemap.ts:2) 
 
Here a sample with the error : https://stackblitz.com/edit/fenywc-d3zcdq 
We confirmed that ‘Script error thrown while adding fields to pivot chart when rendering with toolbar and empty rows, columns and values’ is a defect and logged a defect report. The fix for the issue will included in our upcoming 2019 Volume 2 release which is estimated at June 2019. You can track the same by using the following link. 
 
 
 
2. 
When I try to add :  
.e-pivotfieldlist-wrapper {  
   z-index2000 !important;  
}  
 
It works when I'm not resizing the panel all functionnalities works.  
But after I resize the panel the field list appears front of the panel but I can't click on 'close', 'open', or defer layout... 
But I can drag and drop field. 
 
We are unable to reproduce the problem at our end. 
 
 
 
Could you please reproduce the problem in the provided sample (or) send your sample that replicating the problem with replication steps? This would be a very helpful for us to analyze the problem at our end and provide you the solution at earliest. 
 
 
Please let us know if any concerns. 
 
Regards, 
Manikandan. 


Foulont Gaetan
Replied On May 9, 2019 03:07 PM UTC

Hello, 

Thanks for your answer. 

I can't provide any sample with my problem inside stackblitz. 
I have updated with latest version syncfusion js framework 17.1.44 and it works better.

I can click on close inside the field list dialog. But when I change page with my angularjs apps I use $state.go ... When I re use $state.go to open my previous page which is contains the my dashboard whith pivots it doesnt work fine with field list dialog. ( Same if I use $state.reload(); inside the current page which is contains the dashboard)
I can open field list dialog but the data are not inside rows, values, filters or columns, it can see just the checkboxes checked.

If I reload the page with F5 it works again.



EDIT : Well I can reproduce the error inside the stackblitz when I launch init function twice. Sample



Another question Can I serialize the PivotView to retrieve in Json format ?


Sabaridass Ramamoorthy [Syncfusion]
Replied On May 10, 2019 08:41 AM UTC

Hi Foulont, 
 
Thanks for the sample. 

 
Query 
Comments 
1. 
I can't provide any sample with my problem inside stackblitz.  
I have updated with latest version syncfusion js framework 17.1.44 and it works better. 
 
I can click on close inside the field list dialog. But when I change page with my angularjs apps I use $state.go ... When I re use $state.go to open my previous page which is contains the my dashboard whith pivots it doesnt work fine with field list dialog. ( Same if I use $state.reload(); inside the current page which is contains the dashboard) 
I can open field list dialog but the data are not inside rows, values, filters or columns, it can see just the checkboxes checked. 
 
If I reload the page with F5 it works again. 
 
 
 
EDIT : Well I can reproduce the error inside the stackblitz when I launch init function twice. Sample 

You need to destroy the component before rendering it with same id. Please refer the below code snippet. 

Code Snippet: 
if (document.getElementById('PivotView').ej2_instances) { 
    document.getElementById('PivotView').ej2_instances[0].destroy(); 
} 


2. 
Another question Can I serialize the PivotView to retrieve in Json format ? 
You can get the report at any time by using getPersistData method. Please refer the below code snippet. 

Code Snippet: 
    var report = pivotGridObj.getPersistData(); 




Please let us know if you need further assistance on this. 

Regards, 
Sabaridass R 


Foulont Gaetan
Replied On May 10, 2019 10:40 AM UTC

Thx for your update,


I would like to save the pivotView each time the user change the field list value, How can I do that whitout click on any button. 

EDIt : By the way this code provide by you  to update the field list doenst work with calculated field :/

                enginePopulating: function (args) {
                    var report = {};
                    report[0] = args.dataSource.rows;
                    report[1] = args.dataSource.columns;
                    report[2] = args.dataSource.values;
                    report[3] = args.dataSource.filters;
                    var pos = 0;
                    while (pos < 4) {
                        if (report[pos]) {
                            for (var cnt = 0; cnt < report[pos].length; cnt++) {
                                if (Object.keys(args.dataSource.data[0]).indexOf(report[pos][cnt].name) == -1) {
                                    report[pos].splice(cnt, 1);
                                    cnt--;
                                }
                            }
                        }
                        pos++;
                    }
                },

Manikandan Murugesan [Syncfusion]
Replied On May 10, 2019 11:47 AM UTC

Hi Foulont, 


 
Query 
Comments 
1. 
I would like to save the pivotView each time the user change the field list value, How can I do that whitout click on any button.  
You can achieve your requirement by using dataBound event. Please refer the following code snippet. 

Code Snippet: 
var pivotGridObj = new ej.pivotview.PivotView({ 
    dataBound: function (args) { 
      //You can get the report and save into the database here. 
      var report = pivotGridObj.getPersistData(); 
      console.log(report); 
      localStorage.pivotReport = report; 
    } 
}); 
pivotGridObj.appendTo('#PivotView'); 



2. 
By the way this code provide by you  to update the field list doenst work with calculated field :/ 
You can fix this by using following code snippet. 

Code Snippet: 
var pivotGridObj = new ej.pivotview.PivotView({ 
    enginePopulating: function(args) { 
      var report = {}; 
      report[0] = args.dataSource.rows; 
      report[1] = args.dataSource.columns; 
      report[2] = args.dataSource.values; 
      report[3] = args.dataSource.filters; 
     var pos = 0; 
      while (pos < 4) { 
        if (report[pos]) { 
          for (var cnt = 0; cnt < report[pos].length; cnt++) { 
            if (Object.keys(args.dataSource.data[0]).indexOf(report[pos][cnt].name) == -1 && report[pos][cnt].type !== 'CalculatedField') { 
              report[pos].splice(cnt, 1); 
              cnt--; 
            } 
          } 
        } 
        pos++; 
      } 
    } 
}); 
pivotGridObj.appendTo('#PivotView'); 




Please let us know if you need further assistance on this. 

Regards, 
Manikandan. 


Foulont Gaetan
Replied On May 10, 2019 02:08 PM UTC

Hi Foulont, 
 
Thanks for the sample. 

 
Query 
Comments 
1. 
I can't provide any sample with my problem inside stackblitz.  
I have updated with latest version syncfusion js framework 17.1.44 and it works better. 
 
I can click on close inside the field list dialog. But when I change page with my angularjs apps I use $state.go ... When I re use $state.go to open my previous page which is contains the my dashboard whith pivots it doesnt work fine with field list dialog. ( Same if I use $state.reload(); inside the current page which is contains the dashboard) 
I can open field list dialog but the data are not inside rows, values, filters or columns, it can see just the checkboxes checked. 
 
If I reload the page with F5 it works again. 
 
 
 
EDIT : Well I can reproduce the error inside the stackblitz when I launch init function twice. Sample 

You need to destroy the component before rendering it with same id. Please refer the below code snippet. 

Code Snippet: 
if (document.getElementById('PivotView').ej2_instances) { 
    document.getElementById('PivotView').ej2_instances[0].destroy(); 
} 


2. 
Another question Can I serialize the PivotView to retrieve in Json format ? 
You can get the report at any time by using getPersistData method. Please refer the below code snippet. 

Code Snippet: 
    var report = pivotGridObj.getPersistData(); 




Please let us know if you need further assistance on this. 

Regards, 
Sabaridass R 


Hello, 

Thanks for your response. 

Even If I Add

if (document.getElementById('PivotView').ej2_instances) { 
    document.getElementById('PivotView').ej2_instances[0].destroy(); 
} 

It doesnt work. It didn't enter inside the if statement because the pivot view is not yet initialized. 

(The stackblitz is not relevant sorry :/)


When I recall my init function which is rebuild the dashboard and panels from my database, the dashboard is showing but the field list is checked but the values , filters etc are not filled.

If I refresh the page with F5 same init function is called and it works, I'm completly lost... 

I  have this king of erreur when the field list are not filled: 


treemap.ts:2 Uncaught TypeError: Cannot read property 'removeChild' of null
    at detach (treemap.ts:2)
    at t.removeAll (treemap.ts:2)
    at t.onPropertyChanged (treemap.ts:2)
    at t.e.dataBind (treemap.ts:2)
    at t.dataBind (treemap.ts:2)
    at r (treemap.ts:2)
detach @ treemap.ts:2
t.removeAll @ treemap.ts:2
t.onPropertyChanged @ treemap.ts:2
e.dataBind @ treemap.ts:2
t.dataBind @ treemap.ts:2
r @ treemap.ts:2
postMessage (async)
setImmediate @ treemap.ts:2
e.saveChanges @ treemap.ts:2
(anonymous) @ treemap.ts:2
(anonymous) @ homepage.controller.js?{{HASH}}:74
(anonymous) @ angular.js:20440
e @ angular.js:6362
(anonymous) @ angular.js:6642
setTimeout (async)
h.defer @ angular.js:6640
f @ angular.js:20438
(anonymous) @ homepage.controller.js?{{HASH}}:73
(anonymous) @ angular.js:17051
$digest @ angular.js:18233
$apply @ angular.js:18531
l @ angular.js:12547
s @ angular.js:12785
y.onload @ angular.js:12702
load (async)
(anonymous) @ angular.js:12685
q @ angular.js:12492
(anonymous) @ angular.js:12244
(anonymous) @ angular.js:17051
$digest @ angular.js:18233
$apply @ angular.js:18531
l @ angular.js:12547
s @ angular.js:12785
y.onload @ angular.js:12702
load (async)
(anonymous) @ angular.js:12685
q @ angular.js:12492
(anonymous) @ angular.js:12244
(anonymous) @ angular.js:17051
$digest @ angular.js:18233
(anonymous) @ angular.js:18462
e @ angular.js:6362
(anonymous) @ angular.js:6642
36treemap.ts:2 Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null
    at e.getMouseXY (treemap.ts:2)
    at e.scrollMouseMove (treemap.ts:2)












Foulont Gaetan
Replied On May 13, 2019 08:04 AM UTC

Hello,

Finally I can reproduce the exact problem am facing  :


You can click on refresh button , then click on field list , you can see no one filters, columns, values or rows are populated. 

Sabaridass Ramamoorthy [Syncfusion]
Replied On May 13, 2019 11:30 AM UTC

Hi Foulont, 

Thanks for the reply. 

You can fix this by using below code snippet. 
Code Snippet: 
if (document.getElementById('PivotView_PivotFieldList_Wrapper')) { // Here PivotView denotes component element ID 
    document.getElementById('PivotView_PivotFieldList_Wrapper').remove(); 
} 
 


Please let us know if you need further assistance on this. 

Regards, 
Sabaridass R 


Foulont Gaetan
Replied On May 14, 2019 08:11 AM UTC

Hi Foulont, 


 
Query 
Comments 
1. 
I would like to save the pivotView each time the user change the field list value, How can I do that whitout click on any button.  
You can achieve your requirement by using dataBound event. Please refer the following code snippet. 

Code Snippet: 
var pivotGridObj = new ej.pivotview.PivotView({ 
    dataBound: function (args) { 
      //You can get the report and save into the database here. 
      var report = pivotGridObj.getPersistData(); 
      console.log(report); 
      localStorage.pivotReport = report; 
    } 
}); 
pivotGridObj.appendTo('#PivotView'); 



2. 


Please let us know if you need further assistance on this. 

Regards, 
Manikandan. 


Hello,

Thanks for your previous response It works ;).

In another question you say I can save my report in demand by choose databound event. It works but this event is triggered too many times. Is it possible to save the report only if the field list is changed

Thx

Jagadeesan Pichaimuthu [Syncfusion]
Replied On May 14, 2019 09:22 AM UTC

Hi Foulont, 
  
You can achieve this by using below code snippet. 
 
Code Snippet: 
var flag = false; 
var pivotGridObj = new ej.pivotview.PivotView({ 
    dataBound: function (args) { 
      this.grid.actionComplete = function (args) { 
        flag = true; 
      }; 
      if (flag && !this.isEmptyGrid) { 
        //You can get the report and save into the database here. 
        var report = pivotGridObj.getPersistData(); 
        console.log(report); 
        localStorage.pivotReport = report; 
        flag = false; 
      } 
    } 
}); 
pivotGridObj.appendTo('#PivotView'); 
  
  
  
Please let us know if you need further assistance on this. 
  
Regards, 
Jagadeesan 


Foulont Gaetan
Replied On May 14, 2019 09:56 AM UTC


Hello,

thanks for your response but it didn't work because I use : ...So I don't have grid object

                displayOption: {
                    view: 'Chart'
                },



Jagadeesan Pichaimuthu [Syncfusion]
Replied On May 14, 2019 10:38 AM UTC

Hi Foulont, 
  
You can update chart report by using ‘loaded’ event. Please refer following code snippet. 
 
Code Snippet: 
var pivotGridObj = new ej.pivotview.PivotView({ 
    chartSettings: { 
      chartSeries: { type: "Column" }, 
      loaded: function (args) { 
        //You can get the report and save into the database here. 
        var report = pivotGridObj.getPersistData(); 
        localStorage.pivotReport = report; 
      } 
    } 
}); 
pivotGridObj.appendTo('#PivotView'); 
  
  
  
Please let us know if you need further assistance on this. 
  
Regards, 
Jagadeesan

Foulont Gaetan
Replied On May 14, 2019 11:56 AM UTC

Hi Foulont, 
  
You can update chart report by using ‘loaded’ event. Please refer following code snippet. 
 
Code Snippet: 
var pivotGridObj = new ej.pivotview.PivotView({ 
    chartSettings: { 
      chartSeries: { type: "Column" }, 
      loaded: function (args) { 
        //You can get the report and save into the database here. 
        var report = pivotGridObj.getPersistData(); 
        localStorage.pivotReport = report; 
      } 
    } 
}); 
pivotGridObj.appendTo('#PivotView'); 
  
  
  
Please let us know if you need further assistance on this. 
  
Regards, 
Jagadeesan

Hello, 

Well ok It's the same behavior with databound event inside pivotgrid.
When the chart contains a scrollbar, when I moove the scrollbar the loaded or databound event is called and the report is saved.. I don't want to save the report each time the scrollbar is changed. 
When the chart is initially load the chart is again save with databound or loaded event, this is not wanted.

I just want to save the report each time the field list is changed ( there is a event for this ?)

Thx

Foulont Gaetan
Replied On May 15, 2019 10:27 AM UTC

Another question is it possible (if yes how ?) to add chart list like the toolbar near the field list icon ? 

like this : 

Manikandan Murugesan [Syncfusion]
Replied On May 15, 2019 01:23 PM UTC

Hi Foulont, 
 
 
 
Query 
Comments 
1. 
Well ok It's the same behavior with databound event inside pivotgrid. 
When the chart contains a scrollbar, when I moove the scrollbar the loaded or databound event is called and the report is saved.. I don't want to save the report each time the scrollbar is changed.  
When the chart is initially load the chart is again save with databound or loaded event, this is not wanted. 
 
I just want to save the report each time the field list is changed ( there is a event for this ?) 
 
Currently we are analyzing your requirement. We will update further details by tomorrow (16th May, 2019). 
 
Until then we appreciate your patience. 
 
 
 
2. 
Another question is it possible (if yes how ?) to add chart list like the toolbar near the field list icon ?  
You can customize chart icon in dataBound event. Please refer the following code snippet. 
 
Code Snippet: 
var pivotGridObj = new ej.pivotview.PivotView({ 
    dataBound: function (args) { 
      //You can customize PivotGrid here 
      if (!document.getElementById("ChartIcon")) { 
        var pivotGridObj = document.getElementById("PivotView").ej2_instances[0]; 
        var parent = document.createElement('div'); 
        parent.setAttribute("id", "ChartIcon"); 
        if (pivotGridObj.showFieldList) { 
          document.getElementById("PivotView").insertBefore(parent, document.getElementById("PivotView").childNodes[1]); 
        } else { 
          document.getElementById("PivotView").insertBefore(parent, document.getElementById("PivotView").childNodes[0]); 
        } 
        var menuChartTypes = [ 
          { 
            iconCss: 'pivot-chart-types e-icons', 
            items: [ 
              {text: 'column',id: 'Column'}, 
              {text: 'bar',id: 'Bar'}, 
              {text: 'line',id: 'Line'}, 
              {text: 'area',id: 'Area'}, 
              {text: 'scatter',id: 'Scatter'}, 
              {text: 'polar',id: 'Polar'} 
            ] 
          } 
        ]; 
        new ej.navigations.Menu({ 
          items: menuChartTypes, select: chartClick 
        }, '#ChartIcon'); 
      } 
    } 
  }); 
  pivotGridObj.appendTo('#PivotView'); 
  function chartClick(args) { 
    if (args.item && args.item.text) { 
      pivotGridObj.chartSettings.chartSeries.type = args.item.id; 
    } 
  } 
 
 
 
Please let us know if you need further assistance on this. 
 
Regards, 
Manikandan. 


Jagadeesan Pichaimuthu [Syncfusion]
Replied On May 16, 2019 01:33 PM UTC

Hi Foulont, 
  
Currently we don’t have event support to identify field list update alone. And, we will consider this as an improvement and it will be available in our 2019 Volume 2 SP1 release. You can track the same by using following link. 
  
  
Please let us know if any concerns. 
  
Regards, 
Jagadeesan 


Foulont Gaetan
Replied On May 16, 2019 02:30 PM UTC

Hello, 

Thanks for your update, I'll wait.

When I try to add your code inside my dashboard which is contains multiple panel with multiple pivotgrid the menu chart list doesn't work.

Please see my sample: 


Thx

Jagadeesan Pichaimuthu [Syncfusion]
Replied On May 17, 2019 05:46 AM UTC

Hi Foulont, 
  
Thanks for your update. 
  
The reported problem occurred due to the usage of same id for both chart menu items. Please refer the following screenshot. 
  
  
Meanwhile, we have modified the sample. 
  
  
Please let us know if you need further assistance on this. 
  
Regards, 
Jagadeesan 


Foulont Gaetan
Replied On May 17, 2019 11:09 AM UTC

Hi Foulont, 
  
Thanks for your update. 
  
The reported problem occurred due to the usage of same id for both chart menu items. Please refer the following screenshot. 
  
  
Meanwhile, we have modified the sample. 
  
  
Please let us know if you need further assistance on this. 
  
Regards, 
Jagadeesan 


Hello, 

Thanks for your update, works now ;)

1. How can I set live pivot chart  with updated datasoure ? 
When I set datasource with new dataand refresh the chart, it doesnt show any news datas..

                        pivotGridObj.dataSource = data;
                        pivotGridObj.chart.refresh();


2. I'm facing with another problem (not that big) why when I try to select one element all element are "e-focused" inside the chart list menu ?

You can try inside your sample.

See my screenshot :


Dinesh Babu Yadav [Syncfusion]
Replied On May 20, 2019 10:57 AM UTC

Hi Foulont, 
 
Thanks for the update. 
 
 
Query 
Comments 
1. 
How can I set live pivot chart with updated datasoure? 
When I set datasource with new data and refresh the chart, it doesn’t show any news data. 
 
You need to update data in the ‘dataSource.data’ property. Please refer the following code snippet. 
 
Code Snippet: 
loadbutton.element.onclick = function () { 
  pivotGridObj.dataSource.data = data; 
}; 
 
 
2. 
I'm facing with another problem (not that big) why when I try to select one element all elements are "e-focused" inside the chart list menu? 
Currently we are validating this problem at our end. We will update further details on May 21, 2019. 
 
Please let us know if you need further assistance on this. 
 
Regards, 
Dinesh Babu Yadav. 
 


Foulont Gaetan
Replied On May 21, 2019 07:53 AM UTC

Hello,


Tanks for your first response ;).

Another question how to translate value from aggragation inside the pivot field list ? I set the locale in fr in my example and its works for all another field but not for aggregation.

All translation come from cldr




Thanks


Manikandan Murugesan [Syncfusion]
Replied On May 21, 2019 01:46 PM UTC

Hi Foulont, 
 
Thanks for the update. 
 
 
Query 
Comments 
1. 
I'm facing with another problem (not that big) why when I try to select one element all elements are "e-focused" inside the chart list menu?  
 
We have checked your reported issue “More than one menu bar items are focused while we hover the single menu bar item” and considered it as defect. This fix will be available with our upcoming EJ2 patch release. You can track the same by using below link. 
 
 
2. 
Another question how to translate value from aggregation inside the pivot field list? I set the locale in fr in my example and its works for all another field but not for aggregation. 
 
All translation come from cldr 
 
Currently, we are analyzing the problem at our end. And, we will update further details by tomorrow (May 22, 2019). 

Please let us know if any concerns. 

Regards, 
Manikandan. 


Manikandan Murugesan [Syncfusion]
Replied On May 22, 2019 01:13 PM UTC

Hi Foulont, 
 
Currently we don’t have localization support for aggregation types. And, we will consider this as an improvement and it will be available in our 2019 Volume 2 SP1 release. You can track the same by using following link. 
 
Please let us know if any concerns. 
 
Regards, 
Manikandan. 


Foulont Gaetan
Replied On May 23, 2019 07:09 AM UTC

Hello,

Again thanks for your quick support, really appreciate !

Another question (again :)) , how can I set enableAnimation to false on the pivotChart ? 
When I set setInterval to refresh the chart with new datas every second the chart is re animate and it's not beautiful and user friendly. 
Even if I set the enableAnimation to false the chart is animated. 


Manikandan Murugesan [Syncfusion]
Replied On May 24, 2019 04:10 AM UTC

Hi Foulont, 

You can disable animation by using below code snippet. 

Code Snippet: 
var pivotGridObj = new ej.pivotview.PivotView({ 
      chartSettings: { 
        chartSeries: { type: 'Column', animation: { enable: false } } 
      } 
}); 



Please let us know if you need further assistance on this. 

Regards, 
Manikandan. 


Dinesh Babu Yadav [Syncfusion]
Replied On July 3, 2019 06:09 AM UTC

Hi Foulont, 
 
We are glad to announce that our Essential Studio 2019 Volume 2 Beta Release version 17.2.0.28 is rolled out with the mentioned issue fix and is available for download under the following link.    
    
    
Note: This issue fix will be included in our main release as well which is expected to be available by mid of July 2019.    
   
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.   
   
Regards,   
Dinesh Babu Yadav   


Scintilla Arul Jothi Raj [Syncfusion]
Replied On August 23, 2019 12:10 PM UTC

Hi Foulont, 
 
We are glad to announce that our Essential Studio 2019 Volume 2 SP1 Release v17.2.0.46 is rolled out and is available for download under the following link. 
 
 
We have included the following improvements in this release. 
 
 
Code snippet: [JavaScript] 
let pivotObj: PivotView = new PivotView({ 
     //... 
        fieldListRefreshed: function(args) { 
          debugger 
        } 
         
 }); 
 
Sample link: 
 
 
 
Screenshot:  
 
  
Thanks for your patience. 
  
Regards, 
Scintilla A 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon