Link pivot table to pivot chart

Webix JS
#1

i want to use pivot table and configure it as needed. Just at the bottom, i want to show a pivot chart linked to the table and that changes at the same time the table changes. with the chart i must be able to configure chart type and the bar color

#2

There is not such a ready solution for binding pivot table and pivot chart. But you can set onStoreUpdated event handler to datatable inside Pivot that will set new structure for PivotChart depending on table structure. Toolbar can be hidden. And you can use own approach to change chart type and color.

$$("chart").$$("toolbar").hide();
$$("pivot").$$("data").data.attachEvent("onStoreUpdated",function(){
     var tableValues = webix.copy($$("pivot").config.structure.values);
     $$("chart").config.structure.values = tableValues;
     var column = $$("pivot").config.structure.columns.slice(-1);
    $$("chart").config.structure.groupBy = column;
    // refresh data
    if($$("chart").data.count())
        $$("chart").data.refresh();
    else
    // load data
	$$("chart").parse($$("pivot").data.getRange());
});
$$("pivot").load(...);
#3

Thanks a lot it helps me.

#4

One more thing, how can i refresh automatically le pivot chart when i have filters in my pivot table. With the code below, the chart doesn’t refresh when i change filter’s value

#5

You can try to apply Pivot filters:

...
$$("pivot").$$("data").data.attachEvent("onStoreUpdated",function(){
     var filters= webix.copy($$("pivot").config.structure.filters);
     $$("chart").config.structure.filters= filters;
      ....
#6

Thanks you !!! The solution works well.

#7

Exactly what i needed.
Works well.
Thanks Maria.