Responsive Bootstrap Dashboard

Today we look at creating a Bootstrap Dashboard application. This layout is increasingly popular lately. It provides both a wealth of data for the user to consider and a responsive layout, which covers a wide variety of devices.

For the sample used in this blog, I have used the ShieldUI web development framework, which offers all of the widgets utilized.
The complete sample is available for download here.

The finished presentation looks like this:

The sections below elaborate a little bit more on the sections used in the sample, and the components employed in creating them. You can download the sample and review the code further.

User Profile
This section uses a standard bootstrap panel to host basic user details. Such are a user/employee name, department and position. In the footer section of the panel is a QR Code, which contains additional information and can be extended to encode an URL to a specific user page with full profile data, for example.
The footer for the panel holds a div with id="qr1". This is where the QR Code will be initialized, when the page loads. All other elements are standard Bootstrap classes, applied on html elements, which is all it takes to address a large number of issues and development challenges, related to positioning and responsiveness.

User Details
This segment on the page is similar to the previous one, however it lists specific skills. To the right of each skill is a rating component which signifies the level of proficiency in each area. The value for each rating can be modified by simply hovering over the element and choosing a new value.
As with the first panel, the footer contains a QR Code, which contains an encoded value for further drill-down, such as a separate page or url.
All widget elements, such as the QR and Rating controls are represented by a simple div element, which has an ID. This ID will be used at runtime to generate a corresponding widget.

Quarterly Performance Section
This section of the Dashboard represents quarterly data via a Jquery Chart plugin. This sample contains two series, which can plot personal, employee or company data. The number of series can easily be set to accommodate more data; however keeping the number of series to a low minimum ensures good readability.
To keep things simple, the sample uses random data, however it can be extended to fetch the data from anywhere. The dataSeries property is used to describe the two types of series rendered in the chart – line and bar series.

Overall performance Section
This section is yet another panel, which holds visualization data. This simple setup utilizes a progress bar, which signifies performance, or percent completion of a task or target. This is a very quick visual indicator whether a certain goal has been met. The code can be easily extended to use different sets of colors – for example green when the target has been met, or red if there is underperformance.

Company Performance Section
This section involves slightly more code and because of this you can refer to the sample attached in this article for a complete reference. From a structural point of view, this panel section consists of three sub-sections.
The text subsection from the right is a straightforward indicator of what is being visualized – budget trends for example. The second sub-section holds three charts with simplified layouts – spark lines, which are used to convey trends.
The last subsection holds a highly visible text section, which directly conveys the numeric value for each row.

Full Company Data Section
This section holds a standard grid table, which lists row after row of data. This can be company data, or a list of all employees in a company. The widget allows sorting and paging options out-of-the-box. The section contains the panel declaration, such as header and body. Additionally, it contains a div with id="grid1", which will render the table layout at runtime.

As mentioned initially, the complete sample is available for download here. Feel free to download it and explore its contents and code fully.