Highcharts Dashboards Demo

author(s): Sebastian Bochan

by stitot

HTML

<script src="http://localhost:3031/dashboards/datagrid.js"></script>

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

CSS

@import url("http://localhost:3031/dashboards/css/datagrid.css");

@media(prefers-color-scheme: dark) {
    body {
        background: #252525;
    }
}

#container {
    height: 250px;
}

JavaScript

DataGrid.dataGrid('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'],
            icon: ['Apples URL', 'Pears URL', 'Plums URL', 'Bananas URL']
        }
    },
    header: ['product', 'price'],
    columns: [{
        id: 'product',
        header: {
        	format: 'product, weight'
        },
        cells: {
        	formatter: function() {
            	const data = this.row.data;
            	return data.product + ", " + data.weight;
            }
        }
    }, {
        id: 'price',
        header: {
        	format: 'price, metaData'
        },
        cells: {
        	format: '{value}, {row.data.metaData}'
        }
    }]
});