Configuration, JavaScript Programming Example of Configuration

var structures = [{
  id: "1",
  value:"GDP, Oil by Years",
  structure:{
    groupBy: "year",
    values: [{name:"balance", operation:"max"},{name:"oil", operation:"max"}],
    filters:[]
  }
},{
  id: "2",
  value:"Oil by Continents",
  structure:{
    groupBy: "continent",
    values: [{ name:"oil", operation:"max"}],
    filters:[{name:"year",type:"select"}]
  }
},{
  id: "3",
  value:"Balance, GDP, Oil by Years",
  structure:{
    groupBy: "year",
    values: [{name:"balance", operation:"max"},{name:"gdp", operation:"max"},{name:"oil", operation:"max"}],
    filters:[{name:"continent", type:"select"}, {name:"name", type:"select"}]
  }
}];

webix.ui({
  rows:[
    {
      view: "form", css: "footer", paddingY: 5,  cols:[
        {view: "label", label: "<span class='title'>Webix Pivot<span>" },
        {view: "button", type: "form", value: "Get Structure", align: "right", inputWidth: 150, id: "get"}
      ]
    },
    {  
      cols:[
        {rows:[
          { view:"list", id:"structures", data:structures, scroll: false, width: 170, select:true }
        ]},
        {
          id:"pivot",
          view:"pivot-chart",
          height:300,
          data:pivot_data,
          structure:{
            groupBy: "year",
            values: [{name:"balance", operation:"max"},{name:"oil", operation:"max"}],
            filters: []
          },
          fieldMap:{
            gdp: "GDP",
            balance: "Balance",
            oil: "Oil",
            form: "Government",
            name: "Country",
            year: "Year",
            continent: "Continent",
            id: "Id"
          },
          chart: {
            scale: "logarithmic"
          }
        }
      ]
    }
  ]
});

$$("structures").select(1);

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

$$("get").attachEvent("onItemClick", function() {
  var str = $$("pivot").config.structure;
  webix.message(JSON.stringify(str));
});