CODEWITHSUNDEEP
javascriptjqueryxmlhighcharts
John k.
John k.

Reputation: 102

Parsing jQuery XML object into Highcharts

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.

Upvotes: 1

Views: 1182

Answers (1)

colestrode
colestrode

Reputation: 10668

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);
});

Upvotes: 1

Related Questions