Ok, so I am attempting to move a fairly complex highcharts rendering script from the front end to server-side processing via nodejs
Its actually gone fairly well. I have "no errors" and the chart is rendering out with the data into svg. The problem is when I go to view the outputted svg in the browser its all messed up. In firebug I get the following "warning":
Unexpected value NaN parsing y attribute.
Unexpected value NaN parsing x attribute.
Unexpected value NaN parsing y attribute.
Unexpected value NaN parsing x attribute.
My question is, how can I go about debugging this? I have no idea where the NaN value is being calculated in highcharts source, and get no traditional js errors in the console. What is essentially the same code is currently working fine in an actual browser environment, but is failing when processed with nodejs and domjs, so its likely the issue has to do with that.
Here is my node script:
# base libs
{jsdom} = require 'jsdom'
jade = require 'jade'
fs = require 'fs'
# chart and settings
Chart = require './classes/Chart'
Config = require './config/config.base'
HighchartSettings = require './config/config.highchart
# curl -d "width=200px&height=100px&device=mobile&resolution=DAILY&type=areaSpline" http://localhost:8000/chart
app.post '/chart', (req, res) ->
# get post params
jadeOptions =
height : req.param('height', null)
width : req.param('width', null)
isEnglish = req.param 'isEnglish', true
resolution = req.param 'resolution', null
chartType = req.param 'type', null
device = if req.param('device', 'mobile') is 'mobile' then { mobile : true, tablet : false} else { mobile : false, tablet : true }
# render dom from jade
jade.renderFile 'views/chart.jade', jadeOptions, (err, html) ->
# setup virtual browser
dom = jsdom html
window = dom.createWindow()
{host} = req.headers
{document} = window
window.console.log = console.log
# get localization localization
window.localization = Localization isEnglish
# generate chart settings
configSettings = Config device, window.localization
configSettings = configSettings[resolution][chartType]
chartSettings = HighchartSettings device
# add jquery
jsdom.jQueryify window, 'http://'+host+'/jquery.1.7.2.min.js', ->
{$} = window
# add highcharts lib to virtual browser
highchartsjs = document.createElement 'script'
highchartsjs.type = 'text/javascript'
highchartsjs.src = 'http://'+host+'/highcharts.custom.js'
highchartsjs.onload = ->
{Highcharts} = window
# don't mess with me, highcharts will cut you!
Highcharts.setOptions
global :
useUTC : true
chartDailyJSONDummy = JSON.parse 'there is real json here, I have removed it for the sake of SO'
try
chart = new Chart configSettings, chartSettings, chartDailyJSONDummy, Highcharts, ->
output = $('#chartWrapper').html()
res.setHeader "Content-Type", "text/html"
res.write output
res.end()
console.log 'Chart sent \n'
catch err
console.log err
res.send 'error, see log \n'
document.body.appendChild highchartsjs
My highcharts configuration as displayed in the console:
{ chart:
{ renderTo: 'chartContainer',
backgroundColor: 'none',
events: { load: [Function] },
animation: false,
renderer: 'SVG' },
title:
{ text: 'Today vs Yesterday',
style: { color: 'white', fontSize: '17px', lineHeight: '22px' },
margin: 18,
y: 18 },
subtitle: { text: null },
xAxis:
{ type: 'datetime',
labels: { step: 12, formatter: [Function], style: [Object], y: 20 },
tickInterval: 3600000,
tickLength: 6,
tickWidth: 2,
startOnTick: true,
endOnTick: true,
maxPadding: 0 },
yAxis:
[ { title: [Object], labels: [Object] },
{ title: [Object], labels: [Object], linkedTo: 0, opposite: true } ],
legend: { enabled: false },
credits: { enabled: false },
tooltip: { enabled: false },
plotOptions:
{ areaspline:
{ color: '#19b6f4',
marker: [Object],
enableMouseTracking: false },
spline:
{ color: '#d01b7c',
marker: [Object],
enableMouseTracking: false } },
series:
[ { type: 'areaspline', data: [Object], animation: false },
{ type: 'spline', data: [Object], animation: false } ] }
UPDATE Here is a sample of the data that currently appears in series as [Object]
[ [ 1363562100000, 0.358 ],
[ 1363563000000, 0.498 ],
[ 1363563900000, 0.241 ],
[ 1363564800000, 0.211 ],
[ 1363565700000, 0.426 ],
[ 1363566600000, 0.58 ],
[ 1363567500000, 0.195 ],
[ 1363568400000, 0.217 ],
[ 1363569300000, 0.185 ],
[ 1363570200000, 0.19 ],
[ 1363571100000, 0.223 ],
[ 1363572000000, 0.18 ],
[ 1363572900000, 0.164 ],
[ 1363573800000, 0.188 ],
[ 1363574700000, 0.16 ],
[ 1363575600000, 0.166 ],
[ 1363576500000, 0.188 ],
[ 1363577400000, 0.154 ],
[ 1363578300000, 0.162 ],
[ 1363579200000, 0.1715 ],
[ 1363580100000, 0.1715 ],
[ 1363581000000, 0.173 ],
[ 1363581900000, 0.189 ],
[ 1363582800000, 0.151 ],
[ 1363583700000, 0.179 ],
[ 1363584600000, 0.288 ],
[ 1363585500000, 0.496 ],
[ 1363586400000, 0.175 ],
[ 1363587300000, 0.2 ],
[ 1363588200000, 0.185 ],
[ 1363589100000, 0.439 ],
[ 1363590000000, 1.19 ],
[ 1363590900000, 0.495 ],
[ 1363591800000, 0.294 ],
[ 1363592700000, 0.286 ],
[ 1363593600000, 0.28 ],
[ 1363594500000, 0.845 ],
[ 1363595400000, 2.055 ],
[ 1363596300000, 2.03 ],
[ 1363597200000, 1.611 ],
[ 1363598100000, 1.936 ],
[ 1363599000000, 1.499 ],
[ 1363599900000, 1.876 ],
[ 1363600800000, 1.699 ],
[ 1363601700000, 1.667 ],
[ 1363602600000, 1.862 ],
[ 1363603500000, 1.496 ],
[ 1363604400000, 2.312 ],
[ 1363605300000, 2.056 ],
[ 1363606200000, 0.878 ],
[ 1363607100000, 1.339 ],
[ 1363608000000, 0.69 ],
[ 1363608900000, 1.259 ],
[ 1363609800000, 0.884 ] ]
UPDATE 2 Issue does not seem to be caused by may highcharts configuration, but rather the jsdom environment missing some critical component. I suspect this because when using an older copy of highcharts, the problem isn't there, but then again my script is not structured for the older version and the chart renders with missing features.
2.0.5 WORKS
2.2.5 DOES NOT
project needs to be in 2.2.5
REALLY I JUST WANT A WAY TO DEBUG THIS