Grid math modifier

author(s): Sebastian Bochan

by stitot

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/dashboards/datagrid.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>

CSS

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

JavaScript

Dashboards.board(
  "container",
  {
    dataPool: {
      connectors: [
        {
          id: "values",
          type: "JSON",
          options: {
            firstRowAsNames: false,
            columnNames: ["id", "Value 1", "Value 2"],
            data: [
              [1, 101, 102],
              [2, 201, 202],
            ],
            dataModifier: {
              type: "Math",
              columnFormulas: [
                {
                  column: "Total",
                  formula: "=SUM(A1:C1)",
                },
              ],
            },
          },
        },
      ],
    },
    gui: {
      layouts: [
        {
          rows: [
            {
              cells: [
                {
                  id: "grid",
                },
                {
                  id: "kpi",
                },
              ],
            },
          ],
        },
      ],
    },
    components: [
      {
        renderTo: "grid",
        connector: {
          id: "values",
        },
        type: "DataGrid",
        dataGridOptions: {
          columns: [
            {
              id: "Total",
              cells: {
                format: "{#if (eq 204 value)|| (eq 205 value)}<strong>{value}</strong>{else}{value}{/if}",
              },
            },
          ],
        },
      },
    ],
  },
  true
);