Dygraph: DataPoint Onclick Getting Row Index level information

Question

I am using Dygraph. I have requirement that when I click a datapoint I want to display Row Index of the array / ID level information. Please see the working example below When I click any datapoint, I want to display the ID. In the first datapoint the result displayed is

ID = 89,
Row Index = 1.

g = new Dygraph(
    document.getElementById("graph"),
    // For possible data formats, see http://dygraphs.com/data.html
    // The x-values could also be dates, e.g. "2012/03/15"
    "X,Y,Z,ID\n" +
    "1,0,3,89\n" +
    "2,2,6,56\n" +
    "3,4,8,\n" +
    "4,6,9,\n" +
    "5,8,9,\n" +
    "6,10,8,\n" +
    "7,12,6,\n" +
    "8,14,3,\n",
    {
        visibility: [ true, true, false ],
        legend: 'always',
        animatedZooms: true,
        title: 'dygraphs chart template',
        pointClickCallback: function(e, pt) {
            alert(JSON.stringify(pt));
        }
    }
);

Answer 1

You can use pt.idx to get the row number and getValue() to query the data in another column for that row. In your case:

pointClickCallback: function(e, pt) {
    alert(this.getValue(pt.idx, 3));
}

here's a working fiddle.