Skip to content

Instantly share code, notes, and snippets.

@jfsiii
Created November 30, 2010 12:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jfsiii/721613 to your computer and use it in GitHub Desktop.
Save jfsiii/721613 to your computer and use it in GitHub Desktop.
Need to replace text plugin with one that uses native canvas text methods, but this works as POC
console.log('flot init');
var document = require("jsdom").jsdom(),
window = document.createWindow(),
jQuery = require('jquery').create(window),
fs = require('fs'),
flot_location = 'http://jsno.de/javascripts/jquery.flot.svn.js',
text_location = 'http://jsno.de/javascripts/jquery.flot.text.js';
window.Canvas = require('canvas');
loadScript(flot_location, function (){ loadScript(text_location, onPluginLoaded); });
function onPluginLoaded()
{
var data = getFlotData(),
options = getFlotOptions(),
placeholder = jQuery(''), // empty jQuery object
plot = jQuery.plot(placeholder, data, options),
node_canvas = plot.getCanvas(),
img_dir = __dirname +'/public/images',
img_name = 'flot.png',
out = fs.createWriteStream(img_dir +'/'+ img_name),
stream = node_canvas.createPNGStream();
stream.on('data', function ( chunk ) {
out.write(chunk);
});
};
function getFlotData()
{
var d1 = [], d3 = [], d4 = [], d5 = [], d6 = [];
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
var i, l = 14;
for (i = 0; i < l; i += 0.5) d1.push([i, Math.sin(i)]);
for (i = 0; i < l; i += 0.5) d3.push([i, Math.cos(i)]);
for (i = 0; i < l; i += 0.1) d4.push([i, Math.sqrt(i * 10)]);
for (i = 0; i < l; i += 0.5) d5.push([i, Math.sqrt(i)]);
for (i = 0; i < l; i += 0.5 + Math.random()) d6.push([i, Math.sqrt(2*i + Math.sin(i) + 5)]);
var data = [
{ data: d1, label: "one", lines: { show: true, fill: true } },
{ data: d2, label: "two", bars: { show: true } },
{ data: d3, label: "three", points: { show: true } },
{ data: d4, label: "four", lines: { show: true } },
{ data: d5, label: "five", lines: { show: true }, points: { show: true } },
{ data: d6, label: "six", lines: { show: true, steps: true } }
];
return data;
}
function getFlotOptions()
{
var options = {
width: 600, height: 300,
xaxis: {labelWidth: 50, labelHeight: 20},
yaxis: {labelWidth: 50, labelHeight: 20},
grid: {
backgroundColor: "#eee",
canvasText: {show: true, font: "sans 9px"},
legend: {
position: "sw",
backgroundColor: "#de4",
backgroundOpacity: 0.35
}
}
};
return options;
}
function loadScript( location, callback )
{
var script = document.createElement("script");
script.src = location;
if (callback) script.onload = callback;
document.head.appendChild(script);
return script;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment