Highcharts Dashboards Demo

author(s): Dawid Dragula

by stitot

HTML

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

<div id="container"></div>

CSS

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

#container {
    padding: 8px;
}

.highcharts-description {
    padding: 0 20px;
}

.hcg-container .highlight_green {
    background-color: green !important;
}

JavaScript

Grid.grid('container', {
    dataTable: {
        columns: {
            string: ['Apples', 'Pears', 'Plums', 'Bananas'],
            booleans: [true, false, null, false],
            boolNumber: [1, 0, null, 0],
            int: [1, 2, 3, 4],
            float: [1.5, 2.53, 5, 4.5],
            date: [
                Date.UTC(2023, 0, 1),
                Date.UTC(2023, 0, 2),
                null,
                Date.UTC(2023, 0, 4)
            ]
        }
    },
    columns: [{
        id: 'booleans',
        cells: {
            className: 'highlight_green',
            formatter: function () {
                return this.value;
            }
        }
    }, {
        id: 'boolNumber',
        dataType: 'boolean'
    }, {
        id: 'date',
        dataType: 'datetime'
    }]
});