Highcharts Demo

author(s): Torstein Hønsi

by Geo George

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<!-- zipcelx is a non-Highcharts dependency for exporting to XLS and XLSX. It
is licenced under the MIT license, see
https://github.com/egeriis/zipcelx/blob/master/LICENSE -->
<script src="https://cdn.jsdelivr.net/gh/egeriis/zipcelx/lib/standalone.js"></script>

<div class="chart-outer">
    <div id="container"></div>
    <!-- data table is inserted here -->
</div>

CSS

.chart-outer {
    max-width: 800px;
    margin: 2em auto;
}

#container {
    height: 300px;
    margin-top: 2em;
}

.highcharts-data-table table {
    border-collapse: collapse;
    border-spacing: 0;
    background: white;
}

.highcharts-data-table td,
.highcharts-data-table th {
    font-family: sans-serif;
    font-size: 10pt;
    border: 1px solid silver;
    padding: 0.5em;
}

JavaScript

// Highcharts plugin for adding better XLS and XLSX support through the third
// party zipcelx library.
(function (H) {
    if (window.zipcelx && H.getOptions().exporting) {
        H.Chart.prototype.downloadXLSX = function () {
            var div = document.createElement('div'),
                name,
                xlsxRows = [],
                rows;
            div.style.display = 'none';
            document.body.appendChild(div);
            rows = this.getDataRows(true);
            xlsxRows = rows.slice(1).map(function (row) {
                return row.map(function (column) {
                    return {
                        type: typeof column === 'number' ? 'number' : 'string',
                        value: column
                    };
                });
            });

            // Get the filename, copied from the Chart.fileDownload function
            if (this.options.exporting.filename) {
                name = this.options.exporting.filename;
            } else if (this.title && this.title.textStr) {
                name = this.title.textStr.replace(/ /g, '-').toLowerCase();
            } else {
                name = 'chart';
            }

            window.zipcelx({
                filename: name,
                sheet: {
                    data: xlsxRows
                }
            });
        };

        // Default lang string, overridable in i18n options
        H.getOptions().lang.downloadXLSX = 'Download XLSX';

        // Add the menu item handler
        H.getOptions().exporting.menuItemDefinitions.downloadXLSX = {
            textKey: 'downloadXLSX',
            onclick: function () {
                this.downloadXLSX();
            }
        };

        // Replace the menu item
        var menuItems = H.getOptions().exporting.buttons.contextButton.menuItems;
        menuItems[menuItems.indexOf('downloadXLS')] = 'downloadXLSX';
    }

}(Highcharts));

Highcharts.chart('container', {

    title: {
        text: 'Data...