Using KendoUI Line graph, I have multiple series of data and I'd like to show in the tooltip additional data pertaining to a single series of data in the tool tip. In this case I want to show the survey count in the tooltip for each product. I also have a market segment that represents the average of all products in the database in which I don't want to show the data. So for Market Segment I don't want to show the Survey Count.
How do I go about doing this?
This link is to my failed jsFiddle Project: http://jsfiddle.net/rodneyhickman/uMTnh/9/
In the jsFiddle project above I get the survey count for the first product they way I want it for product 2, product 3, etc. For the Averages (Market Segment) I don't want to show a survey count.
My markup:
<div >
<div id='chart' ></div>
</div>
My JavaScript:
jQuery(function() {
var myData = [
{
"product1": 86.61,
"product2": 85.23,
"marketsegment": 80.17,
"date": "Mar 2011",
"surveyCountProduct1": "2",
"surveyCountProduct2": "4"
},
{
"product1": 87.61,
"product2": 84.23,
"marketsegment": 81.12,
"date": "Mar 2011",
"surveyCountProduct1": "2",
"surveyCountProduct2": "3"
},
{
"product1": 87.91,
"product2": 85.53,
"marketsegment": 81.57,
"date": "Mar 2011",
"surveyCountProduct1": "2",
"surveyCountProduct2": "4"
},
{
"product1": 88.22,
"product2": 85.23,
"marketsegment": 81.90,
"date": "Mar 2011",
"surveyCountProduct1": "2",
"surveyCountProduct2": "4"
},
{
"product1": 88.61,
"product2": 86.13,
"marketsegment": 79.17,
"date": "Mar 2011",
"surveyCountProduct1": "2",
"surveyCountProduct2": "5"
}
];
jQuery('#chart').kendoChart({
title: {
text: "Overall Score out of 100",
align: "left",
font: "18px Arial, Verdana, sans-serif",
color: "#444"
},
seriesDefaults: {
type: "line",
missingValues: "interpolate"
},
legend: {
position: "bottom"
},
tooltip: {
visible: true,
template: "<b>#= series.name #</b><br/>#= dataItem.date #<br/>#= value #<br/>Survey Count= #= dataItem.surveyCountProduct1 #"
},
valueAxis: {
min: 75,
max: 95,
plotBands: [{
from: 75,
to: 80,
color: "#f5f5f5"
},
{
from: 85,
to: 90,
color: "#f5f5f5"
},
{
from: 95,
to: 100,
color: "#f5f5f5"
}]
},
dataSource: {
data: myData
},
series: [
{
name: "Some Product 1",
color: "#004990",
width: 1,
field: "product1",
markers: {
background: "#004990"
}
},
{
name: "Some Product 2",
color: "#8a7967",
width: 1,
field: "product2",
markers: {
background: "#8a7967"
}
},
{
name: " Market Segment Average",
color: "#da7633",
width: 1,
field: "marketsegment",
markers: {
background: "#da7633"
}
}],
categoryAxis: {
labels: {
rotation: -45,
step: 1,
skip: 0
},
categories: ["Mar", "Apr", "May", "Jun", "Jul"]
}
});
});
Any help would be appreciated.