Headline, title, display key and footnote

You can customize the headlines, titles, footnotes and formats for any element.

Protobi chart element titled 'Happiness' showing a headline 'Majority of respondents would say they are pretty happy', full question text 'Q.1 Generally, how would you say things are these days in your life - would you say that you are very happy, pretty happy, or not too happy?', horizontal bar chart with response percentages (Very happy 30.5%, Pretty happy 50.9%, Not too happy 15.4%, Don't know/Refused 3.2%), sample size of 2511, and footnote 'all respondents'.

The most direct way to edit the headline, title, display key or footnote is to press on them, and when they turn editable, type in them directly.

Animated GIF showing the Protobi interface with inline editing of element properties. The main view displays a project with navigation sidebar showing question items (Q1-Q6, Q11-Q17, q15, Q18-Q23, Q25-Q29, Q31-Q35, Q36-Q44, Profile, Admin, Fields). The content area shows the 'Q1-Q6' element with the 'q1' question about happiness, including the bar chart with response percentages and editable text fields for displayKey, headline, title, and footnote.

More properties dialog...

Another way to edit these properties is to press the edit icon and select "More properties". This will bring up a dialog in which you can edit directly:

Element properties dialog titled 'Element properties: Happiness' with a blue header and help icon. The dialog shows input fields for key (q1), displayKey (Happiness), headline BETA (Majority of respondents would s...), title (Q.1 Generally, how would you s...), and footnote (all respondents). Each field has a text input box on the right with the corresponding value.

Edit JSON dialog

Another approach is to edit the properties directly in JSON.  Here's a quick cheat sheet to common properties:

displayKey

Specifies a different string to display in the element's header. This might be handy if the survey define a column with key s0 but you would prefer the user to see Specialty instead. In this case you might have:

{
   "key": "s0",
   "displayKey": "Specialty"
}

headline

Bold text that appears below the element header. The headline for an element is the key takeaway that is representative of the chart. Many elements may not need a headline. 

"headline": "Majority of respondents would say they are pretty happy"

title

Longer text that appears below the headline. For instance, the element specialty might have the title "Doctor, what is your primary specialty?"

"title": "Q.1 Generally, how would you say things are these days in your life
- would you say that you are very happy, pretty happy, or not too happy?"

showHtml

If title text includes HTML (e.g. images, bold/italic, etc), showHTML will allow the text to be shown with:

"showHtml": "true"

footnote

Text that appears at the bottom of the element as gray and italicized. It's useful for permanent notes related to the element, such as applied skip patterns and whether missing values are shown.

"footnote": "all respondents"

color heritable

The color of the element icon. It may be any CSS named color (e.g. "color": "gold") or hexadecimal color code (e.g."color": "#FA0")

colors heritable

The colors of the chart. (e.g. stack chart) It may be any CSS named color (e.g. "color": "gold") or hexadecimal color code (e.g."color": "#FA0")

format heritable < object >

Translates raw values to human-readable strings for display. Underlying value is unchanged. Formats are directly comparable to SPSS value labels. Formats are specified as JavaScript objects with the raw value as the key and the formatted string as the value, e.g.

"format": {
       "AD": "Andora",
       "AI": "Anguila",
       "AG": "Antigua",
       "AR": "Argentina",
      ...
   }

If no format is defined, then all raw values that appear in the data are displayed directly in the distribution. If a format is defined, then all formatted values appear in the distribution, whether or not they have data values. Values that exist in the data but are not defined in the format will appear under "Other".

You can toggle formatted value vs. raw value using the Format button.

display

Valid Values are: ("independent"|"compact"|"checkbox")

  • "independent"
  • "compact"
  • "checkbox"