How to build a real-time dashboard with free JS libraries: a step-by-step guide

Published in

Level Up Coding

6 min readMar 20, 2019

When you use static reports to make up a baseline for your data analysis you should always keep in mind that they show only the static view of your data.

To take a look at it in real time, the majority of data analysts opt for dashboards. The reason for that is because they provide more opportunities for exploring the data interactively, meaning you can always go deeper into the details or get the big picture. Moreover, they are easily accessible to any team member and from any device.

A dashboard is a business intelligence tool that helps create these real-time reports. It reflects current trends in the data and communicates key performance metrics by displaying charts, graphs, and tables together on a single page. Its main purpose is to provide decision-makers of any department with insights into the most important aspects of the data.

Should it be flexible? — Yes.

The requirements to the report will depend on a sphere or company department this reporting will be used for. Every department may have an unlimited number of dashboards for multiple scopes. That’s why dashboards should be customizable enough to meet the ever-changing demands of any kind of analysis — financial, marketing, sales, etc.

Also, since dashboards are powered by data which often comes from multiple sources, end-users should be able to connect it to the dashboard, switch between data sources and present the data in a consumable form as a result. The whole process needs to be completely time-saving.

Challenges

As a developer, one day you may receive a task to configure a dashboard and embed it into the business application. After you’ve found suitable tools, a lot of heavy-lifting may be involved in the integration process: compatibility with the software stack, customization challenges, supported data sources, overall performance, and, of course, budget limitations.

What is the solution?

That’s where free JavaScript libraries come to the rescue.

WebDataRocks is a reporting tool that allows aggregating, filtering and sorting the data.

Google Charts is a data visualization library that provides with a wide range of charts and graphs.

With their help, you can build a low-cost yet effective solution for any analytical project with any front-end technology including Angular, AngularJS, jQuery and React.

Both tools are lightweight and extremely customizable.

Today we will focus on creating a fully personalized dashboard for monitoring sales metrics. If you are eager to get hands-on experience, scroll down to the section with useful links and run the demo. It will be enriched with the dynamic report and responsive charts.

We truly hope this tutorial will help you get a better understanding of how to combine the analytical features of a pivot table and the expressive power of charts.

Ready?

Let’s start!

🔎 Step 1: Define your problem & objectives

What is a data analysis without a purpose? Setting your goals from the very beginning is a milestone on the road to successful analysis. It’s better to have a clear idea in mind of what your end-users need to achieve in the long run.

For an illustrative example, let’s analyze the data of a fictional supply chain to understand its sales performance on a monthly basis as well as customer demographics.

👨🏻‍💻 Step 2: Add a reporting tool

A pivot table is an engine of a dashboard as it takes all your raw data and transforms into the summarized form.

Firstly, establish all the dependencies of WebDataRocks and include its styles into the <head> of your web page:

Secondly, create a container which will hold a pivot table:

💾 Step 3: Prepare and load your data

Pull the CSV or JSON data from your database, CRM or any other data source.

You have three equivalent options of loading it into the pivot table:

By specifying a URL to your data file:

By connecting to a data source via the UI:

By defining a function which returns the JSON data:

📋 Step 4: Create a report and aggregate the data

Firstly, set up a slice — it’s the most important part of the report where you specify which hierarchies to place into the rows and columns, apply various filtering and pick aggregation functions for your measures.

To extend the measuring capabilities, calculated values are at your service:

Put the ‘Location’ hierarchy into the rows and ‘Product Group’ into the columns.
Place the ‘Product’ hierarchy under ‘Product Group’ so as to be able to expand the latter to get more details.
Created the ‘Sales’ calculated value and put it to the measures. It will help you track the revenue of our organization.

Please refer to the source code at the end of the article to learn how to set a slice.

📊 Step 5: Connect to the charting library

Now that you aggregated data and displayed it on the grid, connect to the Google Charts library by including its Visualization API loader into the <head> of your web page:

After that, load the package for particular types of charts (either in the <head> or <body> section):

Also, you need to add the WebDataRocks connector for Google Charts that handles all the data pre-processing for the specific types of charts:

Lastly, add a container for the charts:

📈 Step 6: Bind the charts to the pivot table

To make the charts show the data from the table, you need to attach an event handler to the pivot table for the `reportcomplete` event.

To track the pivot’s and Google Charts readiness, add two flag variables:

Also, set the onGoogleChartsLoaded() function as a callback to run after the “corechart” package is successfully loaded:

onGoogleChartsLoaded() is responsible for getting the data from the pivot and starting the functions that instantiate our charts:

Similarly, you need to define the functions for a pie and a bar chart.

In the bodies of each function, specify the chart types as the input arguments for the getData() method which takes upon itself the pre-processing of the data for this chart. You can also pass the slice of the data that differs from the current grid’s report.

As the second and the third arguments, pass the functions that act as a callback and update handlers, meaning they are called once the data is loaded into the pivot table or updated. This way we make the chart react to the tiniest changes in our report.

Also, don’t forget to set the charts options to make them look awesome.

🎨 Step 7: Apply extra options

Let’s make our dashboard even more expressive and customize the grid cells based on the values.

With the customizeCell function, we’ll redefine the style and content of the cells with totals.

Now we can clearly observe the trends in our sales data, can’t we?

🎉Step 8: Enjoy the result

Summarizing all the steps, today you’ve learned in practice how to build a sales dashboard with minimum code, maximum flexibility, and effectiveness. Now you can share it with your team and help them reveal deeper insights from the data.

See a complete code in the live demo.

You can always tune the report and get the new view of your data in real time — simply drag and drop the hierarchies to switch them, expand or collapse their members and drill through the records to see the raw data and reveal more insights. Feel free to add the report filters to focus on the months in which you are interested the most.