Zu Hauptinhalten wechseln

FV Decipher Unterstützung

Alle Themen, Ressourcen für FV Decipher benötigt.


Customizing the Dashboard Layout

This article contains information about editing the layout of a research dashboard, with detailed steps on reorganizing the order of elements shown in a tab, changing element or page styles, and adding external coding resources.


Simple dashboards will only have one element within each container, and containers appear vertically at the maximum width. The following sections will provide you with the keywords and syntax to change these parameters and so adjust the overall appearance of your dashboard.

1: Grouping Elements Within a Dashboard

By default, only one dashboard element is shown per container. Using the group keyword will allow you to display multiple elements in one container, where filters and zooming can be applied to all elements. Elements within groups should appear on a new line and the group itself should be ended with the keyword Endgroup.

group <name of group>


To group two charts and one table within one container, you would use the following code:

group Three Charts
chart Chart 1
 row Q1.r1 Male
 row Q1.r2 Female
 type pie

chart Chart 2
 row Q1.r1 Male
 row Q1.r2 Female
 type column

table "Table"
 row Q1.r1 Male
 row Q1.r2 Female


1.1: Changing the Container Layout

Dashboards use a 12-column layout, meaning that up to 12 elements can fit across a page within one container. The keyword layout allows you to specify how many elements are shown horizontally in a container before starting over at the left-most part of the same container. The values for layout are separated by comma:

layout <# in row 1,..., # in row n>


To allow two charts to appear in the first line of a container and a table in the second line, you would use the following code:

group layout=2,1 Two Charts in First Row
chart id=db-5 Chart 1
 row Q1.r1 Male
 row Q1.r2 Female
 type pie

chart id=db-6 Chart 2
 row Q1.r1 Male
 row Q1.r2 Female
 type column

table id=db-20 "Table"
 row Q1.r1 Male
 row Q1.r2 Female


1.2: Keeping Elements Together

The keyword keepwith moves elements to the same column as the specified element using element ids.

Note: In order for keepwith to affect the structure of your dashboard, you will first need to use the width keyword to insert visible columns.


If you are working with four different elements, and you would like the first table to appear in the same column as the first chart and the second table in the same column as the second chart, you could use the following code:

table id=Table1 width=6 Table 1
row Q1.r1
row Q1.r2

table id=Table2 width=6 Table 2
row Q1.r1
row Q1.r2

chart id=Chart1 keepwith=Table1 Chart 1
row Q1.r1
row Q1.r2
type pie

chart id=Chart2 keepwith=Table2 Chart 2
row Q1.r1
row Q1.r2
type bar


2: Altering a Dashboard’s Style

The dashboard system allows you to specify CSS styles to page elements within the dashboard.

2.1: Configurable Styles

You may create global styles that span across the entire dashboard, as well as local styles that are specific to individual charts and/or tables.

The keyword style allows you to specify CSS style for various page elements:

style <target> <css styles>

Example #1:

Changing the inner background color for all containers to black:

style container.inner background: #000;


Example #2:

Changing the text color within a tab and within a table:

style tab.active color: orange; text-shadow: 1px 2px 3px white;
page Gender
table id=db-1 Gender
   rows Q1.r1-r2
page Age

Placement for style attributes is very important. The style modification here would be a globally-applied style because it is above all occurrences of the page keyword. It will span across the entire dashboard. This code changes the active tab's font color to orange and adds a white text shadow:


page Tab 1
table id=db-1 Gender
   rows Q1.r1-r2
   style table.tr color: green;
page Tab 2

The style modification located in the table element is a locally applied style. It will only affect the table in which it is applied. This code updates the table row's font color to green:    


2.2: Available Targets

Listed below are the available targets for which you may specify a style:




Defines the styles for the chart element


Defines div that holds tables / charts

  • container.title

Defines main title for the container

  • container.inner

Defines the inner div that holds the table and chart (this is what is actually visible in each dashboard page)


Defines the styles for the page


Defines the styles for all clickable tabs


Defines the active clickable tab


Defines the div that holds the tab content


Defines the subtitle for the tab


Defines the title for the tab

tab.bar Targets the navigation bar
tab.highlight Targets the highlighted bar on the bottom of each tab


Defines the text for all tabs


Defines the actual table styles

  • table.tr

Defines the styles for table rows

  • table.th

Defines the styles for table headers

  • table.td

Defines the styles for table cells

  • table.td.data

Defines the styles for cells containing data points

  • table.td.row-legend

Defines the styles the cells column for the data tables

3: Advanced Layout Customization

The dashboard system allows you to use other programming languages like HTML, CSS, and JavaScript, along with the default style configurations to further customize your dashboard.

3.1: Adding HTML

The keyword html inserts raw HTML code into the dashboard:

html <one line of code>

If the html code exceeds one line, the keyword end should be added at the end of the code:

html <multiple lines>
<of code>


page Smartphone Owners
table id=db-1 What kind of smartphone do you own?
   html <center><h1>Results</h1></center>
   net 2 "Top 2"
   rows Q3.r1-r5
   net -2 "Bottom 2"
   chart id=db-2
       type p


You can also use the html keyword to write inline Javascript and CSS code:

page Smartphone Owners
table id=db-1 What kind of smarphone do you own?
<h1 class="clickable blue"><center>Results</h1></center>
 .blue { color: blue; }

$(document).on("globalUpdate", function() {
 $(".clickable").click(function() {

The code above works as expected and the screenshot below illustrates the result:


3.1.1: HTML Extensions

The dynamic dashboard extension system allows you to add more data, value and information to your dashboard. You can use dynamic extensions to add the following information to a dashboard's html block:

  • an element's title
  • the survey start time
  • the survey title
  • the total number of respondents
  • open-ended data
  • various data metrics (e.g. mean, median, stddev, pct, etc...)

The syntax for including dynamic dashboard extension is below:



html width=6
<h2>This survey began on {{survey.start_date}}.</h2>
It was a {{survey.start_date:format="%A"}}
in {{survey.start_date:format="%B"}}
on the {{survey.start_date:format="%I"}}th hour.
html width=6
<h2>When asked: "{{q3:title}}"</h2>
<h3>{{survey.total}} people responded with the following words:</h3>
<span class="q3-table">
span.q3-table td:first-child {
 font-weight: bold;
 color: red;

The example dashboard above generates the following result:

The { {survey.start_date} }, { {survey.total} }, and { {survey.title} } are examples of the built-in reserved keywords that you can use to present additional information in your dashboard. The following reserved keywords are available:





A date/time object that will output the date when the Survey was created


The total number of respondents for the entire survey


The survey's alternative report name


The total number of respondents for the entire survey based on the current filter


In addition to the reserved keywords above, the following attributes are accessible:




Only applicable to{ {survey.start_time} }

Formats the date/time object. Accepts all Python strftime arguments.

Supply "%s" as an argument to display the day prefix (e.g. "nth", "rd", "st")


The absolute count of respondents for the given condition (ignores filters)


The absolute percentage of respondents for the given condition (ignores filters)


The percentage of respondents for the given condition (respects filters)


The title of the condition (e.g. question's title, cell's text)


Displays open-ended text data. Can be set to:

  • list: outputs a table of all OE responses with associated ID #

  • random: returns a single random OE response

  • # (number): returns the OE response matching the given ID #


Wraps the output in a <span> element. Output format:

<span data-tag="condition" data-attributes="attributes" class="magic condition">value</span>


The total sum of all responses


The standard mean


The median


The sample standard deviation (i.e. sigma-1)


The standard error


The number of non-empty responses


The unweighted count


The base count used for calculations


The count divided by base (e.g. 40% of all respondents answered this question) (respects filters)


The alternative (default) text to display in case value is 0 or doesn't exist



table width=6
   row stats="mean" q1.r1.val MEAN
   row stats="median" q1.r1.val MEDIAN
   row stats="stddev" q1.r1.val STDDEV
   row stats="stderr" q1.r1.val STDERR
   row stats="count" q1.r1.val COUNT
   row stats="pct" q1.r1.val PCT
html width=6
   <p>MEAN: {{q1.r1.val:mean}}</p>
   <p>MEDIAN: {{q1.r1.val:median}}</p>
   <p>STDDEV: {{q1.r1.val:stddev}}</p>
   <p>STDERR: {{q1.r1.val:stderr}}</p>
   <p>COUNT: {{q1.r1.val:count}}</p>
   <p>PCT: {{q1.r1.val:pct}}</p>

The example dashboard above generates the following result:

Using the wrap attribute, we can easily add CSS styles to the generated results.


<h4>When the following question was asked:</h4>
<h4>One person said:</h4>
<h2>{{q3:oe="random" wrap}}</h2>
span.q3 {
   color: darkgreen;
   font-style: italic;
h1, h2, h3, h4 {
   text-align: center;

The example dashboard above generates the following result:

3.2: Adding CSS & JavaScript

The keyword uses allows you to create custom dashboard generators for any table or chart type.


If you wanted to generate a custom json table, you would use the following code, which references the function you need after uses:

table Custom Table
   uses jsonPrint
   row q1.r1 Male
   row q1.r2 Female

This requires that you first register a Javascript function with the dashboard generator that will accept the table/chart dashboard object as an argument and return some content:

Note: The Javascript function must be placed in the static/dashboard.js file.

(function() {
   "uses strict";
   generators.register("jsonPrint", function( data ) {
       return JSON.stringify( data );

Learn more: Add Javascript & CSS

  • War dieser Artikel hilfreich?