Highcharts Dashboards Demo

author(s): Karol Kolodziej

by stitot

HTML

<script src="http://localhost:3031/dashboards/dashboards.js"></script>
<script src="http://localhost:3031/highcharts.js"></script>
<script src="http://localhost:3031/dashboards/datagrid.js"></script>
<script src="http://localhost:3031/dashboards/modules/dashboards-plugin.js"></script>

<div id="container"></div>
<div class="cell" id="dashboard-col-1"></div>
<div class="cell" id="dashboard-col-2"></div>

CSS

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


#container {
  width: calc(100% - 30px);
  background-color: rgb(241 245 249);
  padding: 15px;
}

.row {
  gap: 1rem;
  display: flex;
}

.cell {
  flex: 1 1 50%;
  height: 300px;
  background: #fff;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

#dashboard-col-1 {
  overflow: hidden;
}

/* MEDIUM */
@media (max-width: 992px) {

    .row {
      flex-direction: column;
    }

    #dashboard-col-0,
    #dashboard-col-1 {
        flex: 1 1 100%;
    }
}

JavaScript

Dashboards.board('container', {
  dataPool: {
    connectors: [{
      id: 'data',
      type: 'JSON',
      options: {
        data: [
          ['Product Name', 'Quantity'],
          ['Laptop', 100, ],
          ['Smartphone', 150]
        ]
      }
    }]
  },
  components: [{
    renderTo: 'dashboard-col-2',
    cell: 'dashboard-col-0',
    type: 'Highcharts',
    columnAssignment: {
      'Quantity': 'y'
    },
    connector: {
      id: 'data'
    }
  }, {
    connector: {
      id: 'data'
    },
    type: 'DataGrid',
    cell: 'dashboard-col-1',
    dataGridOptions: {
      editable: false
    }
  }]
});