javascript - Parsing jQuery XML object into Highcharts -

i'm new here , javascript beginner please bear me.

i'm trying plot highcharts chart based on data in jquery xml object. actual data coming soap request purposes of fiddle pasted text variable now.

my jsfiddle example

just click button "create html table , plot" , scroll down see chart.

an example of xml data follows:

<rowset> <row>     <column0>0</column0>     <column1>101</column1>     <column2>us 1 le 1 bu 1</column2>     <column3>110</column3>     <column4>ceo</column4>     <column5>ledger usa pl</column5>     <column6>01-12</column6>     <column7>2012</column7>     <column8>20120101</column8>     <column10>240481</column10> </row> <row>     <column0>0</column0>     <column1>101</column1>     <column2>us 1 le 1 bu 1</column2>     <column3>121</column3>     <column4>us operations</column4>     <column5>ledger usa pl</column5>     <column6>01-12</column6>     <column7>2012</column7>     <column8>20120101</column8>     <column9>0</column9>     <column10>2026166</column10> </row> 

i able create x-axis categories displays accounting period (column6) in chart x-axis 01-12, 02-12 etc. :

var cats = [];     $($xml).find("row").each(function () { var column = $(this).find("column6").text();         if ($.inarray(column, cats)===-1) cats.push(column);     options.xaxis.categories = cats; }); 

so far good. i'm struggling though how build series. have (column4 should series label , column10 amount plotted each series , each period):

  $($xml).find("row").each(function(i, series) {     var seriesoptions = {         name: $(series).find("column4").text(),         data: []     };      $(series).find('column10').each(function(i, point) {         seriesoptions.data.push(         parseint($(point).text())          );     });      // add options     options.series.push(seriesoptions); }); 

this wrong because because i'm searching every row in xml object. result chart shows on 30 series displaying in period 01-12. i'm unsure how write plot each distinct value of column 4 (e.g. "ceo" , "us operations") each period, e.g. column6 (01-12, 02-12 etc.).

i hope makes sense , apologies long post. don't expect write code me syntax clues or suggestions or whatever appreciated.

you have couple of issues in code; addressed minor ones comments below. main issue adding new series each point within each callback.

instead, can create map of series name array of data points , add map iterate through xml. once xml processed, add data series configuration object.

working demo

$('input[type=button]').click(function plotchart() {     var cats = [], //x-axis categories         seriesdatamap = {}; //map of series name data      //$xml jquery object, no need re-wrap     //also, combine processing single each callback, faster     $xml.find("row").each(function () {         var $row = $(this),             category = $row.find("column6").text(),             seriesname = $row.find("column4").text(),             datavalue = parseint($row.find('column10').text(), 10);          //get distinct values column 6 (accounting period):         if ($.inarray(category, cats) === -1) {             cats.push(category);         }          if (seriesdatamap[seriesname] === undefined) {             //if haven't seen series before, add empty array our map             seriesdatamap[seriesname] = [];         }         //add data point series our map         seriesdatamap[seriesname].push(datavalue)     });      //add categories     options.xaxis.categories = cats;      //add series data     for(var seriesname in seriesdatamap) {         options.series.push({             name: seriesname ,             data: seriesdatamap[seriesname]         });     }      //plot chart, no need wrap in $(function(){...}); callback since in click hanlder     $('#container').highcharts(options); });