Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Flot 0.7 running on node
require('jsdom').env({
html: '<html><body></body></html>', // URL or markup required
scripts: [
// can't use jQuery 1.7+, atm, b/c of https://github.com/NV/CSSOM/issues/29
'http://code.jquery.com/jquery-1.6.4.min.js',
// Flot 0.7 patched to support node-canvas
'https://raw.github.com/gist/1364155/8d9161159d1e2bbed1a34aad90dd6d7af07a7ccf/jquery.flot-on-node.js'
],
done: function (errors, window)
{
if (errors) { /* do something */ }
// no `window` in node
var $ = window.$, jQuery = window.jQuery;
// differences from typical flot usage
// jQuery (loaded via jsdom) can't determine element dimensions, so:
// width and height options are required
var options = { width: 600, height: 300 };
// we can just use a stub jQuery object
var $placeholder = $('');
// Flot data format and options are unchanged
var data = [{
data: createRandomData(),
lines: {show: true, fill: true}
}, {
data: createRandomData(),
lines: {show: false},
bars: {show: true}
}, {
data: createRandomData(),
lines: {show: true},
points: {show: true}
}];
// call Flot as usual
var $plot = $.plot($placeholder, data, options)
// get the node-canvas instance
var nodeCanvas = $plot.getCanvas();
// write the file
var fs = require('fs');
nodeCanvas
.toBuffer(function (error, buffer) {
if (error) throw error;
fs.writeFile(__dirname + '/flot.png', buffer);
})
}
});
function createRandomData()
{
for (var i = 10, data = []; --i;)
data.push([i, parseInt(Math.random() * 30)]);
return data;
}
@risicle

This comment has been minimized.

Copy link

risicle commented Jul 9, 2012

Only problem I see with this is it won't work with flot's legends, which are done with an html table. Wonder if there's any solution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.