You can get and set the pivot chart configuration object as follows:
//get current configuration
var config = $$("pivot").getStructure();
//set configuration
$$("pivot").setStructure(config);
The format of the config object is the same as the "structure" parameter of the constructor:
var config = {
groupBy: "year",
values: [{name:"balance", operation:"sum", color: "#eed236"}],
filters:[{name:"name", type:"select"}]
}
You can access the Chart object by using the next code:
var chart = $$("pivot").$$("chart");
This allows you to use any of Chart events or API methods.
To redefine the default properties of the chart, such as a legend or width of bars, you can use the chart object. Any property that you specify in the chart object will redefine the analogous one in the default configuration object:
view:"pivot-chart",
chart: {
scale: "logarithmic",
barWidth: 25,
legend: {
layout: "x",
align: "center",
valign: "bottom"
}
}
Related sample: Defining Chart Properties
Note, you can use any property available for the Chart component (a list of properties).
Operations are set within Pivot Chart structure object in values array. Name refers to data item property, color - to the color of the related graph:
view:"pivot-chart",
id:"pivot",
structure:{
values:[
{name:"gdp",operation:"sum",color:"#eed236"}, // GDP values will be summed
{name:"oil",operation:"max",color:"#36abee"} // max oil value will be shown
]
}
There are 4 prebuilt operations over data:
If needed, you can add your own operation in one of the following ways:
1) through the groupMethods configuration option:
view:"pivot-chart",
groupMethods:{
abssum: function(template, data){
data = data || this;
var summ = 0;
for (var i = 0; i < data.length; i++)
summ+= Math.abs(template(data[i])*1);
return summ;
}
}
And use it as follows:
values:[ name:"oil", operation:"abssum"]
Related sample: Adding New Group Methods
2) with the help of the addGroupMethod() method
The method takes two parameters:
$$('pivot').addGroupMethod("median", function(template, data){
if (!data.length) return 0;
var summ = 0;
for (var i = data.length - 1; i >= 0; i--) {
summ += template(data[i])*1;
};
return summ/data.length;
});
Related sample: The addGroupMethod() Method
It is possible to remove operations with the removeGroupMethod() method. It takes the name of the operation to remove as a parameter:
$$('pivot').removeGroupMethod("min");
Filters are set within Pivot Chart structure object in filters array. Name refers to data item property used for filtering:
view:"pivot-chart",
structure:{
values:[
{name:"name",type:"select"},
{name:"continent", type:"text"}
]
}
By default, Webix Pivot uses the following filters:
By default Pivot Chart uses data item properties for column names. But if you have dataset structured like below, the default pattern becomes unsuitable:
[{ a1:100, a2:1.34 }, ...]
In this case, you can use the fieldMap property to set beautiful names for columns instead of a1 and a2:
webix.ui({
view:"pivot",
fieldMap:{ "a1" : "GDP", "a2" : "Grow ratio" },
//...
});
Related sample: Mapping Field Names
By default, Pivot Chart gives users a possibility to present data in 3 types of a chart: 'bar', 'line', 'radar'. If you need you can redefine the default types or add a new one.
Note, just types 'stacked bar' and 'area' can be additionally added to the Pivot Chart.
To add a new chart's type to Pivot Chart, use the chartMap property:
Adding a new chart's type
view:"pivot-chart",
chartMap: {
"Area Radar": function(color){ //adds a new chart type 'Area Radar'
return {
type: "radar",
alpha: 0.4,
disableItems: true,
fill: color,
line:{
color: color,
width:1
}
}
},
"Line": function(color){ //redefines the default 'Line' type
type:"line",
offset:false,
preset:"plot"
}
}
The chart's type is identified by its name ("Area Radar" and "Line" in the code above). The names of the default types you can check in the 'Chart type' control of the Configuration window.
In order to disable changing of the Pivot Chart configuration settings, you can specify the readonly config property with the "true" value:
webix.ui({
view: "pivot-chart",
readonly:true,
//...
});
Back to top