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 &raquo;</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.

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 &raquo;</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 &raquo;</a></h2>
end

page Deep Analysis

Example 1 Demo

Click here to see this example live!

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>

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:

     

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');">&laquo; 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 &raquo;</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 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' );">&laquo; 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 &raquo;</a></h2>
end

page Deep Analysis

Example 2 Demo

Click here for a live demo!

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' );">&laquo; 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 &raquo;</a></h2>
end

page Deep Analysis

Example 3 Demo

Click here for a live demo!