How to display HighCharts with tables

I am trying to display table data through highcharts

along with a table. But for some reason the graph and table are not displayed on the html page. My code is below. Do I need to write between tags <div>

? If I print normal text, it is displayed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>
        charts
    </title>
    <script src="js/jquery-migrate-1.0.0.js" type="text/javascript"></script>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        /**
        * Create the data table
        */
        Highcharts.drawTable = function () {
            // user options
            var tableTop = 310,
                colWidth = 100,
                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( chart.xAxis[0].categories, function ( i, name ) {
                renderer.text(
                    name,
                    cellLeft + cellPadding,
                    tableTop + ( i + 2 ) * rowHeight - cellPadding
                ).css( {
                    fontWeight: 'bold'
                } ).add();
            } );
            $.each( series, function ( i, serie ) {
                cellLeft += colWidth;
                // Apply the cell text
                renderer.text(
                    serie.name,
                    cellLeft - cellPadding + colWidth,
                    tableTop + rowHeight - cellPadding
                ).attr( {
                    align: 'right'
                } ).css( {
                    fontWeight: 'bold'
                } ).add();

                $.each( serie.data, function ( row, point ) {

                    // 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( // bottom
                            renderer,
                            tableLeft,
                            tableTop + ( serie.data.length + 1 ) * rowHeight + cellPadding,
                            cellLeft + colWidth,
                            tableTop + ( serie.data.length + 1 ) * rowHeight + cellPadding
                        );
                    }
                    // horizontal line
                    Highcharts.tableLine(
                        renderer,
                        tableLeft,
                        tableTop + row * rowHeight + rowHeight + cellPadding,
                        cellLeft + colWidth,
                        tableTop + row * rowHeight + rowHeight + cellPadding
                    );

                } );

                // vertical lines
                if ( i == 0 ) { // left table border
                    Highcharts.tableLine(
                        renderer,
                        tableLeft,
                        tableTop + cellPadding,
                        tableLeft,
                        tableTop + ( serie.data.length + 1 ) * rowHeight + cellPadding
                    );
                }

                Highcharts.tableLine(
                    renderer,
                    cellLeft,
                    tableTop + cellPadding,
                    cellLeft,
                    tableTop + ( serie.data.length + 1 ) * rowHeight + cellPadding
                );
                if ( i == series.length - 1 ) { // right table border
                    Highcharts.tableLine(
                        renderer,
                        cellLeft + colWidth,
                        tableTop + cellPadding,
                        cellLeft + colWidth,
                        tableTop + ( serie.data.length + 1 ) * rowHeight + cellPadding
                    );
                }

            } );
        };
        /**
        * 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': 1
                } )
                .add();
        }
        /**
        * Create the chart
        */
        window.chart = new Highcharts.Chart( {
            chart: {
                renderTo: 'container',
                events: {
                    load: Highcharts.drawTable
                },
                borderWidth: 2
            },
            title: {
                text: 'Average monthly temperatures'
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: 'Temperature (°C)'
                }
            },
            legend: {
                y: -300
            },
            series: [{
                name: 'Tokyo',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }, {
                name: 'New York',
                data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
            }, {
                name: 'Berlin',
                data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
            }, {
                name: 'London',
                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
            }]
        } );
    </script>
</head>
<body>
    <script type="text/javascript" src="http://www.highcharts.com/js/testing-exporting.js"></script>
    <div id="container" style="height: 600px;margin-top:20px;width: 600px"></div>

</body>
</html>

      

+3


source to share


2 answers


Have a look at the jsfiddle . Highcharts API reference in showTable .

The above example just adds this line of code to the chart object .. see link for full code:



exporting: { showTable: true }

Following is an example here Link to Main Charts FAQ - Add Data Table to Exported Chart

+3


source


If I'm reading your question correctly, you want HighCharts to also "draw" the table containing the data as well as the data table in that table. If yes, take a look at my answer to this question. This is about formatting numeric values, but my jsFiddle will show you how to draw a table. Note that formatting and aligning a table / chart is tricky depending on how much data you are trying to display.



+1


source







All Articles