Disera Disera - 1 month ago 14
jQuery Question

Highcharts generate column chart from XML

I am reading XML to feed data to Highcharts(Below is my xml).

Trying to build a column chart, and a drilldown event to generate a area chart in a separate

<div>
.
Its easier to hardcode the values and draw the chart.but i dont understand how to perform it using jquery.

I am having a hard time to push the
name
and
y
value of the individual object to
data
.(for the column chart)

Can anyone please tell me how to pass the value for Column Chart.Thanks so much in Advance.

my XML:

<chart>
<categories>
<browser>MSIE</browser>
<browser>FF</browser>
</categories>
<ChartSeries>
<series>
<name>MSIE</name>
<value>56</value>
<drilldown>
<date>
<item>01-Apr-16</item>
<item>02-Apr-16</item>
<item>03-Apr-16</item>
</date>
<data>
<point>13.52</point>
<point>5.43</point>
<point>1.58</point>
</data>
</drilldown>
</series>
<series>
<name>FF</name>
<value>67</value>
<drilldown>
<date>
<item>01-May-16</item>
<item>02-May-16</item>
<item>03-May-16</item>
<item>04-May-16</item>
</date>
<data>
<point>9.91</point>
<point>0.50</point>
<point>0.36</point>
<point>0.32</point>
</data>
</drilldown>
</series>
</ChartSeries>
</chart>


My code:

var options={
chart: {
renderTo: 'container',
type: 'bar'
},
xAxis: {
categories : []
},
series : [{
name:'Browsers',
data:[]
}],
drilldown:{}
};
$.get(url, function(xml) {
var $xml = $(xml);

$xml.find('categories browser').each(function(i, category) {
options.xAxis.categories.push($(category).text());
});

$xml.find('ChartSeries series').each(function(i, series) {
var pointOptions = {
name : $(series).find('name').text(),
y: Number($(series).find('value').text()),
drilldown: $(series).find('name').text()
};
options.series[0].data.push(pointOptions);
});
var drilldown={
series:[]
};

$xml.find('ChartSeries series').each(function(i, series) {
var pointOptionsDrill = {
id : $(series).find('name').text(),
data:[]
};

$(series).find('drilldown').each(function(i,point){
pointOptionsDrill.data.push([$(series).find('date item').text(),Number($(series).find('data point').text())])
});
drilldown.series.push(pointOptionsDrill);

});
options.drilldown=drilldown;
var chart = new Highcharts.Chart(options);

});

<div id="container" style="width: 100%; height:100%;"></div>

Answer

You confuse a series with a point. What you actually have in the xml file in <series> is a point which should be pushed to data array.

So you have one series named 'Browsers' and 2 points which are named 'FF' and 'MSIE' which belong to categories (defined before).

$.get(url, function(xml) {
  var $xml = $(xml);

  $xml.find('categories browser').each(function(i, category) { 
    options.xAxis.categories.push($(category).text());
  });

  $xml.find('ChartSeries series').each(function(i, series) {
    var pointOptions = {
        name : $(series).find('name').text(),
        y: Number($(series).find('value').text()),
        // drilldown: ... this should be defined drilldown optionally
    };

    options.series[0].data.push(pointOptions); //pushing point to the data, not to the series
  });

  var chart = new Highcharts.Chart(options);
});

 console.log(options.drilldown);

Edit:

Change axis type to category and dont define explicitly categories, so categories will be created dynamically based on a point's name.

    var options={
    chart: {
        renderTo: 'container',
        type: 'bar'
    },
    xAxis: {
      type: 'category'
  },
  series : [{
    name:'Browsers',
    data:[]
}]
};

var url = "http://utils.highcharts.local/takie/chart.xml"

$.get(url, function(xml) {
  var $xml = $(xml);

  // $xml.find('categories browser').each(function(i, category) { 
  //   options.xAxis.categories.push($(category).text());
// });

  $xml.find('ChartSeries series').each(function(i, series) {
   var pointOptions = {
     name : $(series).find('name').text(),
     y: Number($(series).find('value').text()),
     drilldown: $(series).find('name').text()
   };
   options.series[0].data.push(pointOptions);  
  });
  var drilldown={
   series:[]
  };

  $xml.find('ChartSeries series').each(function(i, series) {
    var pointOptionsDrill = {
        id : $(series).find('name').text(),
        data:[] 
    };

    $(series).find('drilldown').each(function(i,drilldownSeries){
     $(drilldownSeries).find('date item').each(function (i, item) {
        pointOptionsDrill.data.push([$(item).text()]);
    });

     $(drilldownSeries).find('data point').each(function (i, point) {
        pointOptionsDrill.data[i][1] = Number($(point).text());
    });

   });
    drilldown.series.push(pointOptionsDrill);  

  });
  options.drilldown=drilldown;
  var chart = new Highcharts.Chart(options, function () {
  });

});