KendoUI: How do I get the index of the clicked chart element's item inside an event

Question

I want to access the index for the following events: seriesClick and seriesHover. I only see how to access the value and category of the particular bar in the documentation here http://docs.kendoui.com/api/dataviz/chart#events-seriesClick but not the data of the original object the item is based on.

Answer 1

You have access to the respective data item in e.dataItem, for example, so you could do:

var data = e.sender.dataSource.data();
for (var i=0; i < data.length ; i++) {
    if (e.dataItem.uid === data[i].uid) {
        console.log("index " + i);
    }
}

if that is what you mean by "index".

You also have access to the series data in e.series (but all of that is in the documentation).

Answer 2

The default data series for a Kendo Graph is an array of numeric values. These values do not have a uid, since they are not objects.

Instead of creating an array of numbers in your series object, create an array of objects. Within the series element, create an attribute called 'field' and populate that field with the name of the field in your object that holds the numeric value that you want to chart. This object will have a uid. I am doing this so that I can associate a url with the data point and will move to that page when clicked.

My objects are made in C# and passed in using JSON, but you can make these objects howevery your like.

public class DowntimeAnalysisSeries : DatabagUtility
{
    public string name { get; set; }
    public string field { get; set; }

    public DowntimeAnalysisDatapoint[] data { get; set; }
    //public  decimal[] data { get; set; }
    public string color { get; set; }
}

public class DowntimeAnalysisDatapoint
{
    public decimal dataValue { get; set; }
    public string url { get; set; }
}

Now you can use the logic described above by Lars Höppner. Once I have put my data into an object, I no longer need to know the index, since Kendo gives it to me.

I attach to the series clicked event by putting the following line into the graph setup:

seriesClick: function (e){rla_summaryBarClicked(e);}

The function that I call is as follows:

    function rla_detailBarClicked(e) {
        var item = e.dataItem;
        var url=item.url;
        // do stuff with url here...
        }
    }

All information that I stuffed into the dataItem is available to me.

Answer 3

I didn't find neither member e.series or e.uid in the event structure which is the next:

e: Object
_defaultPrevented: false
category: Tue Jul 05 2011 12:00:00 GMT+0400
element: S.fn.init[1]
isDefaultPrevented: function (){return this._defaultPrevented===!0}
preventDefault: function (){this._defaultPrevented=!0}
sender: vn.extend.init
value: 9.833887
__proto__: Object

But in the same time array item it has:

100: i.extend.o
DateTimeLocal: Sat Jul 02 2011 00:00:00 GMT+0400
DateTimeUTC: "/Date(1309554000000)/"
Value: 0.6488973049506388
_date_DateTimeLocal: Sat Jul 02 2011 00:00:00 GMT+0400
_events: Object
dirty: false
parent: function (){return r}
uid: "e5376556-c50b-4653-8889-5eb4ea7c2c28"

DateTime comparing also gives no result applying this block

var data = e.sender.dataSource.data();
for (var i = 0; i < data.length ; i++) {
    var d = data[i].DateTimeLocal;
    if (e.category == data[i].DateTimeLocal) {
        console.log("index " + i);
    }
}

Answer 4

For me this is what worked:

 seriesClick: function (e) {
      var data = e.series.data;
      for (var i = 0; i < data.length ; i++) {
      if (e.dataItem === data[i]) {
           console.log("index " + i);
      }
 }