Tutorials

Creating a financial dashboard using Highcharts Dashboards

by

Mustapha Mekhatria

3 minutes read

In this tutorial, I will show you how to create an interactive and visually appealing financial dashboard using Highcharts Dashboards.

If you are new to the Highcharts Dashboards, you can still follow along; however, feel free to check this blog to learn how to build Highcharts Dashboards step by step; it is kind of a Highcharts Dashboards 101 :).

There are 4 steps to create such a dashboard:

Step 1: Libraries

To create a financial dashboard, I have to include Highcharts and Highcharts Dashboards libraries. Basically, I include the necessary JavaScript libraries and CSS stylesheets for Highcharts Dashboards. The div element with the id="container" will serve as the container for the dashboard.

<script src="https://code.highcharts.com/dashboards/dashboards.js"></script>
<script src="https://code.highcharts.com/dashboards/datagrid.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/dashboards/modules/dashboards-plugin.js"></script>
<div id="container"></div>

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

Step 2: Data

In this financial dashboard example, I use mock financial data for transactions. You should replace this with your own financial data source, such as an API or database.

To add data, I use the dataPool object in Highcharts Dashboards. dataPool is a central location where you can define and store data that will be used by various components within the dashboard.

data: [
  ['rsf934fds', 'John Doe', 100, 1000],
  ['f0efnakr', 'Anna Smith', 200, 800],
  ['mfaiks12', 'Robert Johnson', 300, 500],
  ['15fqmfk', 'Susan Williams', 400, 100]
]

The connector is configured to read JSON data with specific column names, and it provides a sample dataset containing transaction information for John Doe, Anna Smith, Robert Johnson, and Susan Williams, with columns for 'id', 'Receiver', 'Amount', and 'Balance'.

Step 3: Dashboard Layout

Next, I define the layout of the dashboard. In this example, I have three layers. The first one has two charts and a component to check an external saving account; the second one has one line chart, whereas the last layer has two charts and a data grid.

gui: {
  layouts: [{
    rows: [{
        id: 'row-1',
        cells: [
          // ... Define cells for row 1
        ]
      },
      {
        cells: [
          // ... Define cells for row 2
        ]
      },
      {
        cells: [
          // ... Define cells for row 3
        ]
      }
    ]
  }]
},

Feel free to customize the layout according to your specific needs, adding rows and cells as necessary.

Step 4: Components

Now, let’s add some components (KPIs, charts, HTML elements) to our dashboard. I use components; this array contains definitions for the different components that will be displayed on the dashboard.

components: [{
    type: 'KPI',
    cell: 'dashboard-row-1-cell-1',
    title: 'Total balance',
    chartOptions: {
      // ... Chart configuration
    }
  },
  {
    type: 'KPI',
    cell: 'dashboard-row-1-cell-2',
    title: 'Savings',
    chartOptions: {
      // ... Chart configuration
    }
  },
  {
    type: 'HTML',
    cell: 'dashboard-row-1-cell-3',
    elements: [
      // ... Define HTML elements
    ]
  },
  {
    type: 'Highcharts',
    cell: 'dashboard-row-2-cell-1',
    title: 'Earnings',
    chartOptions: {
      // ... Chart configuration
    }
  },
]

You can add more components to the components array as needed to create a comprehensive financial dashboard with various widgets and charts.

Now, you can easily create a financial dashboard using Highcharts Dashboards. With the provided code and customization, you can build a tailored financial dashboard to suit your organization’s or client’s needs. Make sure to replace the sample data with your financial data source for a fully functional financial dashboard.