Building a (simple) pivot table

Hi there, I have started to use Radzen to see how helpful it can be. I have a number of tables where I have two keys and one value and I would like to present them not on a linear form but on a cross-tab
So, instead of this
a, x, 1
b, x, 2
a,y, 4
d, y, 2
c, x, 5

something like
x y
a. 1 4
b. 2
c. 5
4. 2

Is this possible straight from the box? If not, has anyone any experience using something like https://pivottable.js.org/examples/

thanks a lot!

Hi @luissisamon,

We do not have Pivot as built-in component, possible solution is to use third party Angular component similar to this blog post:

Best Regards,
Vladimir

Thanks a lot! I will take a look.

Hi,
Thanks for your help. I first went through this one Custom component (Angular) with no issues.
But then I followed the instructions and found the following error when trying to run the application. I copied the files contents from the blog entry, there should be no typing, but in case I also cced form the GitHub repo.

ERROR in src/app/high-charts.component.ts(32,52): error TS2345: Argument of type '{
chart: { type: string; };
xAxis: { type: "category"; };
legend: { enabled: false; };
series: { ...' is not assignable to parameter of type 'Options'.
Types of property 'series' are incompatible.
Type '{ colorByPoint: true; data: { name: any; y: number; }; }' is not assignable to type '(SeriesAbandsOptions | SeriesAdOptions | SeriesAoOptions | SeriesApoOptions | SeriesAreaOptions |...'.
Type '{ colorByPoint: true; data: { name: any; y: number; }; }' is not assignable to type 'SeriesAbandsOptions | SeriesAdOptions | SeriesAoOptions | SeriesApoOptions| SeriesAreaOptions | ...'.
Type '{ colorByPoint: true; data: { name: any; y: number; }; }' is not assignable to type 'SeriesZigzagOptions'.
Property 'type' is missing in type '{ colorByPoint: true; data: { name: any; y: number; }; }'.

Hi @luissisamon,

It seems that Highcharts changed their API - the chart creation should look like this now (type property specified for the series):

Highcharts.chart(this.element.nativeElement, {
        chart: {
          type: this.type
        },
        xAxis: {
          type: 'category'
        },
        legend: {
          enabled: false
        },
        series: [
          {
            type: 'bar',
            colorByPoint: true,
            data: data
          }
        ]
      });

I've fixed the code also in our repo.

Best Regards,
Vladimir

Thanks a lot! I think I can now understand how this works.

1 Like