Hi Team,
I need to add percentage in tooltip and series label . I am successfully able to do the same by adding directly into tooltip template and series label template.
Please find below my working code:
<div id="chart"></div>
<script>
var x= 0;
function processResponse(response) {
var length = response.length;
var item;
var i;
for (i = 0; i < length; i++) {
item = response[i];
x = x + item.ActionsCount;
}
return response;
}
var seriesData = [
{"IsMainAction":"8). Cancelled","ActionsCount":20},{"IsMainAction":"7). Completed (KPI not fully achieved)","ActionsCount":4},
{"IsMainAction":"6). Completed (KPI achieved)","ActionsCount":21},
{"IsMainAction":"5). Ongoing (delayed)","ActionsCount":1},
{"IsMainAction":"4). Ongoing (on time)","ActionsCount":12}, {"IsMainAction":"3). Not yet started (will be on time)","ActionsCount":9},
{"IsMainAction":"2). Not yet started (will be delayed)","ActionsCount":3},
{"IsMainAction":"1). Planned","ActionsCount":80}
];
function createChart() {
$("#chart").kendoChart({
legend: {
position: "center",
visible: true,
template: "#= data.name #"+ "%"
},
dataSource: {
data: seriesData,
group: {
field: "IsMainAction"
},
schema: {
parse: function(response) {
return processResponse(response);
}
}
},
seriesDefaults: {
type: "bar",
stack: true
},
seriesColors: ["#F4DC7A", "#FF2B24", "#FDC1A4", "#3CB4FF", "#D079F1", "#1AAF18", "#0DFF85", "#222222"],
series: [
{
field: "ActionsCount" ,
labels:{
visible: true,
position: "center",
rotation: -90,
//color: "#FFFFFF",
format: "{0}",
mirror: true,
background: "transparent", //padding: { left: -10 },
template:"#= value # (#=kendo.toString((value/10)*100, 'n2')#" + "%)"
}
}
],seriesColors: ["#F4DC7A", "#FF2B24", "#FDC1A4", "#3CB4FF", "#D079F1", "#1AAF18", "#0DFF85", "#888"],
tooltip: {
visible: true,mirror: true,
template:"#= value # (#= kendo.toString((value/10)*100, 'n2')#" + "%)"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
Please see the attachment chart1 for output
However when I am trying to add in databound only for first bar I am getting the output correctly . For all other bar only value is getting displayed. But for template it is working as expected. Please see the code below:
<div id="chart"></div>
<script>
function onDataBound(arg) {
arg.sender.options.tooltip.template = "#= value # (#= kendo.toString((value/10)*100, 'n2')#" + "%)";
arg.sender.options.series[0].labels.template = "#= value # (#= kendo.toString((value/10)*100, 'n2')#" + "%)";
arg.sender.redraw();
}
var x= 0;
function processResponse(response) {
var length = response.length;
var item;
var i;
for (i = 0; i < length; i++) {
item = response[i];
x = x + item.ActionsCount;
}
return response;
}
var seriesData = [
{"IsMainAction":"8). Cancelled","ActionsCount":20},{"IsMainAction":"7). Completed (KPI not fully achieved)","ActionsCount":4},
{"IsMainAction":"6). Completed (KPI achieved)","ActionsCount":21},
{"IsMainAction":"5). Ongoing (delayed)","ActionsCount":1},
{"IsMainAction":"4). Ongoing (on time)","ActionsCount":12}, {"IsMainAction":"3). Not yet started (will be on time)","ActionsCount":9},
{"IsMainAction":"2). Not yet started (will be delayed)","ActionsCount":3},
{"IsMainAction":"1). Planned","ActionsCount":80}
];
function createChart() {
$("#chart").kendoChart({
legend: {
position: "center",
visible: true,
template: "#= data.name #"+ "%"
},
dataSource: {
data: seriesData,
group: {
field: "IsMainAction"
},
schema: {
parse: function(response) {
return processResponse(response);
}
}
},
seriesDefaults: {
type: "bar",
stack: true
},
dataBound: onDataBound,
seriesColors: ["#F4DC7A", "#FF2B24", "#FDC1A4", "#3CB4FF", "#D079F1", "#1AAF18", "#0DFF85", "#222222"],
series: [
{
field: "ActionsCount" ,
labels:{
visible: true,
position: "center",
rotation: -90,
//color: "#FFFFFF",
format: "{0}",
mirror: true,
background: "transparent", //padding: { left: -10 },
}
}
],seriesColors: ["#F4DC7A", "#FF2B24", "#FDC1A4", "#3CB4FF", "#D079F1", "#1AAF18", "#0DFF85", "#888"],
tooltip: {
visible: true,mirror: true
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
Please see the attachment chart 2 for this output
Kindly help me to fix this issue
3 Answers, 1 is accepted
Could you please provide us more information on the desired result?
Based on the provided code, the changes are correctly applied only to the first series, as they are set only to the first element in the series array:
arg.sender.options.series[0].labels.templateIf the desired result is to set it for all series, please make the desired change for all series or use the setOptions method which will set the same template for all series. Please have in mind that this will require a flag in order to execute it only when needed to prevent recursion:
http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#methods-setOptions
If I missed an important detail, please let me know and I will gladly assist.
Regards,
Stefan
Progress Telerik
Rank 1
Hi Stefan,
I have used the code from the following link:
http://www.telerik.com/forums/is-it-possible-to-conditionally-display-the-series-label-
"e.sender.options.series[0].labels.visible" is used for all the series and not for a single series.
Please let me know how to use label template in databound for all the series.
Regards,
Sangeetha
In this scenario I can suggest to loop through all of the series:
dataBound:function(arg){ for(var i = 0; i <arg.sender.options.series.length; i++ ){ arg.sender.options.series[i].labels.template = "#= value # (#= kendo.toString((value/10)*100, 'n2')#" + "%)"; } arg.sender.redraw();}http://dojo.telerik.com/uveRu
I hope this is helpful.
Regards,
Stefan
Progress Telerik