Zu Hauptinhalten wechseln

FV Decipher Unterstützung

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

 
decipher

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.

Overview

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>
<elements>
Endgroup

Example:

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
Endgroup

=group.png

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>

Example:

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
endgroup

=layout.png

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.

Example:

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

exkeepwith.png

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;

styleblackbackground.png

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:

tabcolorexamples.png

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:    

tablecolorexample.png

2.2: Available Targets

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

Target

Description

chart

Defines the styles for the chart element

container

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)

page

Defines the styles for the page

tabs

Defines the styles for all clickable tabs

tab.active

Defines the active clickable tab

tab.active-foreground

Defines the div that holds the tab content

tab.active-subtitle

Defines the subtitle for the tab

tab.active-title

Defines the title for the tab

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

tab.text

Defines the text for all tabs

table

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>
end

Example:

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

html.png

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?
   total 
html
<h1 class="clickable blue"><center>Results</h1></center>
<style>
 .blue { color: blue; }
</style>

<script>
$(document).on("globalUpdate", function() {
 $(".clickable").click(function() {
   alert("Clicked!");
 });
});
</script>
end

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

clickable.png

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:

{{condition}}
{{condition:attribute}}
{{condition:attribute="arguments"}}

Example:

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

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:

 

Keyword

Description

survey.start_date

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

survey.total

The total number of respondents for the entire survey

survey.title

The survey's alternative report name

filter.total

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:

Attribute

Description

format

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")

abscount

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

abspct

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

percentage

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

title

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

oe

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 #

wrap

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

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

datasum

The total sum of all responses

mean

The standard mean

median

The median

stddev

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

stderr

The standard error

count

The number of non-empty responses

uwcount

The unweighted count

effbase

The base count used for calculations

pct

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

alt

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

 

Example:

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
   <h4>{{q1:title}}</h4>
   <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>
end

The example dashboard above generates the following result:

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

Example:

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

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.

Example:

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?