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