Question

I am trying to use HighCharts’ HTML-table-to-chart script to create a line graph from a table.

I want to have a datetime x-axis, so here is what I have done:

• Use Date.parse(this.innerHTML) to convert row headers into date strings.
• Set type to datetime in my xAxis options object.

The date conversion is working and appears correctly in the default tooltip, but the graph itself is treating the x values like categories, not datetimes. I’m assuming it has to do with how the point objects are set up, but I’m not sure how to fix it.

Highcharts.visualize = function(table, options) {

    // the categories
    options.xAxis.categories = [];

    $('tbody th', table).each(function(i) {
        var date = Date.parse(this.innerHTML);
        options.xAxis.categories.push(date);
    });

    // 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));
                }
            }
        });
    });

    charts[charts.length] = new Highcharts.Chart(options);
};

Any suggestions?

Here is a fiddle: http://jsfiddle.net/supertrue/et2Vy/

Answer 1

Highcharts treats the xAxis as categories because you tell it to do so.
Here: options.xAxis.categories.push(date);

You’ll have to use { x: xval, y: yval } (or [xval,yval]) as data type for your series.