Menu
Nadzweb.com
Nadzweb.com

Flot chart tips – Passing custom data to flot charts

Posted on December 20, 2013January 21, 2014 by admin

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.

passing_flot_data

  • flot
  • flot charts
  • javascript
  • jquery
  • Leave a Reply Cancel reply

    Your email address will not be published. Required fields are marked *

    *
    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

    Tags

    .htaccess angular angular2 angular2-pipes angular4 angularjs apache bigdata blockchain children codeigniter computer graphics ethereum flot flot charts funny hadoop http javascript jquery kanban lena linux love math mathematics microsoft misc node js php phpframework php frameworks postgres pun-intended python react sass scrum scss silverstripe software ssl story valentines day wordpress

    Archives

    Recent Posts

    • Install only Postgres client 11 on Ubuntu 18.04
    • PostgreSQL – Granting access to users
    • Querying JSONB Postgres fields in SQLAlchemy
    • Angular – Writing unit tests for setTimeout in functions
    • Angular 6 – getting previous url from angular router
    ©2021 Nadzweb.com | Powered by WordPress & Superb Themes