PhantonJS Highcharts

piechart.js

var system = require('system');
var page = require('webpage').create();
var fs = require('fs');

page.injectJs("jquery-1.8.2.min.js") || ( console.log("Unable to load jQuery") && phantom.exit());
page.injectJs("highcharts.js") || ( console.log("Unable to load Highcharts") && phantom.exit());
page.injectJs("exporting.js") || (console.log("Unable to load Highcharts") && phantom.exit());

page.onConsoleMessage = function (msg) {
    console.log(msg);
};

//phantom.injectJs(system.args[1]) || (console.log("Unable to load json file") && phantom.exit());

var width = 400, height = 400;
if (system.args.length == 4) {
    width = parseInt(system.args[2], 10);
    height = parseInt(system.args[3], 10);
}

console.log("Loaded result file");

// Build up result and chart size args for evaluate function
var evalArg = {
   //result: result,
   width: width,
   height: height
};

var svg = page.evaluate(function(opt) {

    // Inject container, so Highcharts can render to
    $('body').append('<div id="container"></div>');

    // var seriesArray = [];
    //     $.each(opt.result.drivers, function(idx, driver) {
    //          seriesArray.push({
    //                            name: driver.name,
    //                            data: driver.laps,
    //                            color: driver.color,
    //                            animation: false
    //          });
    //     });
    
    var chart = new Highcharts.Chart({
               chart: {
                   renderTo: 'container',
                   plotBackgroundColor: null,
                   plotBorderWidth: null,
                   plotShadow: false,
                   animation: false
               },
               title: {
                   text: 'Browser market shares at a specific website, 2010'
               },
               tooltip: {
                   pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                   percentageDecimals: 1
               },
               plotOptions: {
                   pie: {
                       allowPointSelect: true,
                       cursor: 'pointer',
                       dataLabels: {
                           enabled: true,
                           color: '#000000',
                           connectorColor: '#000000',
                           formatter: function() {
                               return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                           }
                       }
                   }
               },
               series: [{
                   type: 'pie',
                   name: 'Browser share',
                   data: [
                       ['Firefox',   45.0],
                       ['IE',       26.8],
                       {
                           name: 'Chrome',
                           y: 12.8,
                           sliced: true,
                           selected: true
                       },
                       ['Safari',    8.5],
                       ['Opera',     6.2],
                       ['Others',   0.7]
                   ]
               }]
           });

       console.log("Exported to SVG");
       return chart.getSVG();
}, evalArg);

fs.isFile("/Users/sunil/chart.svg") && fs.remove("/Users/sunil/chart.svg");
console.log("Saved SVG to file");
fs.write("/Users/sunil/chart.svg", svg);
phantom.exit();