Grid with MathModifier

by stitot

HTML

<script src="https://code.highcharts.com/dashboards/datagrid.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/draggable-points.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/dashboards/dashboards.js"></script>
<script src="https://code.highcharts.com/dashboards/modules/layout.js"></script>
<script src="https://code.highcharts.com/dashboards/modules/math-modifier.js"></script>

<div id="container"></div>
<p class="highcharts-description">
    The dashboard demonstrates some capabilities of the MathModifier based on data
    that visualize Euro foreign exchange reference rate to US dollar (USD).
    The data covers one week of rates in August 2023.
    More information can be found at the
    <a href="https://www.ecb.europa.eu/stats/policy_and_exchange_rates/euro_reference_exchange_rates/html/eurofxref-graph-usd.en.html" rel="noreferrer" target="_blank">Euro Data Store</a>
    of the European Central Bank.
    The last column in the table is calculated automatically by a defined
    columnFormula option with the formula term "B1*C1".
</p>

CSS

@import url("https://code.highcharts.com/dashboards/css/dashboards.css");
@import url("https://code.highcharts.com/css/highcharts.css");
@import url("https://code.highcharts.com/dashboards/css/datagrid.css");

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

/* LARGE */
@media (max-width: 1200px) {
    #dashboard-col-2,
    #dashboard-col-1 {
        flex: 1 1 50%;
    }
}

/* MEDIUM */
@media (max-width: 992px) {
    #dashboard-col-2,
    #dashboard-col-1 {
        flex: 1 1 50%;
    }
}

/* SMALL */
@media (max-width: 576px) {
    #dashboard-col-2,
    #dashboard-col-1 {
        flex: 1 1 100%;
    }
}

JavaScript

Highcharts.setOptions({
    chart: {
        styledMode: true
    }
});
// Create Dashboard
const data = [
    ['Day', 'EUR', 'Rate'],
    [1691971200000, 11, 1.0930],
    [1692057600000, 23, 1.0926],
    [1692144000000, 15, 1.0916],
    [1692230400000, 27, 1.0900],
    [1692316800000, 13, 1.0867]
];

Dashboards.board('container', {
    dataPool: {
        connectors: [{
            id: 'EUR-USD',
            type: 'JSON',
            options: {
                data,
                // Add MathModifier to create USD column with exchange valuta
                dataModifier: {
                    type: 'Math',
                    columnFormulas: [{
                        column: 'USD',
                        formula: 'B1*C1' // Multiply EUR (B1) with the rate (C1)
                    }]
                }
            }
        }]
    },
    gui: {
        layouts: [{
            id: 'layout-1',
            rows: [{
                cells: [{
                    id: 'dashboard-col-1'
                }, {
                    id: 'dashboard-col-2'
                }]
            }]
        }]
    },
    components: [{
        renderTo: 'dashboard-col-1',
        type: 'Highcharts',
        connector: {
            id: 'EUR-USD',
            columnAssignment: [{
                seriesId: 'EUR',
                data: ['Day', 'EUR']
            }, {
                seriesId: 'Rate',
                data: ['Day', 'Rate']
            }, {
                seriesId: 'USD',
                data: ['Day', 'USD']
            }]
        },
        sync: {
            highlight: true
        },
        chartOptions: {
            chart: {
                animation: false,
                type: 'line'
            },
            title: {
                text: 'EUR to USD'
            },
            subtitle: {
                text: 'Euro foreign exchange reference rate to US dollar'
            },
            series: [{
                id: 'Rate',
                name: 'Rate',
      ...