Configuration, JavaScript Programming Example of Configuration

Configuration, JavaScript Programming Example of Configuration

Check out the programming example that allows configuring Pivot Chart. Feel free to use free coding samples by Webix to accelerate the process of web development.

JS Code

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));
});

HTML Code

<style type="text/css">
  .webix_message_area{
  	width:400px;
  }
  .footer.webix_form{
  	background: #f3f3f3;
  }
  .title{
  	font-size: 17px;
  }
</style>