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.