Guided Examples of Research Dashboards
1: Guided Examples
When starting your own dashboard project, consider designing the overall look and functionality prior to writing any code. Using a mockup system to build a wireframe of your dashboard goes along way in helping you create dashboards quickly and effectively.
Each example below is equipped with a mockup, the steps required to build the dashboard, and a working example.
Learn more: Balsamiq. Rapid, effective and fun wireframing software
1.1: Example 1
In this first example, a simple dashboard is built using the mockup below as a starting point. This example covers the following topics:
- Adding static text
- Adding an image
- Adding a pie chart
- Adding clickable links
- Using Javascript to create a working navigation button
Example 1 Mockup
Example 1 Guide
Detailed below are the steps required to create a working example of the mockup above.
Start by creating the "Introduction" tab with the following code:
page Introduction
The "Project Title" element is a large box with text and can be created using the html
tag:
html <h1>Project Title</h1>
The "Company Branding" and "Pie Chart of Data" elements are not full-width elements. In addition to the html
tag, we must also use the width
keyword to create these elements:
html width=4 <h2>Company Branding</h2> <img src="/survey/selfserve/9d3/1312148/companylogo.jpg" /> end chart width=8 Pie Chart of Data rows q2.r1-r5 total type pie
The last row consists of two clickable text elements, one that redirects to the project's field report and one that navigates to the next tab. The following code creates the structure for these two elements, but more work is required to setup the "Next Tab" functionality:
html width=10 <h2><a href="//v2.decipherinc.com/rep/selfserve/9d3/1312148:dashboard" target="_blank">Link: Project Field Report Page</a></h2> end html width=2 <h2><a href="javascript: click_tab(2);">Next Tab »</a></h2> end
The screenshot below illustrates what we have created so far:
At this point, the dashboard is almost what we were aiming for with out initial design. To complete this dashboard, we must:
- center the text for all elements
- add Javascript code for the "Next Tab" button
- add a second tab titled "Deep Analysis"
The easiest way to center the text would be through the use of the style
keyword.
style container.inner text-align: center;
To apply this change to all of the container elements, we'll add the line above to the global area of our dashboard.
The global area is located at the top of the dashboard, before any occurrence of the page
keyword.
When clicked, the "Next Tab" button will navigate to the next tab. If you look at the code we created for the next tab button (shown below), you may notice that it is already setup to call the "click_tab" function.
html width=2 <h2><a href="javascript: click_tab(2);">Next Tab »</a></h2> end
We must create this function using Javascript. The following code can be added to our "Project Title" html
tag:
<script> function click_tab( tab_number ) { var tab_to_click = tab_number - 1; $('[href="#tab-' + tab_to_click + '"]').click(); return; } </script>
Click here for a description of the function above.
To wrap up the requirements for this example, we need to add the following line for the "Deep Analysis" tab:
page Deep Analysis
See below for a screenshot of the final result, the code we just created and a link to the demo.
Example 1 Final Result
Example 1 Code
style container.inner text-align: center; page Introduction html <h1>Project Title</h1> <script> function click_tab( tab_number ) { var tab_to_click = tab_number - 1; $('[href="#tab-' + tab_to_click + '"]').click(); return; } </script> end html width=4 <h2>Company Branding</h2> <img src="/survey/selfserve/9d3/1312148/companylogo.jpg"/> end chart width=8 Pie Chart of Data rows q2.r1-r5 total type pie html width=10 <h2><a href="//v2.decipherinc.com/rep/selfserve/9d3/1312148:dashboard" target="_blank">Link: Project Field Report</a></h2> end html width=2 <h2><a href="javascript: click_tab(2);" class="nav-button">Next Tab »</a></h2> end page Deep Analysis
Example 1 Demo
Click here to see this example live!
1.2: Example 2
This example builds off of the previous example and implements some more advanced features of the dashboard system. This example covers the following topics:
- Including a banner with segments
- Adding background colors with Javascript
- Adding local time and date with Javascript
- Adding an advanced navigation system with Javascript
- Customizing the pie chart element
Example 2 Mockup
Example 2 Guide
We'll begin by creating the structure for the top row. The "Local Time", "Project Title" and "Date" elements all reside on the same line and are created using the html
keyword:
html width=2 <h2>Local Time</h2> <div id="dashboard-time"></div> end html width=8 <h1>Project Title</h1> end html width=2 <h2>Date</h2> <div id="dashboard-date"></div> end
The code above includes <div>
elements to store the text for the time and date. The time is dynamic text that will update once every second. The date text is also dynamic, but we only need to load it once. The following Javascript code is required to display and update the time and date text:
<script> Date.prototype.timeNow = function() { return ((this.getHours() < 10)?"0":"") + this.getHours() +":"+ ((this.getMinutes() < 10)?"0":"") + this.getMinutes() +":"+ ((this.getSeconds() < 10)?"0":"") + this.getSeconds(); }; function update_time() { var new_time = new Date(); $("#dashboard-time").html( new_time.timeNow() ); } function update_date() { var new_date = new Date(); $("#dashboard-date").html( new_date.toDateString() ); } update_date(); var t = setInterval( function() { update_time(); }, 1000 ); </script>
The code above should be wrapped in a 'globalUpdate' function because it modifies the dashboard after it has been fully loaded. Click here for more information or view the final code at the end of this section for an example.
Moving onto the second row of our design, the "Company Branding" element is created using the html
keyword:
html width=4 <h2>Company Branding</h2> <img src="/survey/selfserve/9d3/1312148/companylogo.jpg" /> <br/><br/> <h4> <a href="//testdomain.com">Website</a> | <a href="mailto:testemail@testdomain.com">Email</a> | <a href="//testdomain.com/contact">Contact</a> </h4> end
Using <a>
tags, the clickable links are created without using any Javascript.
In this example, the "Pie Chart of Data" element is customized using the palette
, banner.local
, and chartopt
keywords.
chart id=db-1 width=8 Pie Chart of Data (w/Split & Animation) rows q2.r1-r5 type pie palette 2B78E4 597EAA 9FC5F8 FFFFFF banner.local Gender segment q1.r1 Male segment q1.r2 Female chartopt title.text "Small Header" chartopt title.y 5 chartopt plotOptions.pie.dataLabels.distance -30 chartopt plotOptions.pie.innerSize '10%' chartopt plotOptions.series.animation.easing 'easeInSine' chartopt plotOptions.series.animation.duration '2000' chartopt plotOptions.series.dataLabels.color 'black'
How does the code above work?
chart width=8 Pie Chart of Data (w/Split & Animation) row q2.r1-r5 type pie
The code above sets up the structure for the pie chart. It has a title, a source of data, and a type.
palette 2B78E4 597EAA 9FC5F8 FFFFFF
The palette keyword changes the default coloring of the pie slices. The screenshots below show the change the occurs when we add this line to our pie chart:
The palette keyword does not apply to split pie charts. This is a known bug.
According to the mockup, the dashboard should also allow the data to be split by gender. To accommodate this, we must add a local banner with a segment for males and females to our Pie Chart. The following code fulfills this requirement:
bannergroup.local banner.local Gender segment q1.r1 Males segment q1.r2 Females
chartopt title.text "Small Header"
Charts can be modified and customized using the chartopt
keyword. The code above adds the "Small Header" sub-title to the chart.
For more information about chart customization with chartopt
, click here.
chartopt title.y 5
Use the code above to reduce the distance from the main title to the sub-title. By default, the vertical distance is 15.
chartopt labels.style.left '0px'
Use the code above to adjust the position of "All (N=200)" text.
chartopt plotOptions.pie.dataLabels.distance -30
Instead of showing the data labels outside of the pie chart, we can reduce the distance so they appear on the inside of the pie slices. The screenshots below illustrate this change:
The pie chart can be customized to look more like a disc or a ring with the following attribute adjustment:
chartopt plotOptions.pie.innerSize '10%'
If we increase the percentage, the empty circle in the middle will increase in size. For example, increasing this percentage value from 10% to 60% produces the following result:
With the chartopt
keyword, you can also specify animations for charts.
chartopt plotOptions.series.animation.easing 'easeInSine' chartopt plotOptions.series.animation.duration '2000'
The pie chart is animated into place when the dashboard is loaded into view.
Learn more: jQuery UI 'Easing' Animations
By default, the data labels are displayed in a dark gray color. The following line of code changes the data label color to black:
chartopt plotOptions.series.dataLabels.color 'black'
The last row of elements in our initial design consists of three navigation buttons. The code below will create the structure for these elements.
html width=2 <h2><a href="javascript: navigate_tabs('previous');">« Previous</a></h2> end html width=8 <h2><a href="javascript: click_tab(1);">GoTo Introduction Tab</a></h2> end html width=2 <h2><a href="javascript: navigate_tabs('next');">Next Tab »</a></h2> end
The click_tab
function was created in the previous example. We'll use this function for the "GoTo Introduction Tab" button because this button will always navigate to the first tab.
The "Previous Tab" and "Next Tab" buttons will navigate dynamically based on the current tab being shown. For instance, if we click "Previous Tab" while on the first tab, it should navigate to the last tab because there are no tabs before the first tab. Similarly, if we click "Next Tab" while at the last tab, we should navigate back to the first tab. The code below appends two more functions in addition to the click_tab
function.
<script> function click_tab( tab_number) { var tab_to_click = tab_number - 1; $('[href="#tab-' + tab_to_click + '"]').click(); return; } function get_active_tab() { return $(".dashboard-tabs").find("li").index($(".ui-tabs-active")) + 1; } function navigate_tabs( direction ) { var current_tab = get_active_tab(), last_tab = $(".dashboard-tabs li").length, next_tab = 1; if ( direction == "next" ) { if ( current_tab < last_tab ) { next_tab = current_tab + 1; } } else { if ( current_tab > 1 ) { next_tab = current_tab - 1; } else { next_tab = last_tab; } } click_tab( next_tab ); return; } </script>
Click here for a description of the functions above.
The last requirement from the initial design is to add a background color to elements specified. The chart and table background colors can easily be adjusted using the style
keyword. However, html
elements cannot be styled this way and requires Javascript to modify the content after the dashboard has been loaded.
The following Javascript code is used to adjust the background and font color for the specified html
elements:
<script> function update_html_background_colors(html_elements, color) { $.each( html_elements, function(i, v) { $(".dashboard-element-inner").eq(v-1).css({ "background-color" : color, "color" : "white" }).find("h1, h2, h3, a, p").css("color", "white"); }); return; } var html_elements_to_update = [1, 2, 3, 7]; update_html_background_colors(html_elements_to_update, "#2B78E4"); </script>
The code above should be wrapped in a 'globalUpdate' function because it modifies the dashboard after it has been fully loaded. Click here for more information or view the final code at the end of this section for an example.
The update_html_background_colors
function works by iterating through the container element index values provided and updating the background color to the color provided. Per the initial design, there are eight total element containers. The indexes we provided to the function were [1, 2, 3, 7]
because the design shows that (from left to right) the first, second, third, and seventh containers should have a blue background color.
We have now fulfilled all of the requirements for our dashboard. The screenshot below illustrates our final result. See below for the code required for this example as well as a link to the demo.
Example 2 Final Result
Example 2 Code
style container.inner text-align: center; page Introduction Tab html width=2 <h2>Local Time</h2> <div id="dashboard-time"></div> end html width=8 <h1>Project Title</h1> <script> function click_tab(tab_number) { var tab_to_click = tab_number - 1; $('[href="#tab-' + tab_to_click + '"]').click(); return; } function get_active_tab() { return $(".dashboard-tabs").find("li").index($(".ui-tabs-active")) + 1; } function navigate_tabs(direction) { var current_tab = get_active_tab(), last_tab = $(".dashboard-tabs li").length, next_tab = 1; if (direction == "next") { if (current_tab < last_tab) { next_tab = current_tab + 1; } } else { if (current_tab > 1) { next_tab = current_tab - 1; } else { next_tab = last_tab; } } click_tab(next_tab); return; } Date.prototype.timeNow = function() { return ((this.getHours() < 10)?"0":"") + this.getHours() + ":" + ((this.getMinutes() < 10)?"0":"") + this.getMinutes() +":" + ((this.getSeconds() < 10)?"0":"") + this.getSeconds(); }; function update_time() { var new_time = new Date(); $("#dashboard-time").html(new_time.timeNow()); } function update_date() { var new_date = new Date(); $("#dashboard-date").html(new_date.toDateString()); } function update_html_background_colors(html_elements, color) { $.each(html_elements, function(i, v) { $(".dashboard-element-inner").eq(v-1).css({ 'background-color' : color, 'color' : 'white' }).find("h1, h2, h3, a").css('color', 'white'); }); return; } (function() { 'use strict'; $(document).on('globalUpdate', function() { // BEGIN YOUR JAVASCRIPT CODE HERE update_date(); var t = setInterval(function() { update_time(); }, 1000); var html_elements_to_update = [1, 2, 3, 7]; update_html_background_colors(html_elements_to_update, "#2B78E4"); // END YOUR JAVASCRIPT CODE HERE }); })(); </script> end html width=2 <h2>Date</h2> <div id="dashboard-date"></div> end html width=4 <h2>Company Branding</h2> <img src="/survey/selfserve/9d3/1312148/companylogo.jpg" /> <h4> <a href="//testdomain.com">Website</a> | <a href="mailto:testemail@testdomain.com">Email</a> | <a href="//testdomain.com/contact">Contact</a> </h4> end chart id=db-1 width=8 Pie Chart of Data (w/Split & Animation) rows q2.r1-r5 type pie palette 2B78E4 597EAA 9FC5F8 FFFFFF bannergroup.local banner.local Gender segment q1.r1 Male segment q1.r2 Female chartopt title.text "Small Header" chartopt title.y 5 chartopt plotOptions.pie.dataLabels.distance -30 chartopt plotOptions.pie.innerSize '10%' chartopt plotOptions.series.animation.easing 'easeInSine' chartopt plotOptions.series.animation.duration '2000' chartopt plotOptions.series.dataLabels.color 'black' html width=2 <h2><a href="javascript: navigate_tabs( 'previous' );">« Previous</a></h2> end html width=8 <h2><a href="javascript: click_tab( 1 );">GoTo Introduction Tab</a></h2> end html width=2 <h2><a href="javascript: navigate_tabs( 'next' );">Next »</a></h2> end page Deep Analysis
Example 2 Demo
Click here for a live demo!
1.3: Example 3
In this example, we'll extend from the previous example and add one more chart to demonstrate the ability to display stacked charts. This example covers the following topic:
- Using
chartopt
to display a stacked chart
Example 3 Mockup
Example 3 Guide
The only difference between this example and the previous is the second row of elements. To add the new column chart, we need to decrease the size of the "Company Branding" and "Pie Chart of Data" elements so that it may fit in nicely on a single line. These two elements can be re-written as follows:
width=3 <h2>Company Branding</h2> <h4> <a href="//testdomain.com">Website</a> | <a href="mailto:testemail@testdomain.com">Email</a> | <a href="//testdomain.com/contact">Contact</a> </h4> end chart width=6 Pie Chart of Data (w/Split & Animation) rows q2.r1-r5 type pie palette 2B78E4 597EAA 9FC5F8 FFFFFF bannergroup.local banner.local Gender segment q1.r1 Male segment q1.r2 Female chartopt title.text "Small Header" chartopt title.y 5 chartopt plotOptions.pie.dataLabels.distance -30 chartopt plotOptions.pie.innerSize '10%' chartopt plotOptions.series.animation.easing 'easeInSine' chartopt plotOptions.series.animation.duration '2000' chartopt plotOptions.series.dataLabels.color 'black'
The column chart is created with the following code:
chart id=db-2 width=3 Stacked Column Chart (Split) rows q2.r1-r5 type column bannergroup.local banner.local default=1 Gender segment q1.r1 Male segment q1.r2 Female banner.local No Split segment 1 No Split palette 2B78E4 597EAA 9FC5F8 FFFFFF chartopt plotOptions.column.stacking 'normal' chartopt plotOptions.column.dataLabels.color 'white'
Just like with the pie chart, the column chart is split by gender using a local banner. This time, however, the default=1
keyword was added to the gender banner so it will be applied by default. In order to remove the split, a total segment was included in a separate banner.
This is accomplished using the code below:
bannergroup.local banner.local default=1 Gender segment q1.r1 Male segment q1.r2 Female banner.local No Split segment 1 No Split
When using the "split by" feature, all charts will, by default, be created for each segment. For example, you will see two pie charts and twice as many columns when splitting by gender. We can adjust this behavior using the chartopt
keyword to modify the stacking
attribute. The following line of code does just this:
chartopt plotOptions.column.stacking 'normal'
The screenshots below illustrate what happens when we include this modification. The image on the left shows the default stacking (side-by-side) and the image on the right shows the modified stacking (one on top of each other).
As illustrated below, you may also stack charts based on the percent.
chartopt plotOptions.column.stacking 'percent'
The final result can be seen below along with the code required to make it happen and a link to the demo.
Example 3 Final Result
Example 3 Code
style container.inner text-align: center; page Introduction Tab html width=2 <h2>Local Time</h2> <div id="dashboard-time"></div> end html width=8 <h1>Project Title</h1> <script> function click_tab(tab_number) { var tab_to_click = tab_number - 1; $('[href="#tab-' + tab_to_click + '"]').click(); return; } function get_active_tab() { return $(".dashboard-tabs").find("li").index($(".ui-tabs-active")) + 1; } function navigate_tabs(direction) { var current_tab = get_active_tab(), last_tab = $(".dashboard-tabs li").length, next_tab = 1; if (direction == "next") { if (current_tab < last_tab) { next_tab = current_tab + 1; } } else { if (current_tab > 1) { next_tab = current_tab - 1; } else { next_tab = last_tab; } } click_tab(next_tab); return; } Date.prototype.timeNow = function() { return ((this.getHours() < 10)?"0":"") + this.getHours() + ":" + ((this.getMinutes() < 10)?"0":"") + this.getMinutes() +":" + ((this.getSeconds() < 10)?"0":"") + this.getSeconds(); }; function update_time() { var new_time = new Date(); $("#dashboard-time").html(new_time.timeNow()); } function update_date() { var new_date = new Date(); $("#dashboard-date").html(new_date.toDateString()); } function update_html_background_colors(html_elements, color) { $.each(html_elements, function(i, v) { $(".dashboard-element-inner").eq(v-1).css({ 'background-color' : color, 'color' : 'white' }).find("h1, h2, h3, a, p").css('color', 'white'); }); return; } (function() { 'use strict'; $(document).on('globalUpdate', function() { // BEGIN YOUR JAVASCRIPT CODE HERE update_date(); var t = setInterval(function() { update_time(); }, 1000); var html_elements_to_update = [1, 2, 3, 8]; update_html_background_colors(html_elements_to_update, "#2B78E4"); // END YOUR JAVASCRIPT CODE HERE }); })(); </script> end html width=2 <h2>Date</h2> <div id="dashboard-date"></div> end html width=3 <h2>Company Branding</h2> <img src="/survey/selfserve/9d3/160745/companylogo.jpg" /> <h4> <a href="//testdomain.com">Website</a> | <a href="mailto:testemail@testdomain.com">Email</a> | <a href="//testdomain.com/contact">Contact</a> </h4> end chart id=db-1 width=6 Pie Chart of Data (w/Split & Animation) rows q2.r1-r5 type pie palette 2B78E4 597EAA 9FC5F8 FFFFFF bannergroup.local banner.local Gender segment q1.r1 Male segment q1.r2 Female chartopt title.text "Small Header" chartopt title.y 5 chartopt plotOptions.pie.dataLabels.distance -30 chartopt plotOptions.pie.innerSize '10%' chartopt plotOptions.series.animation.easing 'easeInSine' chartopt plotOptions.series.animation.duration '2000' chartopt plotOptions.series.dataLabels.color 'black' chart id=db-2 width=3 Stacked Column Chart (Split) rows q2.r1-r5 type column bannergroup.local banner.local default=1 Gender segment q1.r1 Male segment q1.r2 Female banner.local No Split segment 1 No Split palette 2B78E4 597EAA 9FC5F8 FFFFFF chartopt plotOptions.column.stacking 'normal' chartopt plotOptions.column.dataLabels.color 'white' html width=2 <h2><a href="javascript: navigate_tabs( 'previous' );">« Previous</a></h2> end html width=8 <h2><a href="javascript: click_tab( 1 );">GoTo Introduction Tab</a></h2> end html width=2 <h2><a href="javascript: navigate_tabs( 'next' );">Next »</a></h2> end page Deep Analysis
Example 3 Demo
Click here for a live demo!