Generación de gráficos HighStock del lado del servidor con NodeJS

Question

Estoy usando HighStock para generar algunos gráficos en el navegador. Pero ahora quiero almacenar algunos de ellos en el servidor. Así que sé que HighCharts se puede exportar al servidor, pero prefiero utilizarlo de otra forma si es posible. La cuestión es ejecutar HighStock en el servidor y convertir el svg a algún formato de imagen y luego guardarlo allí.

Google rápido me da this page. La combinación de HighCharts y NodeJS parece ser la manera correcta, pero esta solución no funciona para las versiones más nuevas de HighCharts. De manera más precisa, utilizando jsdom módulo (v0.2.10 - la última) en NodeJS con HighStock v1.0.2 (ver el siguiente código):

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

genera una excepción:

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

De alguna manera estos dos las bibliotecas no parecen funcionar juntas. Así que esto puede funcionar con versiones anteriores de HighStock, pero en realidad necesito HighStock v1.0.2.

¿Hay alguna solución para este problema? ¿Alguna mejor biblioteca que jsdom? ¿O algunos trucos extraños pero funcionales? Cualquier idea apreciada. :)

// EDITAR

Gracias a Recoder que las han arreglado para conseguir que funcione. Lo principal era agregar el indicador forExport a las opciones (evitando excepciones). Desafortunadamente, esto generó el gráfico pero no actualizó al titular. Logré ponerlo en funcionamiento después de agregar el módulo exporting (parte del paquete HighStock). El código de trabajo completo es el siguiente:

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!"); 
      }    
     }); 
    } 
}); 

El gráfico no es tan buena como debería ser (por ejemplo, etiquetas mal colocado), pero tal vez es una cuestión de opciones de ajuste. ¡Al menos funciona!

Answer 1

que puede ser fijado por izar la bandera "forExport" en las opciones del objeto:

options.chart.forExport = true; 

Answer 2

He intentado recrear tu ejemplo y obtengo jQuery y Highcharts cargados con jsdom. Parece que Highcharts intenta llamar createElement con un fragmento de HTML:

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

Esto se parece a pescado. No estoy seguro de cómo funciona en el navegador: tampoco puedo llamar al createElement con eso en mi navegador (Chromium).

Answer 3

que sustituyen con Node.js PhantomJS que hizo un buen trabajo, como se describe en Generating HTML Canvas image data server-side? (ejemplo es de jQplot, pero las obras para Highchart también.)