Today we’ll look at creating a Bootstrap Dashboard application.
Bootstrap is the popular front-end framework, which addresses important development problems such as element positioning, application responsiveness and multi-device rendering. The Dashboard elements are a number of visualizations, which represent key performance indicators, such as budget, visits, or any other key metrics.
Implementing a visually appealing setup that does not simply present the data, but does so in compelling and stylish manner is a two-step process.
First, we need widgets to render all underlying data and provide an additional level of interaction, such as tooltips, selection or hover effects. Some of the data can also be encoded via QR codes, is suitable for cases when we need to show either a longer link, or additional detailed information on a given entry.
This task is handled by the ShieldUI web development framework, which offers all of the widgets utilized. From this framework, we utilize its JQuery widgets, such as chart, grid, QR code, and rating, which offer excellent client side performance and responsiveness.
Second, we need to ensure all elements from the dashboard are rendered into separate sections. Additionally, we need to ensure all such sections are coherently positioned and retain their good appearance on any device. Normally, this is a complicated task. Happily, Bootstrap makes this just a matter of setting a few CSS classes.
The complete sample is available for download here. The finished presentation looks like this:
(Click on the image to enlarge it)
Application Structure
Although a complete Dashboard can include any possible combination of widgets and layout elements, I have picked the most widely used. From a layout perspective, the page is divided into responsive panels, the positioning of which is determined by the Bootstrap layout system. On smaller screens, each section is adequately positioned to occupy all of the available space.
The widgets used are JQuery QR code, JQuery rating control, two different layouts for the graphs, utilizing a JQuery Chart plugin, a circular progress bar, and a grid. From a development perspective, I have used a simple html file, which hosts all the required code.
Required Resources
The head section of the application hosts all of the required resources. These include the Bootstrap CDN location, which will load all required CSS classes, along with JQuery and ShieldUI scripts. The last thing, which is loaded from the head section, is a JSON file, containing the raw data for the grid component.
The complete head section looks like this:
<head> <title>Bootstrap Dashboard</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href=" /> <link rel="stylesheet" type="text/css" href=" /> <link rel="stylesheet" type="text/css" href=" /> <script type="text/javascript" src="></script> <script type="text/javascript" src="></script> <script src="gridData.js"></script> </head>
Once we have all the required resources in place, we can begin constructing the page. I will go over all of the panels on the page in turn.
User Profile
This section uses a standard Bootstrap panel to host basic user details: 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 or other relevant data.
The code, which holds this section, is listed below:
<div class="col-sm-6 col-lg-3"> <div class="panel panel-primary"> <div class="panel-heading"> <h4 class="text-center">User Profile<span class="glyphicon glyphicon-user pull-right"></span></h4> </div> <div class="panel-body text-center"> <p class="lead"> <strong>Mike Smith</strong> </p> </div> <ul class="list-group list-group-flush"> <li class="list-group-item liitem"><strong>Position:</strong> <span class="pull-right">Developer</span> </li> <li class="list-group-item liitem"><strong>Company:</strong> <span class="pull-right">EasyTech</span> </li> <li class="list-group-item liitem"><strong>Department:</strong> <span class="pull-right">Dataviz</span> </li> <li class="list-group-item liitem"><strong>Project Duration:</strong> <span class="pull-right">12 months</span> </li> </ul> <div class="panel-footer"> <div class="row"> <div class="col-xs-4 col-sm-3 col-md-4 col-lg-2"> </div> <div class="col-xs-2 col-sm-4 col-md-4 col-lg-4" id="qr1"> </div> <div class="col-xs-6 col-sm-5 col-md-4 col-lg-6"> </div> </div> </div> </div> </div>
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.
The code for this section is listed below:
<div class="panel panel-primary"> <div class="panel-heading"> <h4 class="text-center">Skills<span class="glyphicon glyphicon-saved pull-right"></span></h4> </div> <div class="panel-body text-center"> <p class="lead"> <strong>Technology Overview</strong> </p> </div> <ul class="list-group list-group-flush"> <li class="list-group-item liitem"> <div class="skillLineDefault"> <div class="skill pull-left text-center">HTML5</div> <div class="rating" id="rate1"></div> </div> </li> <li class="list-group-item liitem"> <div class="skillLineDefault"> <div class="skill pull-left text-center">CSS</div> <div class="rating" id="rate2"></div> </div> </li> <li class="list-group-item liitem"> <div class="skillLineDefault"> <div class="skill pull-left text-center">jQuery</div> <div class="rating" id="rate3"></div> </div> </li> <li class="list-group-item liitem"> <div class="skillLineDefault"> <div class="skill pull-left text-center">C#</div> <div class="rating" id="rate4"></div> </div> </li> </ul> <div class="panel-footer"> <div class="row"> <div class="col-xs-4 col-sm-3 col-md-4 col-lg-2"> </div> <div class="col-xs-2 col-sm-4 col-md-4 col-lg-4" id="qr2"> </div> <div class="col-xs-6 col-sm-5 col-md-4 col-lg-6"> </div> </div> </div> </div>
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.
The code that renders this section is listed below:
<div class="col-sm-12 col-md-12 col-lg-6">
<div class="panel panel-primary" style="height: 491px;">
<div class="panel-heading">
<h4 class="text-center">Quarterly Performance<span class="glyphicon glyphicon-screenshot pull-right"></span></h4>
</div>
<div id="chart1">
</div>
</div>
</div>
Since there are only two sections in this panel, the html code is straightforward. The Chart widget is populated at runtime and its structure is described via the following JavaScript declaration:
function initializeChart1() {
var data1 = getRandomArray(20, 1, 50);
var data2 = getRandomArray(20, 20, 70);
$("#chart1").shieldChart({
theme: "light",
exportOptions: {
image: false,
print: false
},
primaryHeader: {
text: "Performance Data"
},
tooltipSettings: {
axisMarkers: {
enabled: true,
mode: 'x',
width: 2,
zIndex: 3,
drawColor: "white"
}
},
dataSeries: [
{
seriesType: 'bar',
collectionAlias: 'Achieved',
data: data1
},
{
seriesType: 'line',
collectionAlias: 'Target',
data: data2
}
]
});
}
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 containing visualized 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 in this 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.
(Click on the image to enlarge it)
/filters:no_upscale()/articles/Bootstrap-Dashboard/en/resources/A.png){kind=link}
/filters:no_upscale()/articles/Bootstrap-Dashboard/en/resources/H.png){kind=link}
The code for the html portion of this section is simple:
<div class="row"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="panel panel-primary" style="height: 472px; min-width: 597px;"> <div class="panel-heading"> <h4 class="text-center">Full Company Data<span class="glyphicon glyphicon-eye-open pull-right"></span></h4> </div> <div id="grid1" style="max-height: 393px;"> </div> </div> </div> </div>
It 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.
Initializing the widgets
Each widget has an associated JavaScript function, which will initialize it accordingly. For example, the grid widget described above, is initialized in the following function:
function initializeGrid1() {
$("#grid1").shieldGrid({
dataSource: {
data: gridData
},
sorting: {
multiple: false
},
paging: {
pageSize: 8,
pageLinksCount: 10
},
selection: {
type: "row",
multiple: true,
toggle: false
},
columns: [
{ field: "id", title: "ID" },
{ field: "name", title: "Person Name" },
{ field: "company", title: "Company Name" },
{ field: "email", title: "Email Address" }
]
});
}
For the sake of brevity, I will not list all the code here, but the logic remains the same – each such function initializes a separate widget. Each widgets serves further visualization and interaction purposes.
This completes our setup and outlines most of the elements rendered on the page. Feel free to download the sample and run it locally or further explore each section, element, or widget.
About the Author
David Johnson is a 37 years old developer from London, UK. For the past 15 years he worked mainly in the field of web technologies. During the last 10 years, I he focused primarily on ASP.NET and MVC. David worked on many projects as a contract developer. David’s most recent position is a Lead developer at ShieldUI.