Types of Dashboards components

Components are the building blocks of Dashboards layout. Several types of components are provided and can be used out of the box. The KPI, Highcharts, and DataGrid components come pre-configured with default configurations, whereas the HTML component can be customized to fit specific needs. It is also possible to create and register Custom components.

This is an overview of the most critical parameters of a component:

  • id - The unique identifier of the component, which is later used to identify it by dashboard and/or used to set CSS styles.
  • renderTo - id of the cell to which the component should be rendered
  • className - CSS class that is applied to the component's container
  • type - the type of the component. It can be HTML, KPI, Highcharts, DataGrid or custom defined.
  • events - an object containing a pair of names for the event and a callback function that should be called on a given event. The list of events can be found in the API Reference, but the most common is mount.
  • sync - list of events that should be synchronized between components.

HTML Component

The most basic and generic component type allows you to add everything that could be defined as HTML, as well as some custom events.

The HTML component can be defined in two ways:

  1. Abstract Syntax Tree (AST) style
    Defines the HTML code as a nested tree structure.

    Code snippet:

    {
        type: 'HTML',
        renderTo: 'dashboard-1',
        elements: [{
            tagName: 'img',
            attributes: {
                src: 'https://www.highcharts.com/samples/graphics/stock-dark.svg'
            }
        }]
    }

  2. HTML string
    Defines the HTML code as a standard HTML string.

    Code snippet:
    ```js
    {
        type: 'HTML',
        renderTo: 'dashboard-1',
        html: '<img src="https://www.highcharts.com/samples/graphics/stock-dark.svg">'
    }
    ```

    This example exhibits both approaches to defining HTML components.

Custom HTML components are explained in the Custom Component section below.

See the HTML Component page for detailed information.

Highcharts Component

Dashboards support the use of Highcharts charts or maps out of the box.

The highcharts module must be imported before the dashboards module, as shown here:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/dashboards/dashboards.js"></script>

The HighchartsCSS file must be included for the correct chart rendering.

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

For a chart to be displayed, the type Highcharts must be specified, the renderTo option set must be set, and data must be provided as part of the chartOptions. In addition, the chartOptions object allows you to configure anything that can be configured in a stand-alone Highcharts chart.

Data may be provided directly in the chart option, but in a Dashboards application, one often wants to share data between components. In this case, the Data Pool mechanism offers a convenient solution.

Code snippet with data embedded in the chart options, no data connector used:

{
    renderTo: 'dashboard-1',
    type: 'Highcharts',
    chartOptions: {
        series: [{
            data: [1, 2, 3, 4]
        }]
    }
}

The above code snippet is part of a Highcharts Component example that uses embedded data.

Code snippet using the Data Connector mechanism.

dataPool: {
        connectors: [{
            id: 'micro-element',
            type: 'JSON',
            options: {
                firstRowAsNames: false,
                columnNames: ['Food', 'Vitamin A',  'Iron'],
                data: [
                    ['Beef Liver', 6421, 6.5],
                    ['Lamb Liver', 2122, 6.5],
                    ['Cod Liver Oil', 1350, 0.9],
                    ['Mackerel', 388, 1],
                    ['Tuna', 214, 0.6]
                ]
            }
        }]
    },
    components: [
    {
        renderTo: 'dashboard-col-0',
        type: 'Highcharts',
        connector: {
            id: 'micro-element',
            columnAssignment: [{
                seriesId: 'Vitamin A',
                data: ['Food', 'Vitamin A']
            }]
        }
    }]

The above code snippet is part of a Hichcharts Component example that uses data shared via a DataConnector.

When using a Data Connector, the data is parsed and organized in rows, with columnNames either given explicitly or used as column names in the first row.

The chart then uses the columnAssignment option to map the values of a specific column to the chart's series. Here is an example that uses column assignment.

You can load the Highcharts drag-drop module if the data connector is connected. This allows the user to change the value and sync the changes of this value with other components. If a mathModifier is applied to the data from the connector, chart editing is disabled. See the dataPool section for more details.

See the HighchartsComponent page for detailed information.

DataGrid Component

To visualize data in a row-column layout, you can use the DataGrid component. The DataGrid module must be imported before the Dashboards module as shown here:

<script src="https://code.highcharts.com/dashboards/datagrid.js"></script>
<script src="https://code.highcharts.com/dashboards/dashboards.js"></script>

The DataGrid module has its own style set, so the CSS file must be imported for correct rendering.

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

For a chart to be displayed, the type DataGrid must be specified, the renderTo option set, and data must be provided as an embedded dataTable object or via a DataConnector. In addition, the dataGridOptions object allows you to configure DataGrid specific parameters like cell formatting, column assignment, etc.

The DataGrid may have the series data directly embedded as part of the dataGridOptions. However, a more common usage is the Dashboards' data pool mechanism, which shares data between the dashboard components. In this case, the id of the DataConnector must be included in the data grid's configuration.

Code snippet with data embedded in the DataGrid data table; no data connector used.

{
    renderTo: 'dashboard-1',
    type: 'DataGrid',
    dataTable: {
        columns: {
            product: ['Apples', 'Pears', 'Plums', 'Bananas'],
            weight: [100, 40, 0.5, 200],
            price: [1.5, 2.53, 5, 4.5]
        }
    }
}

The above code snippet is part of a DataGrid example that uses embedded data.

Code snippet using a data connector.

dataPool: {
    connectors: [{
        id: 'data',
        type: 'JSON',
        options: {
            data: [
                ['Product Name', 'Quantity', 'Revenue', 'Category'],
                ['Laptop', 100, 2000, 'Electronics'],
                ['Smartphone', 150, 3300, 'Electronics'],
                ['Desk Chair', 120, 2160, 'Furniture'],
                ['Coffee Maker', 90, 1890, 'Appliances'],
                ['Headphones', 200, 3200, 'Electronics'],
                ['Dining Table', 130, 2470, 'Furniture'],
                ['Refrigerator', 170, 2890, 'Appliances']
            ]
        }
    }]
},
{
    type: 'DataGrid',
    renderTo: 'cell-id-2',
    connector: {
        id: 'data'
    }
}

The above code snippet is part of a DataGrid example that uses data shared via a DataConnector.

When using the data connector, the DataGrid is automatically populated. If other components are using the same data connector, they will be automatically updated when the user edits a data grid cell. Here is the example.

NB! If the data was created by the mathModifier, cell editing is disabled by default.

See the DataGrid Component page for more information.

KPI Component

The KPI component (Key Performance Indicator) facilitates the visualization of one single value in a data set. It is a simple component that displays a title and a value but can also include a Highcharts component to visualize the value, typically a gauge. Additionally, the component can be configured with threshold values, which can adapt its style according to its current value.

This component type is bundled with the Highcharts plugin, and you need to connect the Highcharts with the dashboard plugin to use it (similar to the Highcharts component).

Code snippet:

{
    renderTo: 'kpi-00',
    type: 'KPI',
    title: 'Average revenue',
    value: 888,
    threshold: [200, 800],
    thresholdColors: ['#f45b5b', '#f7a35c', '#90ed7d']
},

The above code snippet is part of a KPI component example.

See the KPI Component page for more information.

Edit this page