Adding custom attributes to flot data

Question

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.

Answer 1

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!

Answer 2

You got that right. You can use custom data parameters to your liking

data = [{ data:data1, label:"fixed", lines:{show:true}, my_custom_attribute: 'somedata'}];

Than you can get your custom data as follows

$("#placeholder").bind("plotclick", function (event, pos, item) {
        if (item) { 
            alert(item.series.my_custom_attribute);
        }
    });

FIDDLE

Answer 3

console.log(data[item.seriesIndex]);

it works for me...

For the newer version(0.8) the custom variable directly available in series level like

console.log(item.series.my_custom_attribute);

But for lesser version seriesIndex way should work..

Would like to Thanks @Milk Man