Analysis is one of the most critical steps in any project. A vast amount of various data and records actually contain more than you think — patterns and dependencies. By studying them, you can significantly improve your decision-making abilities and learn much more than just numbers — you can see trends and predict future tendencies. But for all this, you need a comprehensive analysis and a view from different angles.
For such thorough work, one way of analysis will not work; you need to use all methods of data processing and visualization. Therefore, the best and most irreplaceable assistant in such matters is a dashboard.
Why do I recommend using dashboards in your analytical reports?
Due to the use of different types of charts, heatmaps, and tables, dashboards allow you to visually compare metrics and show the extremes, the difference, and tendencies of changes in values in an easily perceived form. And all this is based on the same data.
That’s why I took my experience in the topic and want to share a comprehensive tutorial on how to create a dashboard.
Choosing the right tools for the dashboard
The more diverse your dataset is, the more different methods you can and should use in order to get out of this data as much new as possible. I tried to find a dataset with different data types to have a wide field for action.
After examining everything the dataset, I decided that in my dashboard, I will use:
- a pivot to aggregate data for all members,
- a regular table to see raw data and be able to find each individual record,
- a map, for a gradient display of metrics by country,
- a column chart to compare the total value for each member,
- and a pie chart for the percentage of metrics.
To make it easier to work with the dashboard, I will give it a form of a table so that you can see all the elements at once and be able to compare them.
The ideal web dashboard should be interactive so that changing the data and its presentation and instantly receiving the visualization is super convenient. Plus it saves time and makes analysis more efficient.
Accordingly, the criteria for choosing components are as follows:
- high functionality and interactivity,
- ease of implementation,
- good integration ability,
- and free to use.
As a result, for my dashboard, I chose products such as WebDataRocks Pivot Table (for flat and pivot tables) and Google Charts for everything else. Both components are absolutely free, and besides that, the WebDataRocks has a special connector for Google Charts and another charting library I want to use.
Google Charts also have maps in their list of available charts, but I used FusionCharts for visualizing country data because they are a little more interactive and user-friendly. This library is free only for non-commercial use, but for my purposes, that was enough.
However, suppose you want to use dashboards in your commercial product. In that case, you most likely should look at paid charting libraries, such as Fusion Charts, amCharts, or Highcharts, since their capabilities are much wider, and the look and animations are more pleasant.
Now the only thing left is to make a dashboard out of this. So let’s start!
1. Create The Base for a Web Dashboard
First, let’s create the page itself and add the name of our dashboard and its structure to it. Each component will be in its own container:
<H1 align=center>Sales Analytical Dashboard</H1>
<table>
<tr>
<td style="width: 750px;"><div id="wdr-component"></div>
</td>
<td><div id="googlechart-container1" style="width: 650px; height:400px;"></div>
</td>
</tr>
<tr>
<td><div id="fusionmap-container" ></div>
</td>
<td><div id="googlechart-container" ></div>
</td>
</tr>
</table>
<div id="wdr-component2"></div>
After that, we need to add scripts and styles for each library so that we can see what we are getting on the fly. Here are all that I used:
<link rel="stylesheet" type="text/css" href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" />
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<script src="https://cdn.webdatarocks.com/_codepen/webdatarocks.fusioncharts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.googlecharts.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
But many libraries have other extensions, such as themes and animations, so you can add them yourself if needed.
2. Add the Pivot Table to the Dashboard
I will start adding components from the tables, as I want the charts to visualize the data aggregated by pivot grid.
Adding a pivot to the page is a simple step, you can follow a quick guide on how to add WebDataRocks. You just need to create a pivot instance, give it raw data and specify the default slice to display:
var pivot = new WebDataRocks({
container: "#wdr-component",
toolbar: true,
height: 380,
width: "100%",
report: {
dataSource: {
"dataSourceType": "csv",
"filename": "https://cdn.webdatarocks.com/data/data.csv"
},
"slice": {
"rows": [
{
"uniqueName": "Country"
}
],
"columns": [
{
"uniqueName": "Category"
},
{
"uniqueName": "Measures"
}
],
"measures": [
{
"uniqueName": "Price",
"aggregation": "sum"
}
]
}
},
});
In the end, you will also need to add a reportcomplete event to the pivot instance, which will call functions to create the remaining elements after the pivot sums up the necessary data and is ready to give it for visualization:
reportcomplete: function() {
pivot.off("reportcomplete");
pivotTableReportComplete = true;
createGoogleChart();
createGoogleChart1();
createFusionMap();
}
Fine! Now we have a pivot and calculated data - we can move on.
3. Add Google Charts to the Dashboard
Since the pivot has a special connector for transferring data to the charts, we will use it.
Firstly, let’s add the following variables:
var pivotTableReportComplete = false;
var googleChartsLoaded = false;
They will help us understand if the pivot and charts are ready to start working with each other.
Now we need to load the chart from the Google charts library and set the onGoogleChartsLoaded() function as a callback to google.chartsevent handler:
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(onGoogleChartsLoaded);
Next, we will designate a function to create the charts:
function onGoogleChartsLoaded() {
googleChartsLoaded = true;
if (pivotTableReportComplete) {
createGoogleChart();
createGoogleChart1();
}
}
And finally, we can start drawing the charts. We have two types of them: column and pie charts. But they will be created in about the same way:
function createGoogleChart() {
if (googleChartsLoaded) {
pivot.googlecharts.getData({
type: "column"
},
drawChart,
drawChart
);
}
}
function drawChart(_data) {
var data = google.visualization.arrayToDataTable(_data.data);
var options = {
colors: ['#e44a00', '#ffeead', '#d9534f', '#ffad60', '#5bc0de', '#26827E']
};
var chart = new google.visualization.ColumnChart(document.getElementById('googlechart-container'));
chart.draw(data, options);
}
For the pie chart, it will look similar:
function createGoogleChart1() {
if (googleChartsLoaded) {
pivot.googlecharts.getData({
type: "pie"
},
drawChart1,
drawChart1
);
}
}
function drawChart1(_data) {
var data = google.visualization.arrayToDataTable(_data.data);
var options = {
legend: {
position: 'top'
},
colors: ['#68AA23', '#3e6e0c', '#2b5202', '#558c1c', '#75b533', '#95e344']
};
var chart = new google.visualization.PieChart(document.getElementById('googlechart-container1'));
chart.draw(data, options);
}
4. Add the FusionMap to the Dashboard
There is also a connector for this library, you can read more about how it works in the documentation.
Let’s start with a function to create a map:
function createFusionMap() {
var map = new FusionCharts({
"type": "maps/worldwithcountries",
"renderAt": "fusionmap-container",
"width": "100%",
"height": "400",
"dataFormat": "json"
});
The difference in creation will be more in what data this map will show. I want the map to be static, in contrast to the charts, and it remains unchanged no matter what the pivot shows.
To do this, I will also connect it with the data received from the pivot, but I will define another slice, which will not change when updated and will only apply to this map.
pivot.fusioncharts.getData({
type: "maps/" + map.chartType(),
"slice": {
"rows": [
{
"uniqueName": "Country"
}
],
"columns": [
{
"uniqueName": "Category"
},
{
"uniqueName": "Measures"
}
],
"measures": [
{
"uniqueName": "Price",
"aggregation": "sum"
}
]
}
}, function(data) {
data.chart.showLabels = "0";
data.chart.showCanvasBorder = "0";
data.chart.theme = "fint";
data.chart.nullEntityColor = "#cccccc";
data.chart.nullEntityAlpha = "50";
data.colorrange = {
"minvalue": data.extradata.minValue,
"startlabel": "Low",
"endlabel": "High",
"code": "#e44a00",
"gradient": "1",
"color": [
{
"maxvalue": data.extradata.maxValue,
"code": "#6baa01"
}
]
};
delete data.extradata;
map.setJSONData(data);
map.render();
}, function(data) {
data.chart.showLabels = "0";
data.chart.showCanvasBorder = "0";
data.chart.theme = "fint";
data.chart.nullEntityColor = "#cccccc";
data.chart.nullEntityAlpha = "50";
data.colorrange = {
"minvalue": data.extradata.minValue,
"startlabel": "Low",
"endlabel": "High",
"code": "#e44a00",
"gradient": "1",
"color": [
{
"maxvalue": data.extradata.maxValue,
"code": "#6baa01"
}
]
};
delete data.extradata;
map.setJSONData(data);
});
}
5. Add the Data Grid to the Dashboard
I think that seeing the raw data is also very important because if you notice some kind of inconsistency, you can quickly see what could have caused it by looking at the original dataset. To create a regular datа grid, I will use a flat pivot form.
The process of creating a table is the same, but in the slice, we will indicate absolutely all the fields, and at the end, we will add options, in which we will indicate that we want to see a flat table:
var pivot2 = new WebDataRocks({
container: "#wdr-component2",
height: 400,
width: "100%",
report: {
"dataSource": {
"dataSourceType": "csv",
"filename": "https://cdn.webdatarocks.com/data/data.csv"
},
"slice": {
"rows": [
{
"uniqueName": "Country"
},
{
"uniqueName": "Business Type"
},
{
"uniqueName": "Color"
},
{
"uniqueName": "Destination"
},
{
"uniqueName": "Discount"
},
{
"uniqueName": "Quantity"
},
{
"uniqueName": "Size"
}
],
"columns": [
{
"uniqueName": "Category"
},
{
"uniqueName": "Measures"
}
],
"measures": [
{
"uniqueName": "Price",
"aggregation": "sum"
}
],
"flatOrder": [
"Country",
"Category",
"Price",
"Business Type",
"Color",
"Destination",
"Discount",
"Quantity",
"Size"
]
},
"options": {
"grid": {
"type": "flat"
}
}
}
});
6. Admiring the Resulting Dashboard
Our dashboard is ready and working properly! We can change the data configuration on the pivot, and the charts will be immediately transformed, but the map will remain the same. If necessary, we can filter or sort the data both on the pivot and on the flat grid and also see the changes on the charts.
You can see an interactive demo example of my dashboard on the CodePen and play with it by yourself. Also, you can see a full realization of this tutorial with some of my comments.
I hope this tutorial helped you, and now you have an idea of how you can create a web dashboard from various JavaScript components and use them in data analysis. If you have any further questions or additions, I will be more than glad to help!