ElementStacks

by J. Albert Bowden

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/js/testing-exporting.js"></script>

<div id="container" style="height: 300px;margin-top:20px;width: 840px"></div>

JavaScript

/**
 * Create the data table
 */
Highcharts.drawTable = function() {

    // user options
    var tableTop = 110,
        colWidth = 60,
        tableLeft = 20,
        rowHeight = 20,
        cellPadding = 2.5,
        valueDecimals = 1,
        valueSuffix = ' °C';

    // internal variables
    var chart = this,
        series = chart.series,
        renderer = chart.renderer,
        cellLeft = tableLeft;

    // draw category labels
    $.each(series, function(serie_index, serie) {
        renderer.text(
        serie.name, cellLeft + cellPadding, tableTop + (serie_index + 2) * rowHeight - cellPadding).css({
            fontWeight: 'bold'
        }).add();
    });

    $.each(chart.xAxis[0].categories, function(category_index, category) {
        cellLeft += colWidth;

        // Apply the cell text
        renderer.text(
        category, cellLeft - cellPadding + colWidth, tableTop + rowHeight - cellPadding).attr({
            align: 'right'
        }).css({
            fontWeight: 'bold'
        }).add();

        $.each(series, function(i) {


            renderer.text(series[i].data[category_index].Note, cellLeft + colWidth - cellPadding, tableTop + (i + 2) * rowHeight - cellPadding).attr({
                align: 'right'
            }).add();

        });



    });


};

/**
 * Draw a single line in the table
 */
Highcharts.tableLine = function(renderer, x1, y1, x2, y2) {
    renderer.path(['M', x1, y1, 'L', x2, y2]).attr({
        'stroke': 'silver',
        'stroke-width': 5
    }).add();
}

/**
 * Create the chart
 */
window.chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container',
        events: {
            load: Highcharts.drawTable
        },
        borderWidth: 2
    },

    title: {
        text: 'Table in HC'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    yAxis: {
        title: false,
        labels: {
            enabled: false
   ...