Flot chart tips – Passing custom data to flot charts

This post entails passing custom data in flot charts. It is assumed that the reader has thorough understanding of flot charts. Assume we have a dataset as below.

var d1 = [];
var myFruitsCustomData = [];
var fruits = ['apple','banana', 'oranges', 'watermelon', 'peaches',
 'grapes', 'nectarines', 'avacado', 'gala apples', 'pawpaw'];
			
for (var i = 0; i < 10; i++) {
   d1.push([i, Math.sin(i)]);
}
for(var j = 0; j < 10; j++) myFruitsCustomData.push([j, fruits[j]]);

Now we plot the graph using the code below and pass myFruitCustomData and reference it as fruits.

$.plot($("#placeholder"), [ { data:d1, fruits : myFruitsCustomData } ],
{	
  series: {
	lines: { show: true },
	points: { show: true }
},
grid: {
	hoverable: true
}
});

The fruits data is accessed in the tooltip from the series label as item.series.fruits. Individual items are accessed as item.series.fruits[item.dataIndex][1].

Refer to the output and download the above example. Hope this helps you guys! ta.