Configuring Pivot Chart

Getting and Setting Configuration Object

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"}]
}

Related sample:  Configuration

Getting Chart Object

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.

Defining Chart properties

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).

Defining Operations on Data

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:

  • sum - default, shows the sum of values of this property;
  • max - shows the max value of this property found in the dataset;
  • min - shows the min value of this property found in the dataset;
  • count - shows the number of occurrences of this property in the dataset.

Adding a custom operation

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:

  • name - (string) the operation's name
  • operation - (function) the function which will be called for each cell in the column with this operation. It takes two parameters:
    • template - (function) the function that allows accessing the property data is grouped by
    • data - (object) a data object with items of this group
$$('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

Removing an operation

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

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:

  • text - filtering is performed by symbols you type in the text field. It supports base math comparison operators, so you can type something like "< 100", "> 2.5" or "= 12".
    If there is no operator, a filter will use text match for filtering;
  • select - filtering is performed by options that are automatically gathered from the dataset (all unique values of this property). For instance, if you choose Continents, then all unique continent names from the dataset become options.
  • multiselect - filtering is performed by options that are automatically gathered from the dataset (all unique values of this property). For instance, if you choose Continents, all unique continent names from the dataset become options. The filter allows selecting several options at a time;
  • datepicker - filtering is performed by dates selected in the calendar.

Renaming fields

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

Adding Chart Types

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.

Setting Readonly Mode

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,
    //...
});

Related sample:  Read-Only

Back to top
If you have not checked yet, be sure to visit site of our main product Webix mvc library and page of javascript pivot grid product.