Building a Dashboard

Harry now needs a consolidated view of all the charts, gauges and maps that his team has created. This consolidated view of having multiple related charts in a page is called a dashboard. In this section, we will help his team build a complete dashboard.

Building blocks for an effective dashboard

Creating a dashboard involves the following steps:

Know what metrics you want in the dashboard and draw a rough prototype of where they should be placed. A good practice is to keep Key Performance Indicators above the fold and related metrics close to one another.

Know what chart will represent the data best. (For eg: Column charts are useful for facilitating comparisons while Line charts are suitable for trend analysis over a period of time).

Have data for all such charts ready to be incorporated in the dashboard.

Create separate container element (<div>) for each chart in the dashboard page.

Add all the charts to the page, and link to their data and container element.

What this translates to for you?

From a technical perspective, you need to ensure that:

Each chart on the page should have a unique id.

Each chart should have a unique JavaScript variable name. This variable name is used to refer to the chart across the page, when you want to listen to chart events, or invoke a method on the chart.

Each chart should be rendered in separate HTML container, each container having unique id.

Data for each chart is present as a separate JSON/XML file or string.

Adding the charts to the Dashboard

For this example, we will use screenshots and the final dashboard is available to be viewed and edited live at the bottom of the page.