Highcharts Dashboards Demo

author(s): Karol Kolodziej

by oysteinmoseng

HTML

<script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/grid-pro.js"></script>

<div class="content">
    <div id="container" tabindex="-1"></div>
    <button id="csvExport">Export to CSV</button>
    <button id="jsonExport">Export to JSON</button>
    <button id="csvDownload">Download CSV</button>
    <button id="jsonDownload">Download JSON</button>
    <h2>Exported file content</h2>
    <textarea id="result"></textarea>
</div>

CSS

@import url("https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/css/grid-pro.css");

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
}

.content {
    padding: 8px;
}

#container {
    height: 300px;
}

#json {
    margin-top: 20px;
}

textarea {
    width: 100%;
    height: 140px;
}

JavaScript

const csvExport = document.querySelector('#csvExport');
const jsonBtn = document.querySelector('#jsonExport');
const csvDownload = document.querySelector('#csvDownload');
const jsonDownload = document.querySelector('#jsonDownload');
const result = document.querySelector('#result');

const grid = Grid.grid('container', {
    dataTable: {
        columns: {
            product: ['Apples', 'Pears', 'Plums', 'Bananas'],
            weight: [100, 40, 0.5, 200],
            price: [1.5, 2.53, 5, 4.5],
            metaData: ['a', 'b', 'c', 'd']
        }
    },
    columnDefaults: {
            filtering: { enabled: true },
        cells: {
            editMode: {
                enabled: true
            }
        }
    }
});

csvExport.addEventListener('click', () => {
    result.innerHTML =  grid.exporting.getCSV();
});

jsonBtn.addEventListener('click', () => {
    result.innerHTML = grid.exporting.getJSON();
});

csvDownload.addEventListener('click', () => {
    grid.exporting.downloadCSV();
});

jsonDownload.addEventListener('click', () => {
    grid.exporting.downloadJSON();
});