Hi everyone,
I’ve been working on a stacked bar chart on the age of vehicles. It shows the amount of vehicles with ages in categories. The categories are groups of ages (like 0 to 2 and 3 to 5) and the stacks are based on the ages within this category (which for 0 to 2 would be 0, 1 and 2) and the amount of vehicles with each age.
I want the tooltip to show the age of each stack and the amount of vehicles with this age. I can manage to show the amount of vehicles, but am having trouble showing the age (by which I mean the age of this specific part of the stack, not the category). I did put the ages into an array, which I then set as the name of the stack. I can put this array in the tooltip, but only need the specific age for the item I’m hovering on.
The code for my kendo Chart looks like this:
$("#ageGraph").kendoChart({
title: { text: "Leeftijd", color: "white" },
legend: { visible: false },
tooltip: { visible: true, template: "#: series.name #" },
chartArea: {
height: 500,
background: "#252730",
},
axisDefaults: {
majorGridLines: {visible: false}
},
valueAxis: {
title: { text: "Aantal voertuigen", font: "9pt sans-serif", position: "top" },
color:"white",
majorUnit: 100
},
categoryAxis: {
title: { text: "Leeftijd", font: "9pt sans-serif", position: "right" },
color:"white",
labels: { rotation: 90 },
categories: v_categories
},
seriesDefaults: {
type: "column",
overlay: { gradient: "none"},
opacity: 1,
width: 200,
gap: 0.2,
},
series: [
{
name : ["Jonger", (v_averageRounded - 7), (v_averageRounded - 4), (v_averageRounded - 1), (v_averageRounded + 2), (v_averageRounded + 5), "Ouder"],
stack: "Leeftijd",
data: [v_thirdLeftLowest, v_secLeftLowest, v_firstLeftLowest, v_middleLowest, v_firstRightLowest, v_secRightLowest, v_thirdRightLowest]
},
{
name : ["Jonger", (v_averageRounded - 6), (v_averageRounded - 3), v_averageRounded, (v_averageRounded + 3), (v_averageRounded + 6), "Ouder"],
stack: "Leeftijd",
data: [v_thirdLeftMiddle, v_secLeftMiddle, v_firstLeftMiddle, v_middleMiddle, v_firstRightMiddle, v_secRightMiddle, v_thirdRightMiddle]
},
{
name : ["Jonger", (v_averageRounded - 5), (v_averageRounded - 2), (v_averageRounded + 1), (v_averageRounded + 4), (v_averageRounded + 7), "Ouder"],
stack: "Leeftijd",
data: [v_thirdLeftHighest, v_secLeftHighest, v_firstLeftHighest, v_middleHighest, v_firstRightHighest, v_secRightHighest, v_thirdRightHighest]
},
],
seriesColors: ["#7CC6EF", "#4E9AD4", "#125078"],
});
The v_averageRounded variable is the rounded average age, which I use to calculate the categories. The v_thirdLeftLowest, v_secondLeftLowest etc are those calculated categories.
So my question is: how can I get the right array item from series.name to show in the tooltip?
Thanks in advance!
Famke
Hi all,
I decided to look a bit further before opening a support ticket and managed to fix my problem!
In the end, I found the solution in the data key in each series object. I figured I could try to make an array of each data element in the data array, and this worked. After that, all that was left to do was to configure the tooltip, which was a lot less trouble this way.
I think my code will display more clearly how and what I did, this is the tooltip:
tooltip: { visible: true, template: "#= series.nameVeh #: #= dataItem[0]#</br>#= series.nameAge #: #= dataItem[1]#" },
And the series array in the kendo chart configuration looks like this now:
series: [
{
nameVeh : "Aantal",
nameAge: "Leeftijd",
stack: "Leeftijd",
data: [[v_thirdLeftLowest, "Jonger"], [v_secLeftLowest, (v_averageRounded - 7)], [v_firstLeftLowest, (v_averageRounded - 4)], [v_middleLowest, (v_averageRounded - 1)], [v_firstRightLowest, (v_averageRounded + 2)], [v_secRightLowest, (v_averageRounded + 5)], [v_thirdRightLowest, "Ouder"]]
},{
nameVeh : "Aantal",
nameAge: "Leeftijd",
stack: "Leeftijd",
data: [[v_thirdLeftMiddle, "Jonger"], [v_secLeftMiddle, (v_averageRounded - 6)], [v_firstLeftMiddle, (v_averageRounded - 3)], [v_middleMiddle, (v_averageRounded)], [v_firstRightMiddle, (v_averageRounded + 3)], [v_secRightMiddle, (v_averageRounded + 6)], [v_thirdRightMiddle, "Ouder"]]
},{
nameVeh : "Aantal",
nameAge: "Leeftijd",
stack: "Leeftijd",
data: [[v_thirdLeftHighest, "Jonger"], [v_secLeftHighest, (v_averageRounded - 5)], [v_firstLeftHighest, (v_averageRounded - 2)], [v_middleHighest, (v_averageRounded + 1)], [v_firstRightHighest, (v_averageRounded + 4)], [v_secRightHighest, (v_averageRounded + 7)], [v_thirdRightHighest, "Ouder"]]
},
],
This should help: docs.telerik.com/.../tooltip
And for high flexibility on formatting the tooltip: docs.telerik.com/.../tooltip
Check this docs.telerik.com/.../tooltip
and in particular this docs.telerik.com/.../tooltip for high flexibility in controlling what's rendered in tooltip.
Hi Thierry,
Thanks for your answer, but I'm afraid it won't solve my problem.
I tried the format values; 0 gives me the number of vehicles, but 1 returns nothing. So if I use tooltip format, I'm unable to get the age.
Using the tooltip template isn't helping either. Value gives me the number of vehicles, value.x or value.y return nothing, category returns the category (so not the age of that part of the stack), series gives me [Object object] and dataItem - again - gives me the number of vehicles.
Maybe I have been unclear in explaining what I want the code to do, so I'll put in an example:
The values for each stack tooltip are stored in the name field of each stack, and is an array of values. I've put this array together the same as the stacks themselves, so for each stack, the first series name belongs to the first item in the data array etc.
If I can get the data point index, I can solve the problem by creating a tooltip with the following template: series.name.indexOf(datapointindex), but using data point is not supported in the tooltip template, so I'm looking for a workaround.
Hi Famke,
Can you try like this?
tooltip: { visible: true, template: "#: series.name[datapointindex] #" },
If above one doesn't resolve your problem please raise a support ticket so that we can investigate it further.
Regards,
Shiva
Hi Shiva,
Yes, that should work, it's an array after all... but to do this, I first need to define datapointindex, and that's what I haven't been able to do yet. Do you know how I can get the data point index in the tooltip?
Hi Famke,
Please create a support ticket we can have screenshare to resolve this.
Regards,
Shiva
Hi all,
I decided to look a bit further before opening a support ticket and managed to fix my problem!
In the end, I found the solution in the data key in each series object. I figured I could try to make an array of each data element in the data array, and this worked. After that, all that was left to do was to configure the tooltip, which was a lot less trouble this way.
I think my code will display more clearly how and what I did, this is the tooltip:
tooltip: { visible: true, template: "#= series.nameVeh #: #= dataItem[0]#</br>#= series.nameAge #: #= dataItem[1]#" },
And the series array in the kendo chart configuration looks like this now:
series: [
{
nameVeh : "Aantal",
nameAge: "Leeftijd",
stack: "Leeftijd",
data: [[v_thirdLeftLowest, "Jonger"], [v_secLeftLowest, (v_averageRounded - 7)], [v_firstLeftLowest, (v_averageRounded - 4)], [v_middleLowest, (v_averageRounded - 1)], [v_firstRightLowest, (v_averageRounded + 2)], [v_secRightLowest, (v_averageRounded + 5)], [v_thirdRightLowest, "Ouder"]]
},{
nameVeh : "Aantal",
nameAge: "Leeftijd",
stack: "Leeftijd",
data: [[v_thirdLeftMiddle, "Jonger"], [v_secLeftMiddle, (v_averageRounded - 6)], [v_firstLeftMiddle, (v_averageRounded - 3)], [v_middleMiddle, (v_averageRounded)], [v_firstRightMiddle, (v_averageRounded + 3)], [v_secRightMiddle, (v_averageRounded + 6)], [v_thirdRightMiddle, "Ouder"]]
},{
nameVeh : "Aantal",
nameAge: "Leeftijd",
stack: "Leeftijd",
data: [[v_thirdLeftHighest, "Jonger"], [v_secLeftHighest, (v_averageRounded - 5)], [v_firstLeftHighest, (v_averageRounded - 2)], [v_middleHighest, (v_averageRounded + 1)], [v_firstRightHighest, (v_averageRounded + 4)], [v_secRightHighest, (v_averageRounded + 7)], [v_thirdRightHighest, "Ouder"]]
},
],
Below is the answer we received from Famke - I don't see it here so posting for others in case they face the same situation.
Thierry.
---------------------------------------------------------------------------------------------------------------------------------------------------
Famke Bergmans
Hi all,
I decided to look a bit further before opening a support ticket and managed to fix my problem!
In the end, I found the solution in the data key in each series object. I figured I could try to make an array of each data element in the data array, and this worked. After that, all that was left to do was to configure the tooltip, which was a lot less trouble this way.
I think my code will display more clearly how and what I did, this is the tooltip:
tooltip: { visible: true, template: "#= series.nameVeh #: #= dataItem[0]#</br>#= series.nameAge #: #= dataItem[1]#" },
And the series array in the kendo chart configuration looks like this now:
series: [
{
nameVeh : "Aantal",
nameAge: "Leeftijd",
stack: "Leeftijd",
data: [[v_thirdLeftLowest, "Jonger"], [v_secLeftLowest, (v_averageRounded - 7)], [v_firstLeftLowest, (v_averageRounded - 4)], [v_middleLowest, (v_averageRounded - 1)], [v_firstRightLowest, (v_averageRounded + 2)], [v_secRightLowest, (v_averageRounded + 5)], [v_thirdRightLowest, "Ouder"]]
},{
nameVeh : "Aantal",
nameAge: "Leeftijd",
stack: "Leeftijd",
data: [[v_thirdLeftMiddle, "Jonger"], [v_secLeftMiddle, (v_averageRounded - 6)], [v_firstLeftMiddle, (v_averageRounded - 3)], [v_middleMiddle, (v_averageRounded)], [v_firstRightMiddle, (v_averageRounded + 3)], [v_secRightMiddle, (v_averageRounded + 6)], [v_thirdRightMiddle, "Ouder"]]
},{
nameVeh : "Aantal",
nameAge: "Leeftijd",
stack: "Leeftijd",
data: [[v_thirdLeftHighest, "Jonger"], [v_secLeftHighest, (v_averageRounded - 5)], [v_firstLeftHighest, (v_averageRounded - 2)], [v_middleHighest, (v_averageRounded + 1)], [v_firstRightHighest, (v_averageRounded + 4)], [v_secRightHighest, (v_averageRounded + 7)], [v_thirdRightHighest, "Ouder"]]
},
],