How to Create a Business Data Dashboard in React
Tags: react, datavisualization, analytics, javascript
Published: 2019-05-27 16:39:15

---
title: How to Create a Business Data Dashboard in React
published: true
description: A step-by-step guide on building an interactive dashboard for visualizing data in a React application.
tags: react, datavisualization, analytics, javascript
---

![](https://www.webdatarocks.com/wd_uploads/2019/05/Copy-of-Pivot-Table-with-chart.js-5.png)

Have you ever tried to create and embed a data dashboard into your React application? If so, you may know that finding the right data visualization tools that correspond to the requirements of a particular project can be challenging. Let me outline the main requirements: 

* *Performance is above all*. The dashboard should run smoothly on any browser and device. 
* Easy integration with the underlying infrastructure of the application.
* A multitude of supported data sources for data analysis (CSV, JSON, databases).
* The dashboard should provide essential reporting features such as:

1. ***Aggregating*** raw numbers. 
2. Interactive ***filtering*** by dates and values
3. ***Sorting*** in ascending & descending order as well as the ability to define custom sorting rules.
4. ***Grouping*** data under separate dimensions.
5. Drilling through the data.

* Crucial data visualization features include:

1. A wide range of charts that can be used for *comparing values*, showing the *composition* or *distribution* of the data, analyzing *trends* over time or expressing *relationships* between variables.
2. ***Interactivity***. An end-user should be able to interact with the elements on charts.

* *Customization options* such as styles & themes. 
* Exporting results to PDF & Excel. 
* Event system. To define custom scenarios of interaction with the components, events should be supported.

Today I'd like to share with you my thoughts about using tools that meet the above-mentioned demands and work together like a charm. 

As a second part of the article, I’ll walk you through the process of creating a dashboard in the **React** application. All you need to use are two JavaScript libraries and a little bit of your imagination :) 

## What Will You Get
The dashboard consists of two parts - analytical and visual. The first one is a **pivot table** which is responsible for performing *aggregating* and *filtering* the raw data that I pull from the [MongoDB](https://www.mongodb.com/?r=dt2) database, the second one - a **charting library** for displaying this data in the form of *appealing charts*. 

To my mind, these two components are inevitable parts of any dashboard. While the pivot table takes upon itself all the necessary data transforming, the charts make this data easier to perceive for the audience. 

Here's a preview of the dashboard you will get as a result of accomplishing the tutorial:

![](https://www.webdatarocks.com/wd_uploads/2019/05/ResultingDashboardTealTheme.gif)

It's worth mentioning that you can save your results afterward: the pivot table allows [generating reports in PDF, Excel, CSV, HTML and PNG](https://www.flexmonster.com/doc/export-and-print/?r=dt2) formats and charts can be [exported to PDF or an image](https://www.fusioncharts.com/dev/exporting-charts/using-fc-export-server/exporting-charts-as-image-and-pdf/?r=dt2).

*Have no time for reading the entire tutorial*? Jump straight to the last paragraph and find a link to the CodePen demo to play with. 

Let's start with introducing the libraries. 

### Pivot Table

[Flexmonster Pivot Table & Charts](https://www.flexmonster.com/?r=dt2) is a client-side pivot table component I’d definitely recommend for using as a part of embedded BI solution. It integrates smoothly with React and other JavaScript frameworks. But, first of all, it strikes with an abundance of data sources: **CSV**, **JSON**, **SQL**, and **NoSQL** databases, and **Elasticsearch**. The second great thing is an interactive functionality that is accessible from its *user interface*. It's possible to aggregate, filter and sort data easily at runtime: 

![](https://www.webdatarocks.com/wd_uploads/2019/05/AggregationChangeFiltering.gif)

Besides, its extensive API allows defining interactive behavior and changing the appearance of the component. The thing that I especially like is the [customizeCell](https://www.flexmonster.com/demos/cell-renderer-demo/?r=dt2) API call - it helps to restyle the contents of particular cells. Another customization features are *conditional* and *number formatting* similar to the ones in Excel. Also, it’s possible to select one field with different *aggregation functions* or create custom calculated values. The latter functionality is useful when you need to track important sales and marketing metrics. 



### Charting Library
[FusionCharts](https://www.fusioncharts.com/?r=dt2) is a charting library that works with multiple JavaScript frameworks and React is one of them. It’s loved by numerous developers around the world and there are reasons for that. The thing that I liked the most is the convenience of usage. You can display any data in spectacular charts effortlessly - the [demos](https://www.fusioncharts.com/fusiontime/examples/?r=dt2) are ready to help you start the journey to the data visualization world. Another remarkable feature is the ability to change themes, labels, tooltips, and legends of the chart through configuring attributes. 


Check out how you can visualize the hierarchical data in a treemap:

![](https://www.webdatarocks.com/wd_uploads/2019/05/FusionTreemap.gif)

## Integrating Flexmonster with FusionCharts

To make two components work together, you need to initialize them and integrate after. The entire process is quite straightforward:
1. Install Flexmonster dependencies.
2. Install FusionCharts dependencies. 
3. Initialize the pivot table and feed the data into it.
4. Create your report based on this data.
5. Initialize charts once the pivot table is ready to provide data.

Later you’ll see that you can always return to step 4 so as to change the report, pass updated data to charts and get new insights.

Since each point requires more explanation, let’s get deeper into the details. 

### Installing a Pivot Table

After creating a single-page [React application](https://facebook.github.io/create-react-app/docs/getting-started/?r=dt2), you need to install Flexmonster as an *npm package* and render a pivot table into an HTML container:

```
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div id="fm-component"></div>
```

```javascript

ReactDOM.render( <
    FlexmonsterReact.Pivot toolbar = {
        true
    }
    width = {
        "100%"
    }
    componentFolder = "https://cdn.flexmonster.com/"
    report = {
        {
            "dataSource": {
                dataSourceType: "ocsv",
                filename: "http://localhost:3000/data"
            }
        }
    }
    />,
    document.getElementById("fm-component"))
);

```

### Connect Your Data Source

Now it's time to load your data into the component. Using the connector for MongoDB, I managed to establish a connection with the MongoDB database and pull the data from it. You can do the same by using [this tutorial](https://www.flexmonster.com/doc/mongodb-connector/?r=dt2).

### Create Report Based on the Data 

Firstly, define which part of the data you need to show on the grid. This subset of the report is called a slice. Here you can put the hierarchies into rows, columns, measures and set all the filters and/or sorting. 

I've tried filtering the data by months to show the revenue for two months. 

This is an example of the slice that can be a part of the report:

```javascript
"slice": {
    "rows": [{
        "uniqueName": "Date.Month"
    }],
    "columns": [{
        "uniqueName": "[Measures]"
    }],
    "measures": [{
        "uniqueName": "Revenue",
        "aggregation": "sum"
    }]
}
```

Now your pivot table is rendered and filled with the data you want to concentrate on.

### Installing Charting Library

Setting up FusionCharts is not a problem as well - following the [Integration with React](https://www.fusioncharts.com/react-charts/?r=dt2) guide leads to the successful embedding of the component in your project. After installing its *npm package*, create a `<div>` container where the chart should be rendered:

```
<script src="https://cdn.fusioncharts.com/code/latest/react-fusioncharts.js"></script>
<script type="text/javascript" src="https://unpkg.com/react-fusioncharts@2.0.1/dist/react-fusioncharts.min.js"></script>
<div id="chart-container"></div>
```

To be able to apply different themes, import the necessary scripts:

```
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.gammel.js"></script>
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.candy.js"></script>
```

### Display the Data from the Table in Charts

Each chart of the FusionCharts library accepts JSON data in a different format. Therefore, you need to pre-process the data that you request from the pivot table and provide it to the chart. There is an easy way to do it  - just add the connector of Flexmonster that handles processing the data for the appropriate type of chart. 
Here is a script to import:

```
<script src="https://cdn.flexmonster.com/flexmonster.fusioncharts.js"></script>
```

Now the methods from this connector are available in your application.

Next, you need to implement the following logic:
* Wait till the pivot table is rendered and ready to provide data (you can listen to the `reportcomplete` event for this).
* Request the data from the report by using the `flexmonster.fusioncharts.getData()` API call.
* Prepare this data and pass it to `callbackHandler` and `updateHandler` where the chart is created for the first time and updated correspondingly.

Here is an example of defining the `createChart()` function: 

```javascript
function createChart() {
    flexmonster.fusioncharts.getData({
        type: "doughnut2d",
        "slice": {
            "rows": [{
                "uniqueName": "Customer Satisfaction"
            }],
            "columns": [{
                "uniqueName": "[Measures]"
            }],
            "measures": [{
                "uniqueName": "Requests",
                "aggregation": "sum"
            }]
        }
    }, drawChart, updateChart);
}

function drawChart(data) {
    var chartConfigs = {
        type: 'doughnut2d',
        width: '500',
        height: '350',
        dataFormat: 'json'
    };
    data.chart.caption = "Customer Satisfaction";
    chartConfigs.dataSource = data;
    ReactDOM.render( <
        ReactFC {
            ...chartConfigs
        }
        />,
        document.getElementById('chart-container')
    );
}

function updateChart(data) {
    var chartConfigs = {
        type: 'doughnut2d',
        width: '500',
        height: '350',
        dataFormat: 'json'
    };
    data.chart.caption = "Customer Satisfaction";
    chartConfigs.dataSource = data;
    ReactDOM.render( <
        ReactFC {
            ...chartConfigs
        }
        />,
        document.getElementById('chart-container')
    );
}
```

And attaching the `createChart()` function to `reportcomplete` as an event handler:

```javascript
reportcomplete = {
    createChart
}
```

These snippets show how to create a single chart on the page but you can define as many charts as you need in a similar way. 

### Adding Extra Visual Features

Need to *personalize the appearance of your dashboard*? You can either change colors of particular elements of the charts/pivot table or apply pre-made themes to them. Or even both :) 

Personally, I find the teal theme of Flexmonster one of the most eye-catching. And to make the charts fit the palette of the pivot table, I specified the color palette for data plot. You can configure charts through [attributes](https://www.fusioncharts.com/dev/chart-attributes/?r=dt2). 

## Results

Save your results and check out how the chart interacts to the changes you apply to the report:

![](https://www.webdatarocks.com/wd_uploads/2019/05/LightFusionFM.gif)

### Bringing it All Together

Today you’ve learned how to enhance your React application with an analytical business dashboard. 

To my mind, these two *data visualization tools* - the pivot table and charting library - totally complement each other. With their help, you are able to create an awesome dashboard in minutes. I encourage you to experiment with your data and try multiple ways of presenting the data. 

Please share your results - I’ll be glad to see them!

Thank you for reading!

## Demo

Play with the [live demo on CodePen](https://codepen.io/ronika/pen/ZNaBxv/?r=dt2) 👩‍💻👨‍💻

### Recommended reading

Let me share with you all the useful links that helped me to understand how to use Flexmonster and FusionCharts in my React project:
* [How to create a React app](https://github.com/facebook/create-react-app/?r=dt2)
* [How to integrate Flexmonster with React](https://www.flexmonster.com/doc/integration-with-react/?r=dt2)
* [How to integrate Flexmonster with FusionCharts](https://www.flexmonster.com/demos/integration-fusioncharts/?r=dt2)
* [React component for FusionCharts](https://www.fusioncharts.com/react-charts/?r=dt2)
* [FusionCharts Gallery](https://www.fusioncharts.com/charts/?r=dt2)