Parsing jQuery XML object into Highcharts

Question

I'm new here and a JavaScript beginner so please bear with me.

I'm trying to plot a highcharts chart based on some data in a jQuery xml object. The actual data is coming from a SOAP request but for purposes of my fiddle I just pasted it into a text variable for now.

my jsfiddle example

Just click the button "Create HTML Table and Plot" and scroll down to see the chart.

An example of my xml data is as 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 am able to create the x-axis categories which displays the accounting period (Column6) in the chart x-axis as 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 so good. I'm struggling though with how to build the series. This is what I have currently (Column4 should be the series label and Column10 is the amount to be plotted for each series and 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 it to the options
    options.series.push(seriesOptions);
});

This is obviously wrong because because I'm just searching every row in the xml object. As a result my chart shows up with over 30 series all displaying in period 01-12. I'm just unsure how to write this so that I get a plot for each distinct value of Column 4 (e.g. "CEO" and "US Operations") for each period, e.g. Column6 (01-12, 02-12 etc.).

I hope this makes sense and apologies for the long post. I don't expect anyone to write the code for me but any syntax clues or suggestions or whatever would be greatly appreciated.

looks like if you are able to convert your xml to json you will be able to create your series have you seen this fyneworks.com/jquery/xml-to-json/#tab-Usage — Mina Gabriel
– Mina Gabriel, Commented Sep 3, 2013 at 19:30

colestrode · Accepted Answer · 2013-09-03 19:56:01Z

You have a couple of issues in your code; I addressed the minor ones with comments below. The main issue is that you are adding a new series for each point within the each callback.

Instead, you can create a map of series name to an array of data points and add to that map as you iterate through the XML. Once the XML is processed, add the data to the series configuration object.

Working Demo

$('input[type=button]').click(function plotChart() {
    var cats = [], //x-axis categories
        seriesDataMap = {}; //map of series name to data

    //$xml is already a jQuery object, no need to re-wrap it
    //also, combine all processing into a single each callback, this will be 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 from Column 6 (Accounting Period):
        if ($.inArray(category, cats) === -1) {
            cats.push(category);
        }

        if (seriesDataMap[seriesName] === undefined) {
            //if we haven't seen this series before, add an empty array to our map
            seriesDataMap[seriesName] = [];
        }
        //add this data point for this series to 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 to wrap in a $(function(){...}); callback since this is already in a click hanlder
    $('#container').highcharts(options);
});

THANK YOU!!! It's going to take me a while to digest this but I greatly appreciate it. I am still learning so this is a tremendous help. Thank you!

Collectives™ on Stack Overflow

Parsing jQuery XML object into Highcharts

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related