Creating Responsive Dashboards with Interactive Charts and Bootstrap

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.

Read on to know how.

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 Solution

FusionCharts Suite XT is a front-end, JavaScript-based charting library. It is a comprehensive collection of simple and complex charts (like the column and bar charts, pie and doughnut charts, treemap, heatmap, logarithmic charts), gauges and widgets (like the angular gauge, bulb gauge, thermometer gauge, and funnel and pyramid charts), and maps (for all continents, major countries, and all US states). All charts in the suite are responsive and can be extensively used to create dashboards for showcasing data across different functions and domains, including Finance, Sales, Marketing, IT, Healthcare, Education, and Government.

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, a popular front-end framework, 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.

Example: Creating a Responsive Dashboard with Interactive Charts

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.

For demonstrating how Bootstrap and FusionCharts can be used together to create impressive, and responsive, dashboards, we’ve reproduced one part of the Google Analytics dashboard and made it responsive, as shown in the image below:

The Google Analytics Dashboard, as partially reproduced by using FusionCharts with Bootstrap

The Google Analytics Dashboard, as partially reproduced by using FusionCharts with Bootstrap

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 dashboard has been created 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.

Click here to view the dashboard in action. Try rendering it on devices with different screen resolutions to see how the dashboard layout adapts to the current screen resolution.

The images below are partial screenshots showing how the dashboard layout readjusts to fit in on a phone and an iPad.

Partial view of the Google Analytics dashboard when rendered on a mobile browser

Partial view of the Google Analytics dashboard when rendered on a mobile browser

Partial view of the Google Analytics dashboard when rendered on an iPad

Partial view of the Google Analytics dashboard when rendered on an iPad

Leave a Comment