Switch between pivot table and pivot chart

Webix JS
1

Hi,

I am almost 100% sure that I have seen some example somewhere for this functionality but I can not find it now :slight_smile: I want to convert pivot table to pivot chart and convert it back when I click button. Is there some prepared webix function for this or I need to get pivot structure and apply to new chart webix with same data? It should be possible because both are based at same data.

2

There is no native API for such kind of transformation, but you can have both pivots on the page and just switch the visible one. ( Create multiview and place pivot table in one cell and pivot chart in another cell )

Both pivots are using the same data format, so they can load the same data feed ( or, you can use ajax to load data once, and then use .parse command on both components to load such data )

3

Hi Maksim,
Is there a way to sync data/structure directly between Pivot table and chart in the above mentioned scenario, so that changing the structure of pivot table to have the chart reflect the changes automatically ?
As I can see from the documentation there are differences between their structures

4

You can sync only raw data, but I don’t think that it has sense.
The structure of pivot table and pivot chart are different, and can’t be reused
Still both components has API to get and set structure, and while their structure is different it possible to get config from one component, alter it a bit and use in other component.

5

Hi maksim !!
Thank you for the reply which is obviously right technically.

The idea was to combine this http://docs.webix.com/samples/61_pivot/01_init/03_configuring.html
with this http://docs.webix.com/samples/61_pivot/02_chart/04_configuring.html and initialize both whenever structure selection is changed giving user the “impression” that they are in sync…

This was done easily with some code like this

 var structures = [{
            label:"Files/Pax/Turnover by Markets/Months",

            structure:{
                rows: ["market"],
                columns: ["stMonth"],
                values: [{ name:"files", operation:"sum"}, { name:"pax", operation:"sum"}, {name:"totSale"}],
                filters:[]
            },

            structureC:{
                rows: ["market"],
                groupBy: ["stMonth"],
                values: [{ name:"files", operation:"sum"}, { name:"pax", operation:"sum"}, {name:"totSale"}
],
                filters:[]
            }
        },

            $$("structures").attachEvent("onItemClick", function(id) {
                var str = webix.copy(this.getItem(id).structure);
                $$("pivot").define("structure", str);
                $$("pivot").render();
                var str = webix.copy(this.getItem(id).structureC);
                $$("pivotChart").define("structure", str);
                $$("pivotChart").render();
            });

Observing that the only difference between the structures is actually the renaming of “columns:” to “groupBy:” perhaps will give you ideas for some kind of automation