Question

I’m trying to set the x-axis on a chart in highcharts from a table so that it is the months. The y-axis is then the units. Put I really cant figure out how to change this. I have tried changing this section:

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

But without luck. So I have left it at the default with the hope someone will be able to help.

You can view what im trying to do at this JSFiddle.

Answer 1

From your code it appears that your months are in thead and not tbody. So you should be really using $('thead th') selector. I would also recommend using the :parent selector to filter out empty ths

$('thead th:parent', table).each( function(i) {
    var month=$(this).text();
    options.xAxis.categories.push(month);
});

Also, your series data needs to be changed if you want the x-axis to be months, you should now have only 3 series, instead of the earlier 6. And each series will now have 6 points (one for each month) instead of previous 3 points/series. So your table parsing would need to change to something like this.

options.series = [];
$('tbody tr', table).each(function (i) {
    var tr = this;
    var serie = {};
    serie.name = $('th', tr).text();
    serie.data = [];
    $('td', tr).each(function (j) {
        serie.data.push(parseFloat(this.innerHTML));
    });
    options.series.push(serie);
});

Demo @ jsFiddle