debugowanie domjs i highcharts

Question

Ok, więc ja próbuje przenieść dość skomplikowane highcharts renderingu skrypt od przedniego końca do przetwarzania po stronie serwera poprzez nodejs

Jego faktycznie poszedł całkiem dobrze. Mam "brak błędów" i wykres renderuje się z danymi do svg. Problem polega na tym, że gdy przejdę do widoku wyjściowego svg w przeglądarce, wszystko się popsuje. W firebug dostaję następujące "ostrzeżenie":

Unexpected value NaN parsing y attribute. 
Unexpected value NaN parsing x attribute. 
Unexpected value NaN parsing y attribute. 
Unexpected value NaN parsing x attribute. 

Moje pytanie brzmi: jak mogę to debugować? Nie mam pojęcia, gdzie wartość NaN jest obliczana w źródłach highcharts i nie ma żadnych tradycyjnych błędów js w konsoli. To, co zasadniczo jest tym samym kodem, obecnie działa dobrze w rzeczywistym środowisku przeglądarki, ale kończy się niepowodzeniem, gdy jest przetwarzane z nodejs i domjs, więc najprawdopodobniej ma to związek z tym problemem.

Oto mój skrypt węzeł:

# 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 

Moja konfiguracja highcharts jak wyświetlane w konsoli:

{ 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 Oto próbka danych, które obecnie pojawia się w series jako [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 problem nie wydaje się być spowodowany konfiguracją highcharts może, lecz raczej środowisko jsdom brakuje jakiś krytyczny komponent. Podejrzewam, że ponieważ podczas korzystania ze starszej kopii highcharts, problem nie istnieje, ale znowu mój skrypt nie jest zbudowany na starszą wersję i wykres renderuje z brakującymi funkcjami.

2.0.5 WORKS

2.2.5 nie

projekt musi być w 2.2.5

naprawdę Chcę tylko sposób na debugowania to

Answer 1

Nie mogę łatwo odtworzyć problemu, ale oto kilka wskazówek, które warto wykonać:

Highchart problem #1300:

Poprawiono błąd na eksporcie pusty wykres z powodu etykiety z atrybutem y NaN

Było trochę dyskusji o tym na Highsoft Forum.

Ten problem został rozwiązany w , co opisano na ich changelog.

Wydaje się być ostrzeżeniem, gdy dane są odbierane w większości przypadków, więc czy jesteś pewien, że te dane są zwracane?Może twój wykres jest ładowany zanim dane twojego obiektu zostaną zwrócone? Po prostu myślę głośno.

Answer 2

To nie jest rozwiązanie, tylko napiwek.

Uważam, że trzeba rozwiązać ten problem w mniejszy, sprawić, by działał i zwiększał go ostrożnie. Dostaniesz tam, gdzie coś łamie ci nogi. Rozpocznij świeże i ponownie zaczekaj, aż znajdziesz problem.