Highcharts Demo

author(s): Torstein Hønsi

by Jawad Ameen

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 600px"></div>

JavaScript

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

    // user options
    var tableTop = 310,
        colWidth = 75,
        tableLeft = 20,
        rowHeight = 20,
        cellPadding = 2.5,
        valueDecimals = 1,
        valueSuffix = '';

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

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

    chart.xAxis[0].categories.forEach(function (name, i) {
        cellLeft += colWidth;

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

        series.forEach(function (serie, j) {
debugger;
						var point = serie.data[i], row = j;
            // Apply the cell text
            renderer.text(
                    Highcharts.numberFormat(point.y, valueDecimals) + valueSuffix,
                    cellLeft + colWidth - cellPadding,
                    tableTop + (row + 2) * rowHeight - cellPadding
                )
                .attr({
                    align: 'right'
                })
                .add();

            // horizontal lines
            if (row === 0) {
                Highcharts.tableLine( // top
                    renderer,
                    tableLeft,
                    tableTop + cellPadding,
                    cellLeft + colWidth,
                    tableTop + cellPadding
                );
                Highcharts.tableLine( //...