[SOLVED] Get ID from dataset when clicking on a series using Dimple JS

Get ID from dataset when clicking on a series using Dimple JS

I have a pie chart created with Dimple.js with a dataset with this structure: Id, Value, Text.

I can display the pie chart just fine.

What I can't get to work is clicking on a piece of the pie and get the Id for that piece. I need this to navigate the user to another page with this Id. How is this possible?

This is the code I have.

var svg = dimple.newSvg("#PieChart", "100%", "300px");
var data = [
   {"Id":1, "Value":10, "Text":"Apples"},
   {"Id":2, "Value":15, "Text":"Oranges"},
   {"Id":3, "Value":20, "Text":"Pears"}];
var myChart = new dimple.chart(svg, data);
myChart.addMeasureAxis("p", "Value");
var mySeries = myChart.addSeries("Text", dimple.plot.pie);
mySeries.addEventHandler("click", function (e) {
   alert("I want the Id.");
});
myChart.draw();

Here is a Fiddle

Solution

I don't think there is any direct way. Here is what i tried may be this can get you through

mySeries.addEventHandler("click", function (e) {
      var key = d3.select(e.selectedShape[0][0]).data()[0].aggField
[0];//get the text on which it is clicked
    //find the text from the data array
        var value = data.find(function(d){ return d.Text == key});
        //value has everything
    alert("I got the Id " + value.Id);
});

working code here