Related sample: 07_chart/03_group/01_group.html
Sometimes, incoming data is not what we want to display and needs being processed before representing in a chart. For example, we have sales data of different years in several companies, and want to show the total sales per companies in a chart. So, we need to get objects of the same companies and sum up their sales. Grouping helps to resolve this problem.
It allows to gather objects with the same value of the defined property and create one object with new properties.
To group some data objects you need to define the “group” property in a chart constructor or call group() method with an object as a parameter. A group object has two properties:
Here is the code for the example described above:
var chart = new dhx.ui({ view:"chart", type:"bar", container:"chart_container", value:"#sales#", label:"#id#" }); chart.parse(data,"json"); chart.group({ by:"#company#", map:{ sales:["#sales#","sum"] } });
or
var chart = new dhx.ui({ view:"chart", type:"bar", container:"chart_container", value:"#sales#", label:"#id#", group:{ by:"#company#", map:{ sales:["#sales#","sum"] } } }) chart.parse(data,"json");
where the incoming data object contains sales per year of different companies:
var data = [ { sales:"8.0", year:"2007", company: "company 1"}, { sales:"7.3", year:"2008", company: "company 1" }, { sales:"4.8", year:"2009", company: "company 1"}, ... { sales:"5.3", year:"2009", company: "company 4"} ];
Here, data is grouped by “company” property. In the result we've got new objects. The number of objects is equal to the number of companies. Each new data object has two properties: id (company) and sales (the total sales of a certain company):
Properties of the grouped objects are set by the “map” and defined by an array. The first element of this array is a template with a property from original data, the second one – the functor which needs being applied to all values of this property in a group. Grouping provides following functors:
It’s possible to define custom functor.
Related sample: 07_chart/03_group/01_group.html