Getting data from XML to update Highchart using JQuery

Question

I have used Highcharts to construct the BoxPlot http://www.highcharts.com/. The data for this Chart comes from the XML document with following structure

<spex>
<NAME>A</NAME>
<PPP>0.997</PPP>
<QQQ>0.600</QQQ>
.......</spex>

Now I have used xml to json jquery plugin to get the data array from the xml file. As per instruction here I have used following code to convert the data $.get('include/Yspark/spark.xml', function(xml){ var boxvalues = $.xml2json(xml);

When I watch the array returned by boxvlaues using firebug I get following array

NAME    ["A", "B", "C", 2 more...]
PPP ["0.997", "0.450", "0.230", 2 more...]
QQQ ["0.600", "0.441", "0.994", 2 more...]

However when I try go set this array in the chart data array, nothing gets displayed in the data section (main

whisker plot) however the NAME on the x-axis gets clubbed to the first whisker like [A,B,C,D] instead of

representing the four whiskers.

Here is what I have done

`$.get('include/Yspark/spark.xml', 
function(xml){ 
var boxvalues = $.xml2json(xml); 

$(function () {
    $('#container').highcharts({

        chart: {
            type: 'boxplot'
        },

        title: {
            text: 'Highcharts Box Plot Example'
        },

        legend: {
            enabled: false
        },

        xAxis: {
            categories: [boxvalues.NAME],
            title: {
                text: 'Experiment No.'
            }
        },

        yAxis: {
            title: {
                text: 'Observations'
            }  
        },

        series: [{
            name: 'Observations',
            data: [boxvalues.PPP,boxvalues.QQQ,boxvalues.RRR,boxvalues.SSS,boxvalues.TTT],
            tooltip: {
                headerFormat: '<em>Experiment No {point.key}</em><br/>'
            }
        }, ]


});
});
  });`

Have you tried putting doc-ready first and then calling $.get inside of $(function () — Sumit
– Sumit, Commented Nov 30, 2013 at 8:28

Youbaraj Sharma · Accepted Answer · 2013-11-30 08:23:34Z

1

Probably double quotes around the values PPP ["0.997", "0.450", "0.230", 2 more...] are causing the problem. Try using JSON.parse something like this (I have not tested but this should work)

$.get('include/Yspark/spark.xml', 
function(xml){ 
var boxvalues = $.xml2json(xml); 

$(function () {
    $('#container').highcharts({

        chart: {
            type: 'boxplot'
        },

        title: {
            text: 'Highcharts Box Plot Example'
        },

        legend: {
            enabled: false
        },

        xAxis: {
            categories: boxvalues.NAME,
            title: {
                text: 'Experiment No.'
            }
        },

        yAxis: {
            title: {
                text: 'Observations'
            }  
        },

        series: [{
            name: 'Observations',
            data: [


               JSON.parse("["+boxvalues.PPP+"]"),
                JSON.parse("["+boxvalues.QQQ+"]"),
                JSON.parse("["+boxvalues.RRR+"]"),
                JSON.parse("["+boxvalues.SSS+"]"),
              JSON.parse("["+boxvalues.TTT+"]")
            ],
            tooltip: {
                headerFormat: '<em>Experiment No {point.key}</em><br/>'
            }
        }, ]


});
});
  });

Also note that I have removed the [] from boxvalues.NAME as this might be causing the categories to line up as one single value

answered Nov 30, 2013 at 8:23

Youbaraj Sharma

1,2853 gold badges18 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Youbaraj Sharma Over a year ago

Also you may want to check the following link highcharts.com/docs/working-with-data/…

Collectives™ on Stack Overflow

Getting data from XML to update Highchart using JQuery

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