Create interactive data dashboard

by Black Label

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/datagrid.css");
@import url("https://code.highcharts.com/dashboards/css/dashboards.css");

JavaScript

Dashboards.board("container", {
  dataPool: {
    connectors: [
      {
        id: "data",
        type: "JSON",
        options: {
          data: {
            product: {
              product: ["P1", "P2", "P3", "P4", "P5"],
              retailPrice: [20, 30, 40, 50, 10],
              salePrice: [24, 36, 48, 60, 13],
            },
            sale: {
              count: [3, 1, 4, 5, 2],
            },
          },
        },

        dataTables: [
          {
            key: "product",
            beforeParse: function (payload) {
              const headers = Object.keys(payload.product)
              const result = [headers]
              const rowCount = payload.product.retailPrice.length

              for (let i = 0; i < rowCount; i++) {
                const row = headers.map((key) => payload.product[key][i])
                result.push(row)
              }

              return result
            },
          },
          {
            key: "sale",
            beforeParse: function (payload) {
              const combinedPayload = { ...payload.sale, ...payload.product }
              const headers = Object.keys(combinedPayload)
              const result = [headers]

              const rowCount = payload.sale.count.length

              for (let i = 0; i < rowCount; i++) {
                const row = headers.map((key) => {
                  return payload.sale[key]
                    ? payload.sale[key][i]
                    : payload.product[key][i]
                })
                result.push(row)
              }

              return result
            },
            dataModifier: {
              type: "Math",
              columnFormulas: [
                {
                  column: "revenue",
                  formula: "A1*D1-C1",
                },
              ],
            },
          },
        ],
      },
    ],
  },
  gui: {
    layouts: [
      {
        id: "layout-1",
        rows: [
          {
            cells: [
        ...