Highcharts Dashboards Demo

author(s): Karol Kolodziej

by stitot

HTML

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

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

CSS

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


#container {
  width: 100%;
  height: 300px;
  border: 1px solid blue;
}

.row {
  border: 1px solid green;
  height: 300px;
  display: flex;
}

.cell {
  flex: 1 1 50%;
  height: 300px;
  border: 1px solid red;
}

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

JavaScript

Dashboards.board('container', {
  dataPool: {
    connectors: [{
      id: 'data',
      type: 'JSON',
      options: {
        data: [
          ['Product Name', 'Quantity'],
          ['Laptop', 100, ],
          ['Smartphone', 150]
        ]
      }
    }]
  },
  gui: {
    enabled: false
  },
  components: [{
    type: 'HTML',
    cell: 'dashboard-col-0',
    elements: [{
      tagName: 'h1',
      textContent: 'Your first dashboard'
    }]
  }, {
    cell: 'dashboard-col-1',
    type: 'Highcharts',
    columnAssignment: {
    	'Quantity': 'y'
    },
    connector: {
      id: 'data'
    }
  }, {
    cell: 'dashboard-col-2',
    type: 'KPI',
    title: 'Last day\'s value',
    columnName: 'Quantity',
    connector: {
      id: 'data'
    }
  }, {
    connector: {
      id: 'data'
    },
    type: 'DataGrid',
    cell: 'dashboard-col-3',
    dataGridOptions: {
      editable: false
    }
  }]
});