CODEWITHSUNDEEP
jqueryxmljsoncharts
A Gurung
A Gurung

Reputation: 27

Getting data from XML to update Highchart using JQuery

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/>'
            }
        }, ]


});
});
  });`

Upvotes: 1

Views: 603

Answers (1)

Youbaraj Sharma
Youbaraj Sharma

Reputation: 1295

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

Upvotes: 1

Related Questions