jfsiii/node-flot-example.js

## node-flot-example.js

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;
}

	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;
	}