Home » Featured, Headline, Software Development

Flot chart tips – Passing custom data to flot charts

20 December 2013 No Comment

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.


Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.

To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image