CODEWITHSUNDEEP
javascriptkendo-uibar-chart
Grandizer
Grandizer

Reputation: 3025

How to add Aggregate (Sum) To Kendo UI Stacked Bar Chart

I have a simple bar chart with basic data. The tooltip shows the specific value it is representing which is good. I want to, just below it, show the Total for that entire bar/stack. So if the top bar had 10, 20, 50 for its corresponding values, the total for that stack/bar would be 80.

Here is a jsfiddle that shows the working bar chart.

Is it possible to have the tooltip show the value and total?

I have tried using aggregate at the seriesDefault level, within the series and a few others to no avail. I typically try the following for my tooltip format:

"#= series.name # #= kendo.format('{0:C0}', value) #<br />#= kendo.format('{0:C0}', sum) #";

Upvotes: 0

Views: 2626

Answers (1)

JFlox
JFlox

Reputation: 708

Using a regular template:

<script id="altTemplate" type="text/x-kendo-template">
 #: series.name # -  #: value #
 # var chartOptions = $("\#chartBreakout").data("kendoChart").options #   
 # var categories = chartOptions.categoryAxis.categories #
 # var allSeries = chartOptions.series #
 # var catIndex = categories.indexOf(category) #   
 # var total = 0 # 
 # for (var i = 0; i < allSeries.length; i++) { # 
 #    total += allSeries[i].data[catIndex] #
 # } #
 Total - #: total #
</script>

fiddle

You could change it to a shared Template

tooltip: {
    visible: true,
    shared: true,
    sharedTemplate: kendo.template($("#template").html())
}

Then your template would be something like:

<script id="template" type="text/x-kendo-template">
<div>#: category #</div>
# var total = 0; #
# for (var i = 0; i < points.length; i++) { #
<div>#: points[i].series.name# : #: points[i].value #</div>
# total += points[i].value #
# } #
Total #: total #
</script>

fiddle

Upvotes: 1

Related Questions