Dynamic series legend in Knockout-Kendo Chart

Question

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>

Answer 1

You would have to expose your helper function globally, so that the Kendo template code can find it. The fiddle JS code is running in the onload function, so your getOptionText function is not global.

You could do something like:

window.myApp = {
    helpers: {
        getOptionText: function(q ){
            //these are not the real values, but you get the idea
            if(q===1){
                return 'Bare minimum';
            }
            if (q ===2){
                return 'Some effort ';
            }
            if (q ===3){
                return 'Good  ';
            }
            if (q ===4){
                return 'Great ';
            }
        }
    }
};

Then, use a template like: '#=myApp.helpers.getOptionText(value)#'

http://jsfiddle.net/rniemeyer/X2WBL/