Adding custom attributes to flot data

The Problem

It would be very convenient when I am passing data into flot if I could pass some supplementary data which I want to access when the plotclick event is triggered.

My Data

Here is some standard data;

[{label: 'first', data: 5, color: '#123'},
{ label: 'first', data: 10, color: '#456'}]

I want to be able to do something like;

[{label: 'first', data: 5, color: '#123', my_custom_attribute: 'some data'},
{ label: 'first', data: 10, color: '#456', my_custom_attribute: 'some more data'}]

So that inside of my plotclick event I could do;

$('chart').bind('plotclick', function(event, pos, item) {
  console.log(item.series.my_custom_attribute) //Or something to that effect
});

What I have tried

I have tried just inserting the above and looking at the returned contents of item inside of my plotclick event, it doesn't appear to store my_custom_attribute anywhere.

I have read through the documentation at https://github.com/flot/flot/blob/master/API.md and couldn't gleam any relevant information.

I have searched google and here for answers and couldn't find one that suited my needs.

Update

Thanks to Khawer Zeshan for providing a solution, this still isn't working for me;

Here is the data I am passing in;

[{breakdown: "test", color: "#00A4D3", data: 1.5, label: "History"},
 {breakdown: "test", color: "#1464F6", data: 0, label: "Geography"}]

But the breakdown attribute doesn't appear in the output for item.

Everything else about the chart appears to work.

Solution

Try this

If you look up the custom data via the original data variable you used when initializing the chart. the data will still be there. For some reason the data cannot be accessed directly through item ... it seems to get deleted.

var data = [
{ label: "Series1",  data: [[1,1]],  myData: "test 1"},
{ label: "Series2",  data: [[1,1]],  myData: "test 2"},
{ label: "Series3",  data: [[1,1]],  myData: "test 3"},
{ label: "Series4",  data: [[1,1]],  myData: "test 4"},
{ label: "Series5",  data: [[1,1]],  myData: "test 5"},
{ label: "Series6",  data: [[1,5]],  myData: "test 6"}
];


$.plot($("#placeholder"), data, {
    series: {
        pie: { 
            show: true
        }
    },
    grid: {
        hoverable: true,
        clickable: true
    }
});



$("#placeholder").bind("plotclick", function (event, pos, item) {
if (item) { 
       console.log(data[item.seriesIndex]);
    }
});

Hope that helps!