1. Home
  2. Forum
  3. Blazor
  4. Show Pivot Table and Pivot Chart at the same time

Show Pivot Table and Pivot Chart at the same time

Hello,

I would like to display the pivot table with a bound chart at the same time. The chart should visualize the data of the pivot table.

Is it possible to display Pivot Table and Pivot Chart at the same time?

Or can a simple chart control be bound to the pivot table control?


Thanks in advance 

Christian


5 Replies 1 reply marked as answer
MM Manikandan Murugesan Syncfusion Team January 21, 2022 09:19 AM UTC

Hi Christian, 

To view both the pivot table and the chart, change the "View" property in "PivotViewDisplayOption" to "Both." Please refer the code sample below. 

Code Example: 
<SfPivotView TValue="ProductDetails" @ref="Pivot" Height="340" AllowCalculatedField="true" ShowFieldList="true"> 
    <PivotViewDisplayOption View="View.Both"></PivotViewDisplayOption>  
    </PivotViewGridSettings> 
</SfPivotView> 

Meanwhile, we have prepared a sample for your reference. Please find it from below link. 

Please let us know if you have any concerns. 

Regards, 
Manikandan 


CD Christian Dreising January 21, 2022 04:10 PM UTC

Hi Manikandan,

thanks for your quick response. 

I already tried out setting the view property to "Both" but it didn't work for me.


With help of your sample code I found out that the pivot chart disappears when the pivot grids' toolbar is enabled (

<SfPivotView  ShowToolbar="true">).

This is the reason why it does not work in my project.


Is this behavior by design?

Is it possible to show the pivot table with toolbar and the pivot chart at the same time?


Kind regards

Christian


SP Sastha Prathap Selvamoorthy Syncfusion Team January 24, 2022 12:22 PM UTC

Hi Christian,  

When the toolbar option in the pivot table component is enabled, either the pivot table or the pivot chart will be displayed alone and can be switched dynamically using built-in toolbar options. This is the default behavior of the pivot table. But, you can display both pivot table and pivot chart by overriding the below CSS at sample itself. 

CSS: 
<style> 
    .sf-pivotview .e-component-disable { 
        display: inline-block !important; 
    } 
</style> 

Output: 
 

Meanwhile, we have prepared a sample for reference. Please find the link below. 

Please let us know if any concern occurs. 

Regards, 
Sastha Prathap S. 


Marked as answer
CD Christian Dreising February 10, 2022 04:07 PM UTC

Hello Sastha,


thanks for your css sample code.

It works very well and is exactly what I needed.


But I have some really annoying performance issues with the pivot grid component used in a blazor webassembly application.

Unfortunately the performance of user interactions is very bad.

The pivot table responds very slow.

It is not only the initial load time but even more the delay when I’m using the table (change fields, expanding, etc.)


I have found some related posts considering bad performance of the blazor grid component when using in a wasm application.

The solution there was to use the PreventRender method or parameter to get much better performance.

But I didn’t find a way to do this with the blazor pivot table.


What can I do to improve the performance of the pivot table in a blazor web assembly application?

The performance is even bad if I put your demo code (which works very well and fast in server side mode) into my wasm application.


Could you please give me any advice to improve the performance?


Kind regards

Christian


SP Sastha Prathap Selvamoorthy Syncfusion Team February 11, 2022 09:53 AM UTC

Hi Christian, 

When compared to the Blazor Server side app, the Blazor WASM app has performance issues. Because it downloads the C# libraries first and then processes them in browsers. The pivot table component also experiences some delays when displaying a larger number of cells. Like DataGrid, we don’t have “PreventRender” option in the Pivot Table. But, you can use a remote URL to bind JSON and CSV data and set the "ExpandAll" property to "false" to improve performance. Please see the document below for more information. 
 
 
To avoid this limitation in the Blazor WASM app, we intend to provide support for using the existing server-side engine (EJ2.Pivot) in the Blazor Pivot Table. And it will be available in any of our upcoming releases. You can follow the progress by clicking on the link below. 
 
 
Please let us know if you have any concerns. 

Regards, 
Sastha Prathap S. 


Loader.
Up arrow icon