Welcome! Do a SEARCH or browse through the MANUALS, TOOLS and NEWS
!!! N E W S !!!
Warning! Do you use the Forms app on Android? Please read this: Warning: Forms app users on Android – please do not install Android 12 yet (Jan 25, 2022)
Zegeba v 3.18 is now being released to our customers! Read about the amazing news in Release notes: Zegeba v 3.18! (updated Dec 28, 2021)
Read all about the new Task Template editor in this new chapter: Managing: 6 Managing task templates (Dec 28, 2021)
User manual on capturing data with the Zegeba Forms or Mobile app
Base64 code for the pokeball image:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAADtklEQVR4nFWO225UdRyF1/+wD7P3dKYFB4iISKIJyLEMA6U2wUQSNY3XvoQ3voAXarzzHXwBL/CGpDSKNUKAEsAYCSBo2zm0zHSOe2bP//jzotHgd7Wy8iVrgRwR9aynCXkylJEmbXIiRc4ZmxF5R4bIEynnPRE5NyJDxpEhCd7HdFYEcIKBj2OkUJ2rSx/mxkmGxFJsfbcs79y6y7xliMacF4mPpPOwrEVUAQSGCpFAdGFxPhj774si8amPhJ1MYxd6UboUPiya2Ue3f4cFOMABAqMpQQLCYjo+ufTRigmCkvDOeDVKQ16//3AQ4UiGx/PviJfB14dHN+5sSg0wQIKRJ53t8JmDC9X3bjoxLDKIfiEPOr9tadUJ4FVRJJljiLtvHWt59sUbwYOf1gchD8CZJ3LA2fPv/owDYQFt4+MHv+QWIZCFgAUPIIgnOtjmUf/Ywb6f+3a2f2v9CSwkWefldA4RIvv47q8VjrENCyHf4NOjU2hAKZThNyL1ple2OQwrJ2jWt/2wEpQ4h7hYW7zGPeP0mpXOgUG3MT3g4AEThEA4YIX9PjUGZQ1i2VfPip8uXe0xSCsx5YPUvv309o+MU+JkCHhtN47Vviw2TLHwzfb+iXt5KJZtk0uRWvTKzHdFFsBKObYlyxuxHBw9EsiokStJzJfkZyk9uddgGqevHP+uf2hj/FclTYOpMq6idGFOhzGkRCjH6eufdxuNfTEXkTk0G03s1Kmn6zeXzp0bBeL+vT+WFs6Sj9hcOdcUpjYZ5M+JC0BCQE6yHx6tD2FLSCeeEmJXPngfuqBIMB+EXQZeur62mjkqU7JNu/vSfZ98vMwcoK2qXZxXZHKi/sZ21hvl7Z7Ns1rtyoTIezp96fKLP59v7mxOxv36zubo7+ZOo3n5+BkiB1JEhk7MX+gTKaJ6v9vNs0a/Q25y5vLJ89XTnVa9M87Go2m2nW3uDjbrG6eqp8hoT0qqcAzIGaiyNeD2cBq12q0wLvR26fq1G9zanKEyVE02CojKRmQiKAaJ93ZCHGQoU5YMXTh7sUeWPHmi7na2M8x3t9r9zu5ot7fVaTdftuu9neaLZ+erC6TJe58TgYiISGtNRNVqlV7BGNNqter1+tbWVqPRaDabtVrtVYE55zjnAPbCwsLCZDJZWVnx3gdBoJRKkkRrvby8HMfx6upqkiT4F7a3IITQWsdxTETe+8XFRSICoLU2xszMzKytrYVhiP/DrLVCCABExBjba6213vv/bGutlHLv2n8OgH8Ak9eIhVB+E7MAAAAASUVORK5CYII=
In the Chart element, select Sunburst Heatmap as Chart Type and paste the code below in Chart Specification. Substitute center_cell_sunburstheatmap etc. with the Element IDs used in Number elements in your form. When the user fills in a value in one of these elements, the value will be displayed in the chart. In the “meta” section, use the “ranges” section for intervals, “values” for distinct values.
{
"data": {
"centerCell": {
"question": {
"path": "center_cell_sunburstheatmap"
},
"label": "{0}%\n",
"itemStyle": {
"color": {
"type": "range",
"id": "percentage"
},
"borderWidth": 0
},
"labelStyle": {
"fontSize": 20
}
},
"spokes": [
[
{
"question": {
"path": "spoke_a1"
},
"label": "A1",
"labelStyle": {
"color": "#000",
"fontSize": 20
},
"itemStyle": {
"color": {
"type": "range",
"id": "percentage"
}
}
},
{
"question": {
"path": "spoke_a2"
},
"label": "A2",
"labelStyle": {
"color": "#000",
"fontSize": 20
},
"itemStyle": {
"color": {
"type": "range",
"id": "percentage"
}
}
},
{
"question": {
"path": "spoke_a3"
},
"label": "A3",
"labelStyle": {
"color": "#000",
"fontSize": 20
},
"itemStyle": {
"color": {
"type": "range",
"id": "percentage"
}
}
}
],
[
{
"question": {
"path": "spoke_b1"
},
"label": "B1",
"labelStyle": {
"color": "#000",
"fontSize": 20
},
"itemStyle": {
"color": {
"type": "map",
"id": "values"
}
}
},
{
"question": {
"path": "spoke_b2"
},
"label": "B2",
"labelStyle": {
"color": "#000",
"fontSize": 20
},
"itemStyle": {
"color": {
"type": "map",
"id": "values"
}
}
},
{
"question": {
"path": "spoke_b3"
},
"label": "B3",
"labelStyle": {
"color": "#000",
"fontSize": 20
},
"itemStyle": {
"color": {
"type": "map",
"id": "values"
}
}
},
{
"question": {
"path": "spoke_b4"
},
"label": "B4",
"labelStyle": {
"color": "#000",
"fontSize": 20
},
"itemStyle": {
"color": {
"type": "map",
"id": "values"
}
}
}
]
]
},
"meta": {
"colors": {
"ranges": {
"percentage": {
"palette": {
"1": "#D96459",
"25": "#F2AE72",
"50": "#F2E394",
"75": "#588C7E",
"-1": "#cccccc"
},
"default": "#f5f5f5"
},
"values": {
"palette": {
"0": "#D96459",
"1": "#F2AE72",
"2": "#F2E394",
"-1": "#588C7E"
},
"default": "#f5f5f5"
}
},
"maps": {
"values": {
"palette": {
"no": "#D96459",
"partly": "#F2AE72",
"na": "#F2E394",
"yes": "#588C7E"
},
"default": "#f5f5f5"
}
}
}
}
}
In the Chart element, select Sunburst as Chart Type and paste the code below in Chart Specification. Substitute center_cell etc. with the Element IDs used in Number elements in your form. When the user fills in a value in one of these elements, the value will be displayed in the chart. In the “meta” section, use the “ranges” section for intervals, “values” for distinct values.
{
"data": {
"centerCell": {
"question": {
"path": "center_cell"
},
"label": "Center \n cell\n",
"itemStyle": {
"color": {
"type": "range",
"id": "percentage"
}
},
"labelStyle": {
"fontSize": 16
}
},
"innerRing": [
{
"question": {
"path": "inner_ring_1"
},
"label": "Inner Ring 1",
"itemStyle": {
"color": {
"type": "range",
"id": "percentage"
}
},
"labelStyle": {
"fontSize": 16
}
},
{
"question": {
"path": "inner_ring_2"
},
"label": "Inner Ring 2",
"itemStyle": {
"color": {
"type": "range",
"id": "percentage"
}
},
"labelStyle": {
"fontSize": 16
}
}
],
"outerRing": [
[
{
"question": {
"path": "outer_ring_a1"
},
"label": "Outer Ring 1",
"labelStyle": {
"color": "#000",
"fontSize": 14
},
"itemStyle": {
"color": {
"type": "range",
"id": "percentage"
}
}
},
{
"question": {
"path": "outer_ring_a2"
},
"label": "Outer Ring 2",
"labelStyle": {
"color": "#000",
"fontSize": 14
},
"itemStyle": {
"color": {
"type": "range",
"id": "percentage"
}
}
},
{
"question": {
"path": "outer_ring_a3"
},
"label": "Outer Ring 3",
"labelStyle": {
"color": "#000",
"fontSize": 14
},
"itemStyle": {
"color": {
"type": "range",
"id": "percentage"
}
}
}
],
[
{
"question": {
"path": "outer_ring_b1"
},
"label": "Outer Ring 1",
"labelStyle": {
"color": "#000",
"fontSize": 14
},
"itemStyle": {
"color": {
"type": "map",
"id": "values"
}
}
},
{
"question": {
"path": "outer_ring_b2"
},
"label": "Outer Ring 2",
"labelStyle": {
"color": "#000",
"fontSize": 14
},
"itemStyle": {
"color": {
"type": "map",
"id": "values"
}
}
},
{
"question": {
"path": "outer_ring_b3"
},
"label": "Outer Ring 3",
"labelStyle": {
"color": "#000",
"fontSize": 14
},
"itemStyle": {
"color": {
"type": "map",
"id": "values"
}
}
}
]
]
},
"meta": {
"colors": {
"ranges": {
"percentage": {
"palette": {
"1": "#e04845",
"25": "#F2AE72",
"50": "#f4f449",
"75": "#388926"
},
"default": "#f5f5f5"
},
"values": {
"palette": {
"0": "#e04845",
"3": "#F2AE72",
"6": "##f4f449",
"9": "#388926"
},
"default": "#f5f5f5"
}
},
"maps": {
"values": {
"palette": {
"no": "#e04845",
"partly": "#f4f449",
"na": "#ad9e9d",
"yes": "#388926"
},
"default": "#f5f5f5"
}
}
}
}
}
In the Chart element, select Progress as Chart Type and paste the code below in Chart Specification. Substitute value1 etc. with the Element IDs used in Number elements in your form. When the user fills in a value in one of these elements, the value will be displayed in the chart.
{
"data":[
{
"path": "value1"
},
{
"path": "value2"
},
{
"path": "value3"
},
{
"path": "value4"
}
]
}
In the Chart element, select Heatmap as Chart Type and paste the code below in Chart Specification. Substitute heatmap_a1 etc. with the Element IDs used in Number elements in your form. When the user fills in a value in one of these elements, the value will be displayed in the chart. In the “meta” section, use the “ranges” section for intervals, “values” for distinct values.
{
"data": [
{
"label": "A Label",
"columns": [
{
"question": {
"path": "heatmap_a1"
},
"label": "A1\n{0}%",
"itemStyle": {
"color": {
"type": "range",
"id": "percentage"
}
}
},
{
"question": {
"path": "heatmap_a2"
},
"label": "A2\n{0}%",
"itemStyle": {
"color": {
"type": "range",
"id": "percentage"
}
}
},
{
"question": {
"path": "heatmap_a3"
},
"label": "A3\n{0}%",
"itemStyle": {
"color": {
"type": "range",
"id": "percentage"
}
}
},
{
"question": {
"path": "heatmap_a4"
},
"label": "A4\n{0}%",
"itemStyle": {
"color": {
"type": "range",
"id": "percentage"
}
}
}
]
}
],
"meta": {
"colors": {
"ranges": {
"percentage": {
"palette": {
"1": "#D96459",
"25": "#F2AE72",
"50": "#F2E394",
"75": "#588C7E",
"-1": "#cccccc"
},
"default": "#f5f5f5"
}
},
"maps": {
"values": {
"palette": {
"no": "#D96459",
"partly": "#F2AE72",
"na": "#F2E394",
"yes": "#588C7E"
},
"default": "#f5f5f5"
}
}
}
}
}