Tables for Dashboards

In many dashboard designs, you’ll see a set of visualizations that looks similar to what you see below.

Prod_ID Product Name YTD Sales 12 Mth Trend
1 Wheel A 120000 120000 10,12,15,21,20,19,12,10,11,10 -1
2 Wheel B 90000 90000 3,4,5,7,6,5,8,10,11,15,17,16 1
3 Wheel C 75000 75000 3,4,5,7,6,5,8,10,9,7,5,4 0

This table-like layout for measures in dashboards is common but usually a pain in the ass to assemble. There are a few business intelligence vendors that provide this. For those who
own tools that don’t but output web pages, you should be able to use my jQuery plugin to do it. This will definitely work with WebFOCUS.

This jQuery plugin that combines all the visusalization controls I’ve listed out in my blog to simplify the creation of this table of measures for dashboards.
You can download it DOWNLOAD.

There are a couple of ways to use this plugin and I will go through both in detail.

JSON Example:

This example uses a JSON array to create the scorecard.
Here’s the jsFiddle example.

The Javascript

<script type=”text/javascript” src=”js/jquery-1.11.1.min.js”></script>
<!– used to format dates –>
<script type=”text/javascript” src=”js/date.js”></script>
<!– used to format numbers –>
<script type=”text/javascript” src=”js/numeral.min.js”></script>
<!– used to visualize numbers as bars –>
<script type=”text/javascript” src=”js/dv-bar.js”></script>
<!– used to render the sparkline –>
<script type=”text/javascript” src=”js/highcharts.js”></script>
<!– used to visualize a trend in a small area–>
<script type=”text/javascript” src=”js/dv-sparkline.js”></script>
<!– used to show a visual indication of how a measure is doing–>
<script type=”text/javascript” src=”js/dv-state-indicator.js”></script>
<!– simpilfy the creation of a scorecard –>
<script type=”text/javascript” src=”js/dv-scorecard.js”></script>
<script type=”text/javascript”>

//JSON array of data

var testData = [ { “Product_ID”: “1”, “Product_Name”: “Prod 1”, “YTD_Sales”: “200200.00”, “Prev_YTD_Sales”: “185000.00”, “T_Month_Trend”: “10000.00,15000.00,20000.00,17500.00,18400.00,16500.00,10000.00,15000.00,20000.00,17500.00,18400.00,16500.00”, “State”: “1” },
{ “Product_ID”: “2”, “Product_Name”: “Prod 2”, “YTD_Sales”: “307200.00”, “Prev_YTD_Sales”: “305000.00”, “T_Month_Trend”: “20000.00,25000.00,30000.00,27500.00,28400.00,26500.00,20000.00,19000.00,20000.00,22500.00,25400.00,27500.00”, “State”: “0” },
{ “Product_ID”: “3”, “Product_Name”: “Prod 3”, “YTD_Sales”: “107200.00”, “Prev_YTD_Sales”: “105000.00”, “T_Month_Trend”: “11000.00,12000.00,14000.00,12500.00,14500.00,16500.00,10000.00,9000.00,2000.00,2500.00,2400.00,2700.00”, “State”: “-1” } ];

jQuery(document).ready(function ()
{
//create a scorecard
jQuery(‘#scTable’).dvScorecard({
a_data: testData,
a_col_options: [
{
s_header: ‘Prod Name’,
s_field_name: ‘Product_Name’,
s_content_type: ‘text’ },
{ s_header: ‘YTD Sales’,
s_field_name: ‘YTD_Sales’,
s_content_type: ‘number’,
s_format: ‘$0,0’ },
{ s_header: ‘ ‘,
s_field_name: ‘YTD_Sales’,
s_content_type: ‘bar’,
bar_options: {
i_barContainerHeight: 20 //height of the bar container in pixels ,
i_barContainerWidth: 50 //width of the bar in pixels ,
i_barHeight: 12 //height of the bar in pixels ,
f_minValue: 0 //min value of the range – do not set – it should never be zero ,
f_maxValue: 400000 //max value of the range – do not set , s_barColor: ‘#00FF00′
}
},
{ s_header: ’12 Month Trend’,
s_field_name: ‘T_Month_Trend’,
s_content_type: ‘spark’,
spark_options: {
s_line_color: ‘#0000FF’,
zoom_enable: true,
zoom_imageURL: ‘images/zoom_icon.png’,
zoom_URL: ‘twelve-month-trend-zoom.html’,
zoom_parameters: [‘Product_ID’, ‘Product_Name’]
}
} ]

});

});

</script>

The HTML Markup

<div id=”json-example”></div>

 

The Result

HTML Example

You can create a table of measures visualization off of an HTML table, as well.

However, the HTML table must contain the THEAD and TBODY tag for this to render properly.

Here’s the jsFiddle example.

The Javascript

<script type=”text/javascript” src=”js/jquery-1.11.1.min.js”></script>
<!– used to format dates –>
<script type=”text/javascript” src=”js/date.js”></script>
<!– used to format numbers –>
<script type=”text/javascript” src=”js/numeral.min.js”></script>
<!– used to visualize numbers as bars –>
<script type=”text/javascript” src=”js/dv-bar.js”></script>
<!– used to render the sparkline –>
<script type=”text/javascript” src=”js/highcharts.js”></script>
<!– used to visualize a trend in a small area–>
<script type=”text/javascript” src=”js/dv-sparkline.js”></script>
<!– used to show a visual indication of how a measure is doing–>
<script type=”text/javascript” src=”js/dv-state-indicator.js”></script>
<!– simpilfy the creation of a scorecard –>
<script type=”text/javascript” src=”js/dv-scorecard.js”></script>
<script type=”text/javascript”>

jQuery(document).ready(function ()
{
//create a scorecard
jQuery(‘#scTable’).dvScorecard(
{
a_data: testData,
b_html_table: true,
a_col_options: [
{ s_header: ‘Prod Name’,
s_field_name: ‘Product_Name’,
s_content_type: ‘text’ },
{ s_header: ‘YTD Sales’,
s_field_name: ‘YTD_Sales’,
s_content_type: ‘number’,
s_format: ‘$0,0’ },
{ s_header: ‘ ‘,
s_field_name: ‘YTD_Sales’,
s_content_type: ‘bar’,
bar_options: {
i_barContainerHeight: 20 //height of the bar container in pixels ,
i_barContainerWidth: 50 //width of the bar in pixels ,
i_barHeight: 12 //height of the bar in pixels ,
f_minValue: 0 //min value of the range – do not set – it should never be zero ,
f_maxValue: 400000 //max value of the range – do not set , s_barColor: ‘#00FF00′
}
},
{ s_header: ’12 Month Trend’,
s_field_name: ‘T_Month_Trend’,
s_content_type: ‘spark’,
spark_options: {
s_line_color: ‘#0000FF’,
zoom_enable: true,
zoom_imageURL: ‘images/zoom_icon.png’,
zoom_URL: ‘twelve-month-trend-zoom.html’,
zoom_parameters: [‘Product_ID’, ‘Product_Name’]
}
} ]
});
});
</script>

The HTML Markup

<table id=”scTable”>
<thead>
<tr>
<th>
Product Name
</th>
<th>
YTD Sales
</th>
<th>
12 Month Trend
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Wheel A
</td>
<td>
120000
</td>
<td>
120000
</td>
<td>
10,12,15,21,20,19,12,10,11,10
</td>
</tr>
<tr>
<td>
Wheel B
</td>
<td>
90000
</td>
<td>
90000
</td>
<td>
3,4,5,7,6,5,8,10,11,15,17,16
</td>
</tr>
</tbody>
</table>

The Result

Product Name YTD Sales 12 Mth Trend
Wheel A 120000 10,12,15,21,20,19,12,10,11,10
Wheel B 90000 3,4,5,7,6,5,8,10,11,15,17,16

Documentation

Options

Option Type Default Value Description
a_data JSON array null Data set to be rendered as a table of measures
b_html_table bool false If true, then plugin will expect the data set to be stored in an HTML table
a_col_options array of objects null Meta data description of each column that should be rendered in the table of measures
a_col_options -> s_header string null Applicable only when b_html_table is set to false. The heading text for the column
a_col_options -> s_field_name string null Applicable only when b_html_table is set to false. The field name of the JSON array that should be used to populate this column
a_col_options -> s_content_type string null The data type of the column. It can either be ‘text’ | ‘number’ | ‘date’ | ‘bar’ | ‘spark’ | ‘state’
a_col_options -> s_format string null Valid only if s_content_type is number or date. For date formats look at this link. For number formats look at this
link.
a_col_options -> bar_options array of objects null Valid only if s_content_type is bar. Configuration options for the bar visualization
a_col_options -> bar_options -> i_barContainerHeight integer 20 Height of the bar container in pixels
a_col_options -> bar_options -> i_barContainerWidth integer 100 Width of the bar container in pixels
a_col_options -> bar_options -> i_barHeight integer 12 Height of the bar in pixels
a_col_options -> bar_options -> f_minValue float 0 The min value in the range for the bar
a_col_options -> bar_options -> f_maxValue float 100 The max value in the range for the bar
a_col_options -> bar_options -> s_barColor string #808080 The color of the bar in hex including the #
a_col_options -> bar_options -> s_barNegativeColor string #FF0000 The color of the bar if it is less than 0 in hex including the #
a_col_options -> bar_options -> s_zeroLineColor string #000000 The color of the zero line in hex including the #
a_col_options -> spark_options array of objects null Valid only if s_content_type is spark. Configuration options for the sparkline visualization
a_col_options -> spark_options -> i_height int 20 The height of the sparkline container in pixels
a_col_options -> spark_options -> i_width int 90 The width of the sparkline container in pixels
a_col_options -> spark_options -> s_line_color string #808080 The color of the sparkline in hex including the #
a_col_options -> spark_options -> b_markers_on bool false False to hide the markers; true to show the markers
a_col_options -> spark_options -> b_zoom_enable bool false True to show the zoom icon; false to hide the zoom icon
a_col_options -> spark_options -> s_zoom_imageURL string null URL of the image for the zoom icon
a_col_options -> spark_options -> s_zoom_URL string null URL of the page that will show the larger version the chart
a_col_options -> spark_options -> a_zoom_parameters string array null Array of strings that contain all the fields that should be passed inot the zoom URL
a_col_options -> spark_options -> a_zoom_parameters_values integer array null Array of integers that contain the column that will contain the value for the parameter for that row. The first column is 1.
This needs to be in the same order as the a_zoom_parameters array.
a_col_options -> state_options array of objects null Valid only if s_content_type is state. Configuration options for the state visualization
a_col_options -> state_options -> s_goodImageURL string null The image url of the good state
a_col_options -> state_options -> s_badImageURL string null The image url of the bad state
a_col_options -> state_options -> s_neutralImageURL string null The image url of the neutral state





Leave a Reply

Your email address will not be published. Required fields are marked *

Current day month ye@r *