javascriptkendo-uikendo-chartkendo-tooltip

Custom Method Call in Kendo


I am trying to customize the tooltip as follows,

self.updateChart = function () {
    if ($("#chart").data("kendoChart") != undefined) {
        var chart = $("#chart").data("kendoChart");
        // the following line throws an error
        chart.options.tooltip.template= "#= myTooltip(value) # ";
    }
    chart.refresh();
}


function myTooltip(value) {
    return Math.abs(value.x) + " ,  " + Math.abs(value.y);
}

However I am getting the following error

"Uncaught Reference Error:myToolTip is not defined"

Doing as follows work; however I would like to keep working on the above code that will give me more flexibility.

$("#chart").kendoChart({
    tooltip: {
        visible: true,
        template: "#= myTooltip(value) # "
    }
});

function myTooltip(value) {
    return Math.abs(value.x) + " ,  " + Math.abs(value.y);
}

Solution

  • Try this instead:

    $("#chart").kendoTooltip(
    {
        content : '#= myTooltip(value) #'
        ...
    });
    

    Check the docs which have some good samples:

    http://demos.telerik.com/kendo-ui/tooltip/api

    Also check this example out:

    http://demos.telerik.com/kendo-ui/tooltip/template