Created
November 14, 2011 16:52
-
-
Save jfsiii/1364421 to your computer and use it in GitHub Desktop.
Flot 0.7 running on node
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.