Contents
In the last tutorials, we displayed the data in our charts “as is” without any modification. But OLAPCharts is also able to transform the data before it is used in charts, e.g. you may want to aggregate your data or extrace two dimensions out of a multidimensional cube.
To demonstrate the transformations, we’ll define a cube with 2 dimensions first.
<cube name="cube1"><!--{
dimensions: [
[Mon, Tue, Wed, Thu, Fri, Sat, Sun],
[Product 1, Product 2, Product 3]
],
values: [
[10,20,10,-10,-15,-5,15],
[5,10,15,20,25,30,35],
[1,2,3,4,5,6,7]
]
}--></cube>
This is the data original data as a bar chart:
<chart datasource="cube1"><!--{
type:bar, width: 450, height: 250
}--></chart>
The you can add transformations to the data, either in the cube itself, another cube or in the chart. Transformations are defined with the transform attribute of the cube or charts. It expects an array of object and each object must at least contain the type attribute (which defines the type of transformation you want to perform):
<chart datasource="cube1"><!--{
transform: [{ type: accumulate }],
type:bar, width: 450, height: 250
}--></chart>
This example takes the original and performs an accumulate transformation on this.
Dimension manipulation
Subcube
<chart datasource="cube1"><!--{
transform: [{ type: subcube, dimensions: [1] }],
type:bar, width: 450, height: 250
}--></chart>
A subcube is a new version of a cube with less dimensions or dimensions in a different order. The upper example reduced the dimension to dimension #1 (the products) and aggregates the values of all dimension 0 samples.
<chart datasource="cube1"><!--{
transform: [{ type: subcube, dimensions: [1,0] }],
type:bar, width: 450, height: 250
}--></chart>
This example simply flips the chart by exchanging dimension 0 and 1.
Reverse
<chart datasource="cube1"><!--{
transform: [{ type: reverse, dimension: 0 }],
type:bar, width: 450, height: 250
}--></chart>
The reverse transformation simply reverses the order of the samples in a specific dimension. The upper examples reverses the samples of the first dimension (weekdays) and displays the data as bar chart.
Sort
The sort transformation sorts one dimension of a cube by the aggregated values of all other dimensios. The dimension attribute determines which dimension to sort and the desc attribute, if you want to sort in a desceding order.
<chart datasource="cube1"><!--{
transform: [{ type: sort, dimension: 0, desc: true }],
type:bar, width: 450, height: 250
}--></chart>
In the upper example, you can see that the weekdays are sorted by their total over all products. If we perform an aggregation on the cube in ahead, you will see the result with the sums.
<chart datasource="cube1"><!--{
transform: [{type: subcube, dimensions: [0]}, { type: sort, dimension: 0, desc: true }],
type:bar, width: 450, height: 250
}--></chart>
Top 10
Suppress
Value manipulation
Accumulation
<chart datasource="cube1"><!--{
transform: [{ type: accumulate }],
type:bar, width: 450, height: 250
}--></chart>
The accumulate transformation accumulates all samples of the first dimension. For each sample, the value is the accumulated value of the previous sample plus its own value.
If the data contains more than one dimension, this accumulation is performed for all other dimensions.
Normalization
<chart datasource="cube1"><!--{
transform: [{ type: normalize }],
scale: { max: 1 },
type:bar, stacked: true, width: 450, height: 250
}--></chart
The normalize changes the values for all samples of the first dimension it the way that the sum over all other dimensions is always 1.0. E.g. in a 2 dimensional cube, the sum of all stacked bars in a stacked bar chart would always be 1.0. This is useful to visualize the percentual deviation of the measures.
Stacking
<chart datasource="cube1"><!--{
transform: [{ type: stack }],
type:bar, width: 450, height: 250
}--></chart>
The stack transformation aggregates all values of a sample of the first dimension and adds a lower value to the cube. The result is that all bars in this example start where the previous ended. This transformation is automatically performed whenever you set the attribute stacked of a chart to true.
Waterfall
<chart datasource="cube1"><!--{
transform: [{ type: subcube, dimensions: [0] },{ type: waterfall }],
type:bar, width: 450, height: 250
}--></chart
The waterfall transformations accumulates the values of the first dimension and adds lower values to the cube. Each lower value becomes the last value of the previous sample. In the result you see each bar starting where the old bar ended.
This example also demonstrates how to perform more than one transformation on a cube: The first transformation aggregates all the data to one single dimension and the second transformation applies the waterfall on it.
