Event does not fire up in Kendo

Question

The mouse hover event does not fire up. I could not able to figure that out

function createChart() {
    $("#chart")
        .kendoChart({
            xAxis: {},
            yAxis: {},
            seriesDefaults: {type: "scatterLine" },
            series: [{data: stats2}],
  })
}

// the following part does not fire up
var isHover = false;
$("#chart").hover(
function () {
    if (!isHover) {
        var chart = $("#chart").data().kendoChart;
        chart.options.series.data=stats2;
        isHover = true;
    }
}, function () {
    if (isHover) {
        var chart = $("#chart").data().kendoChart;
        chart.options.series.data=stats;
        isHover = false;
    }
});

http://jsfiddle.net/epvg86qu/7/

Answer 1

You need to learn to debug sometimes bro, it wasn't the hover function not triggered but you just write a code carelessly.

The series property in chart's options is an array. Therefore you need an index to access it. Also because you are intend to change the series instead of its data, you have to call redraw method right after you change series data.

This code will work

var isHover = false;
$("#chart").hover(
    function () {
    if (!isHover) {
        var chart = $("#chart").data().kendoChart;
        chart.options.series[0].data = stats2;
        chart.redraw();
        isHover = true;
    }
}, function () {
    if (isHover) {
        var chart = $("#chart").data().kendoChart;
        chart.options.series[0].data = stats;
        chart.redraw();
        isHover = false;
    }
});

Have a good day, cheers!!