JavaScript Sales Dashboard Application

In this article, we tackle a common data visualization task – creating a sales dashboard. A sales dashboard is widely used in business presentations, to outline key performance indicators for a given business process or objective. Key to any such presentation is the good visualization of the data, as well as a polished appearance. Naturally, each sales dashboard application is different and may vary greatly. The approach demonstrated in this article employs some of the most widely used components in such scenarios. Using client-side components ensures excellent performance, great responsiveness and smooth user experience. For the task at hand, we use the ShieldUI JavaScript Suite.
The finished application looks like this:

sample

Download the code
A fully functional sample is located here. You can download it and review all the code, which is behind the demonstrated functionality. The rest of the article will focus on some of the most important aspects, required to setup the sales dashboard application.

Getting Started
In order to start using the components, the first required step is to include references to all scripts, needed for the initialization and the manipulation of the widgets. In our case, this section looks like this:

<link rel="stylesheet" type="text/css" href="shieldui.1.6.2-NonCommercial/css/dark/all.min.css" />
<script type="text/javascript" src="shieldui.com/shared/components/latest/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="shieldui.1.6.2-NonCommercial/js/shieldui-all.min.js"></script>
<link rel="stylesheet" href="Styles.css" />

In addition to the control references, the code above also includes a special css file Styles.css, which contains all the layout properties for the sample. It is responsible for the fluid layout of the page, as well as the positioning of each control and element.
The main components on the page are a grid, a circular progress bar, a chart and a group of sparklines. Each one of these will be reviewed briefly in the sections below.

Setting up the Grid
The first component on the page is the Grid. It contains the basic data for each employee or sales person, in our example. Clicking on a row in the grid component re-populates all other controls on the page. To keep things simple, most of the controls on the page use auto-generated data, however the main logic remains unchanged. The grid itself is bound to a static JSON file, which contains a large set of data records, each of which holds data on an individual sales person. The grid declaration looks like this:

$(document).ready(function () {
    $("#gridContainer").shieldGrid({
        theme: "dark",
        dataSource: {
            data: gridData
        },
        sorting: {
            multiple: true
        },
        paging: {
            pageSize: 7,
            pageLinksCount: 10
        },
        events: {
            selectionChanged: function (e) {
                populateChart();
                populateSpark();
                populateProgress();
            }
        },
        selection: {
            type: "row",
            multiple: false,
            toggle: false
        },
        columns: [
            { field: "name", title: "Sales Person", width: "100px" },
            { field: "company", title: "Product Line", width: "100px" },
            { field: "email", title: "Email Address", width: "270px" }
        ]
    });
});

The two most important sections of the widget declaration are the dataSource property, which points to the JSON object, containing all necessary data, as well as the columns property. The latter is used to specify which exact columns from the underlying data source will be displayed. Each column declaration may optionally include a width setting.
Relating the grid component to all other elements on the page is done via the selectionChanged event handler. Once the user selects a row, all other controls on the page are re-populated.

Setting up the Circular Progress Bar
The Circular progress bar is a lightweight progress - indication widget, which is ideal for visualizing completion of a process or part-of-a-whole relationships. Setting it up is demonstrated in the snippet below:

function populateProgress() {
    $("#progresBarContainer").shieldProgressBar({
        min: 0,
        max: 100,
        value: getData(1, 0, 100),
        layout: "circular",
        layoutOptions: {
            circular: {
                width: 40,
                borderWidth: 3,
                color: "#1E98E4"
            }
        },
        text: {
            enabled: true,
            template: '<span style="font-size:27px;">Performance {0:n1} %</span>'
        },
        reversed: true
    });
}

The control accepts a single value, which is matched against the min and max values, to indicate the actual completeness or progress of the value. By default, this control allows either simple text or a custom HTML template, to be rendered in the center of the progress bar. This can be used for explicit value indication. As shown above, one can set styling properties as well and completely blend the control with the page it is being integrated in.

Setting up the Chart
The chart component, positioned below the grid widget, is straightforward to set, using the code below:

function populateChart() {
    $("#chart1").shieldChart({
        theme: "dark",
        isInverted: true,
        axisX: {
            categoricalValues: ["Q1", "Q2", "Q3", "Q4"]
        },
        axisY: {
            title: {
                text: "Visitor statistics"
            }
        },
        primaryHeader: {
            text: "Personal Sales Data"
        },
        dataSeries: [
            {
                seriesType: "bar",
                collectionAlias: "Approached Prospects",
                data: getData(4, 100, 1000)
            }, 
            {
                seriesType: "bar",
                collectionAlias: "Monthly Sales",
                data: getData(4, 100, 1000)
            }
        ]
    });
}

Its data property points to a function, which will fetch the data for the current record. The X Axis is categorized into four quarterly sections via categorical values. This is a standard chart division, when dealing with sales dashboard data, as many of the sales reports are quarterly based. For this data visualization, we choose a bar chart, which is good for comparing the data of each individual Q.

Setting up the Sparklines
Below the chart component in our application are located three separate sparklines - a line, bar and area. Sparklines are lightweight chart visualizations, which are primarily used to display trends. They do not have any of the additional axes of titles of a standard chart. This setup is easily achieved by using the ShieldUI charting component. Most of the settings required are in place to turn off most of the elements in the chart control, leaving only the main series visualization in place.The layout achieved for the sparklines is demonstrated below:
sample

This completes our setup. Feel free to download the sample to view the presentation and the underlying code.