I am trying to populate a highchart series from an xml source using jQuery. The XML file is an export from RRDTool and has the following format:

<data>
<row><t>1347559200</t><v>2.1600000000e+01</v></row>
<row><t>1347562800</t><v>2.1504694630e+01</v></row>
<row><t>1347566400</t><v>2.1278633024e+01</v></row>
.
.
.
</data>

My approach was to load the data using jQuery and push the series to the chart:

$.ajax({
      type: "GET",
      url: "data/data.xml",
      dataType: "xml",
      success: function(xml) {
        var series = {  data: []
                    };

        $(xml).find("row").each(function()
        {
            var t = parseInt($(this).find("t").text())*1000
            var v = parseFloat($(this).find("v").text())
            series.data.push([t,v]);
        });
        options.series.push(series);
      }
  });

I end up getting the following error:

Unexpected value NaN parsing y attribute

I created a JSFiddle to demonstrate the code: /

I am trying to populate a highchart series from an xml source using jQuery. The XML file is an export from RRDTool and has the following format:

<data>
<row><t>1347559200</t><v>2.1600000000e+01</v></row>
<row><t>1347562800</t><v>2.1504694630e+01</v></row>
<row><t>1347566400</t><v>2.1278633024e+01</v></row>
.
.
.
</data>

My approach was to load the data using jQuery and push the series to the chart:

$.ajax({
      type: "GET",
      url: "data/data.xml",
      dataType: "xml",
      success: function(xml) {
        var series = {  data: []
                    };

        $(xml).find("row").each(function()
        {
            var t = parseInt($(this).find("t").text())*1000
            var v = parseFloat($(this).find("v").text())
            series.data.push([t,v]);
        });
        options.series.push(series);
      }
  });

I end up getting the following error:

Unexpected value NaN parsing y attribute

I created a JSFiddle to demonstrate the code: http://jsfiddle/GN56f/

• javascript
• jquery
• xml
• highcharts

• +1 for creating a fiddle – Adriano Carneiro Commented Sep 14, 2012 at 20:58
• Could you add a console.log statement after your array is populated and verify that all of the v tags are numeric? – marteljn Commented Sep 14, 2012 at 21:03
• 1 @Adrian a fiddle that doesn't reproduce the problem is useless – Musa Commented Sep 14, 2012 at 21:06
• @Musa Yeah, I tried to run it, but there are problems with cross domain requests. What a let down... – Adriano Carneiro Commented Sep 14, 2012 at 21:09

2 Answers 2

Aside from the cross-domain issue, the error is due to there being an existing empty series in the plot options. The initial series in the options should be set to:

series: []

instead of:

series: [{ name: 'Temperature', data: [] }]

The subsequent call to options.series.push(series); merely adds a new series leaving the empty one unchanged.

Problems:

• you forgot var before declare options and chart
• forgot ; after end options
• Hava you tried to log options before pass to Highcharts ? You're passing the following series.
  

That's the expected result ? I think no.

series: [{
    name: 'Temperature',
    data: []
}, {
    data: [// data from xml]
}]

• You're creating the chart before plete the request, so options.series.data.push will not work, you have to use setData to update dynamically, but there's a problem, you don't know how long the request you take, so I suggest you to create the chart inside the success.

Try the following.

success: function(xml) {
    $('row', xml).each(function() {
        options.series.data.push([t,v]);
    });
    //@todo: declare chart as global before the ajax function
    chart = new Highcharts.Chart(options);
}