CODEWITHSUNDEEP
javascriptjqueryhighcharts
neoswf
neoswf

Reputation: 4760

Highcharts Chart Bar - How can I display in the chart, only one column from my HTML table?

I got a Bar Chart that extract its data from a HTML table in the page. http://www.highcharts.com/demo/column-parsed

How can I extract only one column of the table, if we follow the example above, the John comlumn...

This is the code that builds the serias

// the categories
options.xAxis.categories = [];
$('tbody th', table).each( function(i) {
    options.xAxis.categories.push(this.innerHTML);
});

// the data series
options.series = [];
$('tr', table).each( function(i) {
    var tr = this;
    $('th, td', tr).each( function(j) {
        if (j > 0) { // skip first column
            if (i == 0) { // get the name and init the series
                options.series[j - 1] = {
                    name: this.innerHTML,
                    data: []
                };
            } else { // add values
                options.series[j - 1].data.push(parseFloat(this.innerHTML));
            }
        }
    });
});

I have tried to read only the columns that are equal to 2, in order to reach the last one, and didn't succeed

if (j == 2) { ... }

Hope anyone will have better answers than me. Shlomi.

Upvotes: 0

Views: 2750

Answers (1)

Manse
Manse

Reputation: 38147

Try this :

options.series = [];
$('tr', table).each( function(i) {
    var tr = this;
    $('th, td', tr).each( function(j) {
        if (j == 2) { // get only column 2
            if (i == 0) { // get the name and init the series
                options.series[0] = {
                    name: this.innerHTML,
                    data: []
                };
            } else { // add values
                options.series[0].data.push(parseFloat(this.innerHTML));
            }
        }
    });
});

You need to check that j == 2 so that you only get the data in the 2nd column and then when you create the options.series array you need to use 0 - Highcharts expects at least data in series[0]

Working Example here

Upvotes: 2

Related Questions