HomeGuidesRecipesAPI
HomeGuidesAPILog In

❗️

The Visuals question type needs the Content Library and Analytics to function.

The Visual question type allows you to include graphs or charts as part of the form or Dashboards, by referencing a JSON file that defines the settings and configurations to build the visual output from data sourced from a Data Question.

Data connections are referenced by name and can be static or dynamic. In this example, the Bar Chart and Donut Chart both reference the same data connection.

Usage

The JSON file is based on Vega or Vega-Lite and has to be uploaded to the Content Library as an attachment before the Visuals question type can be used. There are a variety of chart or graph Vega Examples and Vega-Lite Examples that can be added to the Content Library and all of them can be used and customized according to your design needs.

The data question acting at the data source needs to be set to invisible before the visuals question can accept the data.

When adding an Input property to the visuals question in Design, names and input text are case-sensitive; the inputs also need to be set to answer values.

Properties

Input
Visual DefinitionRefers to the name of the JSON file in Content Library that will be used to translate the data into charts, graphs or diagrams.
NameAllows adding variables and pipe separated values, making it easier for data coming from a repeating section or a data source, that will be mapped into the visualization definition, replacing the keyword ##data##.
ExportIf the value is checked, adds an option to save the image as a SVG or PNG file.

Answer

The answer contains properties to control the graph size.

JSON Example

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "data": {
    "values": ##data##
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "category", "type": "ordinal"},
    "y": {"field": "amount", "type": "quantitative"}
  }  
}

📘

##data## is not valid JSON syntax. This is a keyword used by the Visuals question type that will be replaced with a JSON formatted structure that maps data values.