You can easily display the value of each series using its label property. However, when stacking series, in order to be able to display a total of all
stacked values, you would need to manually sum the values of the stacked series. Below you can see a sample of how this can be achieved in a couple of steps.
The dataSource property of RadChart is of type Telerik.Data.DataSource and it allows you
to process data once it is fetched, using the parse event of the schema child object.
So, the first step is to define your implementation of the parse function to sum the values from the passed datasource and assign the result to
a new property of the data item.
Calculating total | Copy |
---|
WinJS.Namespace.define("StackingSeries.Functions", {
processData: WinJS.Utilities.markSupportedForProcessing(function (dataItems) {
var item;
for (var i = 0; i < dataItems.length; i++) {
item = dataItems[i];
item.total = item.value1 + item.value2;
}
return dataItems;
})
});
|
In the series declaration, make the labels visible and using a template, display the value of the newly added property of the
dataItem object.
Displaying total | Copy |
---|
<div id="chart5" data-win-control="Telerik.UI.RadChart" data-win-options="{
dataSource: {
data: [
{value1: 15, value2: 17},
{value1: 11, value2: 19},
{value1: 32, value2: 24}
],
schema: {
parse: StackingSeries.Functions.processData
}
},
series: [
{
field: 'value1',
},
{
field: 'value2',
labels: {
visible: true,
template: 'Total: #=dataItem.total#'
}
}
],
seriesDefaults: {
type: 'column',
stack: true
}
}">
</div> |
The resulting chart looks like this:
This implementation is part of our
SDK Examples and is available for download at the following link:
Telerik Windows 8 HTML SDK under Chart/DisplayingTotalSumOfSeriesInAStack.
See Also