debugging domjs and highcharts

Question

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

Answer 1

It's not possible for me to easily reproduce the issue, but here are some leads you might want to follow:

Highchart issue #1300:

Fixed error on exporting an empty chart due to labels with y attribute of NaN

There was some discussion about it on the Highsoft Forum.

This issue has been fixed in 2.3.5 as reported on their changelog.

It appears to be a warning when null data is received in most cases, so are you sure this data is returned? Maybe your chart is loaded before your object data is returned? I'm just thinking out loud.