Geek Answers Handbook

Creating ServerStreet HighStock Charts Using NodeJS

I use HighStock to create some diagrams in the browser. But now I want to save some of them on the server. Therefore, I know that HighCharts can be exported to the server, but I would prefer to use some other method, if possible. The point is to launch HighStock on the server and convert the SVG to some image format, and then save it there.

Quick googling gives me this page . The combination of HighCharts and NodeJS seems correct, but this solution does not work for newer versions of HighCharts. More precisely, using the jsdom module (v0.2.10 - the last one) in NodeJS with HighStock v1.0.2 (look at the following code):

var jsdom = require('jsdom'); var fs = require('fs'); var jQuery = fs.readFileSync('./js/jquery-1.7.min.js').toString(); var Highstock = fs.readFileSync('./js/highstock.js').toString(); jsdom.env({ html: '<div id="container"></div>', src: [ jQuery, Highstock ], done: function(errors, window) { if (errors) return console.log(errors); var Highcharts = window.Highcharts; var chart = new Highcharts.Chart(options); } });

throws an exception:

 Error: Invalid character: Invalid character in tag name: <

Somehow these two libraries do not seem to work together. Thus, this may work with older versions of HighStock, but in fact I need HighStock v1.0.2.

Is there any solution to this problem? Some better jsdom ? Or some strange but working tricks? Any idea is appreciated. :)

// EDIT

Thanks to ReCoder, I managed to get it to work. The main forExport was to add the forExport flag to the options (excluding exceptions). Unfortunately, this generated a chart, but did not update the holder. I managed to get it working after adding the exporting module (part of the HighStock package). The full working code is as follows:

 var jsdom = require('jsdom'); var fs = require('fs'); var jQuery = fs.readFileSync('./js/jquery-1.7.min.js').toString(); var Highstock = fs.readFileSync('./js/highstock.src.js').toString(); var Exporting = fs.readFileSync('./js/exporting.src.js').toString(); jsdom.env({ html: '<div id="container"></div>', src: [ jQuery, Highstock, Exporting ], done: function(errors, window) { if (errors) return console.log(errors); var Highcharts = window.Highcharts; var chart = new Highcharts.Chart({ chart: { renderTo: 'container', animation: false, forExport: true }, exporting: { enabled: false }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, series: [{ animation: false, name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }, { animation: false, name: 'New York', data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] }, { animation: false, name: 'Berlin', data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] }, { animation: false, name: 'London', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] }] }); var svg = chart.getSVG(); fs.writeFile("./test.svg", svg, function(err) { if(err) { console.log(err); } else { console.log("The file was saved!"); } }); } });

The diagram is not as good as it should be (for example, shortcuts with shortcuts), but perhaps this is a matter of settings. At least it works!

+7
source share
3 answers

This can be "forExport" raising the "forExport" flag in the options object:

 options.chart.forExport = true;
+1
source

I tried to recreate your example and I get jQuery and Highcharts loaded by jsdom. It seems that Highcharts is trying to call createElement using an html fragment:

 createElement('<div filled="f" stroked="f" style="position: absolute;left:0;top:0;width:10px;height:10px;"/>')

It looks suspicious. I'm not sure how this works in the browser - I cannot call createElement what is in my browser (Chromium).

0
source

I replaced node.js with phantomJs, which did a good job as described in Creating HTML data with server-side images? (example from jQplot, but also works for highchart.)

0
source

More articles:


All Articles