0

I have the dummy data in the following jsfiddle : http://jsfiddle.net/epvg86qu/18/ and when user clicks on the line, then it calls DetailChart_Click() method draws other data series (stats,stats2), viceversa.

However when I try to implement this functionality (seriesClick) in my actual project, it only calls DetailChart_Click() method once when it initialize.However, it does not call/trigger that method when user clicks on the line series.

var isHover=false;  

self.updateChart = function () {
            var chart = $("#chart").data("kendoChart");
            chart.options.series = self.dataSeries1;                          
            chart.options.seriesClick = DetailChart_Click();        
            chart.refresh();
 }

function DetailChart_Click() {
        console.log("hello");
        if (!isHover) {
            var chart = $("#chart").data("kendoChart");
            chart.options.series = self.dataSeries2;
            chart.redraw();
            isHover = true;
        }
        else if (isHover) {
            var chart = $("#chart").data("kendoChart");
            chart.options.series = self.dataSeries1;
            chart.redraw();
            isHover = false;
        }
}
casillas
  • 16,351
  • 19
  • 115
  • 215
  • Looks like your fiddle works as expected, it uses `DetailChart_Click` instead of `DetailChart_Click()` because it's referencing the function, not running it. – JKirchartz May 14 '15 at 17:43
  • @JKirchartz, How should I make it work? Should I make it `chart.options.seriesClick=DetailChart_Click` ? – casillas May 14 '15 at 18:08
  • I think that would work (note: I've never used kendoCharts) – JKirchartz May 14 '15 at 18:21
  • I tried that as well, it did not work. By doing that, it does not event call DetailChart_Click() at once. – casillas May 14 '15 at 19:15
  • Have you bound the `click` event to your function? It ran once during initialization because you called it when assigning `chart.options.seriesClick = DetailChart_Click();` (function name followed by a parentheses `()` is a function call) – digawp May 15 '15 at 14:14
  • Check my answer. Added some explanation as well – digawp May 15 '15 at 14:57

1 Answers1

1

You can use the below snippet to bind your DetailChart_Click() after initialization:

var chart = $("#chart").data("kendoChart");
chart.bind("seriesClick", DetailChart_Click);

Taken from here.

Alternatively, bind it during initialization as shown in their demo.

Additional note

What you are doing currently below:

chart.options.seriesClick = DetailChart_Click();

is calling the DetailChart_Click function and assign the return value (which is undefined as it has no return value) to seriesClick, which is not what you want. Generally if you want to register callbacks such as this one, you'd want to omit those parentheses (which makes it a reference to the function DetailChart_Click) and assign it to the seriesClick, which is what you intended to do.

However, even if you remove the parentheses in your code above, you assigned it wrongly, as the seriesClick callback should be registered by bind method of the chart, instead of assigning it to the options property of the chart.

Hope it helps!

digawp
  • 324
  • 2
  • 13
  • do you have any idea of the following question http://stackoverflow.com/questions/30281700/chart-area-and-legend-area-automatically-updates – casillas May 16 '15 at 23:20