4.5 Charts
You can use the Charts function to create charts directly in the form to show the result of the data just captured. There are four different types of graphs, selected in Chart Type in the Element Properties: HeatMap, Progress, Sunburst, and HeatMapSunBurst.
The graph is specified through code written in JSON script and entered in the Chart Specification box. See examples of code given in a pop-up window for each of the types below (you may have to allow pop-up windows in your browser to see them).
The graphs take data input from elements presented to the user elsewhere in the form, such as Text Input, Number or Single Select elements.
Progress chart
The Progress chart is a simple horizontal bar chart that displays percentages from 0 to 100. Press here to open a separate window with the JSON code for the chart below. From this window you can select and copy the code to the Chart Specification box in the Chart element in your own form and then customize it. Here is the Designer Preview of a form with 4 Number elements for input, and the resulting Chart element below:
Heatmap chart
This chart shows various color options in colored blocks, depending on the values given. Green is often used for the most popular option, red for the most unpopular one. In the picture below we show percentages for options A1 – A4. You may add more rows to show other values as well.
Press here to open a separate window with the JSON code for the chart below. From this window you can select and copy the code to the Chart Specification box in the Chart element in your own form and then customize it.
Sunburst chart
Sunburst is a circular chart showing the various options from the center to the periphery. Press here to open a separate window with the JSON code for the chart below. From this window you can select and copy the code to the Chart Specification box in the Chart element in your own form and then customize it.
Sunburst Heatmap chart
This chart combines the designs of the Sunburst and Heatmap charts in a circular chart where the colours denotes the values from popular (green) to unpopular (red). Press here to open a separate window with the JSON code for the chart below. From this window you can select and copy the code to the Chart Specification box in the Chart element in your own form and then customize it.
JSON code tips:
- https://jsonlint.org/ is a useful site for easy editing and validation your JSON code
- If you use \n as a new line, the JSON code will be invalid
- To display the value of an element inside a label, use {0}