Wikipedia defines dashboards as easy-to-read, often single page, real-time user interfaces, showing a graphical representation of the current status and the historical trends of an organization’s key performance indicators to enable instantaneous and informed decisions to be made at a glance.
If you are somebody who works with dashboards and information systems regularly, you’d know that at a glance is the keyword here and a pretty crucial one at that—considering the number of devices with different screen resolutions that are available and are increasingly being used for browsing. This mandates adopting responsive web design.
FusionCharts suggests a solution for creating responsive dashboards that is as simple as it gets.
The Problem at Hand
In today’s day and age, browsing web pages is not restricted to just through desktops—smartphones and tablets have caught up. However, if the layout of a website/application is not responsive, browsing on a device smaller than the conventional desktop often needs a lot of re-sizing. Consequently, users find it difficult to navigate through and comprehend the data on the screen.
In case of dashboards, it is important that all the information showcased fits within one screen; the use of a scroll should be as minimal as possible. Earlier designers could create separate web pages that could be rendered on mobile phones. However, with the present range of devices that users can use to access data, designing something that is consistent across resolutions of different kind of devices is a cumbersome task.
As a result, the viewing experience of a user and the productivity of the organization suffer. The Google Analytics dashboard gives website owners a holistic view of the website traffic statistics. The dashboard gives you traffic information for a specified duration, which includes the total number of visitors for that duration, traffic classification (based on visitor type, gender, age group, traffic source, and location), and so on.
The Google Analytics dashboard is a great example of how dashboards should be and what information they should communicate. However, the dashboard is not responsive, which makes it difficult to be viewed using mobile devices.
To add to the visualization experience offered by FusionCharts, a responsive web layout is all that is needed. FusionCharts can be easily integrated with Bootstrap, to create responsive dashboards.
Bootstrap is an open source, front-end web framework, used for designing web applications and websites. The framework is built on CSS and written in LESS (a style sheet language that uses variables, functions, and several other techniques to help make your CSS customizable).
Bootstrap comes with a collection of free to download and use templates, simplifying website designing significantly. The templates are showcased along with their source code, so all you need to do is modify the source code to suit your requirements—no coding from scratch required.
Responsiveness to the client device’s screen resolution is Bootstrap’s strongest feature. Merging FusionCharts’ ready-to-use chart samples with Bootstrap’s responsive, ready-to-use templates makes creating dashboards easier than ever.
Since Bootstrap plugins are heavily dependant on jQuery, the FusionCharts jQuery plugin can be used to simplify communication between the two.
The problem with respect to the Google analytics can be solved if we create a dashboard using the FusionCharts jQuery plugin with the Bootstrap library. Using FusionCharts lets you pick the right chart type for showcasing specific kinds of data; using Bootstrap allows you to create a responsive dashboard that is rendered and works consistently across all platforms and browsers.
How we did it?
This article is a step-by-step explanation of how FusionCharts and Bootstrap have been used to create the Google Analytics dashboard.
Pre-requisites To get the code in this article working we need the below packages installed for the project:
- Fusioncharts Suite XT (for rendering charts on the dashboard)
- Fusioncharts jquery plugin (for using the jQuery syntax to render and manipulate charts seamlessly across browsers and devices)
- Bootstrap library—including the .css and .js files (for adding responsiveness to the dashboard)
- Bootstrap DateTimePicker library (for handling date and time inputs)
Installing Fusioncharts Suite XT You can easily buy a licensed version of FusionCharts to use in any commercial application or download the trial version that is available for free with no feature restriction (trial version will show an evaluation watermark).
Setting up FusionCharts Suite XT
- Create a folder named fusioncharts in your working folder.
Installing jQuery Download jquery file from here. You can place the jquery-1.12.4.min.js in the js folder of your working directory. Include the file in the required page using the command line given below:
Installing the FusionCharts jQuery plugin
- Download the Fusioncharts jquery plugin from here.
- Extract the downloaded zip file and copy the fusioncharts.jqueryplugin.js file from the src folder to the fusioncharts folder in the working directory.
- Installing Moment.js
- Download Moment.js from here.
- Place the file in the js folder of your working directory.
- Include the file in the required page using the command line given below:
Installing the Bootstrap library
- Download Bootstrap from here.
- Extract and place all the folders in your working directory.
- Include links to the required assets (the CSS and JS files, and so on) in the HTML page that you create, as shown below:
Installing the Bootstrap DateTimePicker library
- Download the DateTimePicker library from here.
- From the downloaded library, copy the bootstrap-datetimepicker.js file to the js folder and the bootstrap-datetimepicker.css file o the css folder of your working directory.
In the required pages, include these files using the command lines given below:
Create a file index.html in the root for the working directory.
- Create a file data.js for holding the data in the js folder of your working directory.
- Create a file dashboards.js for holding the data in the js folder of your working directory.
- Include all the dependencies that you have installed in the index.html page, the file should be in the same order as they are mentioned below: