I have a collection of objects with data that need to be displayed as dynamic kendo charts. I am using Niemeyer's Knockout-Kendo library with a KO observablearray. I use a relative value to chart the data onto the kendo chart, but I need to display the actual text value that is associated with the data. Kendo has a template attribute that can accomplish this but I have hit a roadblock making it work in the Knockout-Kendo library.
Fiddle
Here's a functioning Fiddle with data
Goal
Use a lookup value for display in the ValueAxis and ToolTip of the chart
References
Kendo Label Template docs
Kendo Chart with a function for label example
Niemeyer Knockout-Kendo Chart docs
Data Snippet
var theData =[{
"TrackerName": "Fruits",
"Trackers": [{
"TrackerName": "Fruits",
"TrackerDate": "2014-02-12T00:00:00",
"OptionText": "5-7 servings",
"RelativeValue": 3
},
{
"TrackerName": "Fruits",
"TrackerDate": "2014-02-13T00:00:00",
"OptionText": "5-7 servings",
"RelativeValue": 3
},
etc];
HTML and Data Bindings
<div data-bind="foreach:AllTrackers">
<h3 data-bind="text:TrackerName"> </h3>
<!-- ko with: Trackers -->
<div data-bind="kendoChart:
{
data: $data,
chartArea: {
height:100
},
series: [
{
type: 'line',
style:'smooth',
field: 'RelativeValue',
markers: {
visible: true,
background: '#c0c0c0',
size: 10
},
tooltip: {
visible: true,
background: '#f0f0f0'
}
}],
seriesColors: ['midnightblue'],
valueAxis: {
labels: {
template: 'Help #=value#'
},
line: {
visible: false
},
min: 1,
max: 4,
majorUnit: 1
}
,
categoryAxis: {
categories:$parent.CategoryDates,
majorGridLines: {
visible: false
}
}
}">
</div>
<!-- /ko -->
</div>