How to use charts

In this video, you will learn how to use charts in Centrldesk.            

Charts are helpful for presenting data in a graphical format in order to obtain a quick overview. They are often used for reporting and dashboards. In this example we will create a chart and use it to display data from our database. So let's start building our application:

Steps:

1. We have already created a table with four columns and we have also already createt a database table with sample data.
2. First we go to the page editor by clicking on the Edit Page button in the upper right menu.
3. The Page Editor opens.
4. Drag and drop a pie chart element under charts to the middle of the page editor.
5. Centrldesk offers many different types of charts, such as Bar Charts, Pie Charts, Line Charts or Timeline Charts.
6. Select the pie chart.
7. On the right side, change the Style of the chart to donut.
8. On the right side, click on Labels.
9. The Edit list dialog opens.
10. Click on Add Item.
11. Click on Item zero.
12. The Edit chart category dialog opens.
13. Enter "Top Management" as label.
14. Confirm with save.
15. Click on Add Item.
16. Click on Item one.
17. The Edit chart category dialog opens.
18. Enter "Middle Management" as label.
19. Confirm with save.
20. Click on Add Item.
21. Click on Item two.
22. The Edit chart category dialog opens.
23. Enter "Employees" as label.
24. Confirm with save.
25. Confirm the edit list dialog with save.
26. To refresh the Pie chart later when interacting with the Add Entry button, we click on the Add Entry button and then on Edit On Click.
27. The flow editor opens.
28. Select the Refresh Chart block.
29. On the right side, select Pie Chart.
30. Close the flow editor by clicking close in the upper right corner.
31. To refresh the Pie chart later when interacting with the Remove selected entry button, we click on the Remove Selected Entry button and then on Edit On Click.
32. The flow editor opens.
33. Select the Refresh Chart block.
34. On the right side, select Pie Chart.
35. Close the flow editor by clicking close in the upper right corner.
36. In order to build an algorithm that calculates the number of top management, middle management and employees based on our database, we need three global variables.
37. Click on the variables icon on the left side.
38. The variable view is displayed.
39. Click on new.
40. The Variables dialog opens.
41. Enter the value "counter top management" as name.
42. We will need the variable later for our calculation.
43. Select number as the type.
44. Set zero als initial value.
45. Activate the two options Input and Output.
46. Confirm with ok.
47. Click on new.
48. The Variables dialog opens.
49. Enter the value "counter middle management" as name.
50. We will need the variable later for our calculation.
51. Select number as the type.
52. Set zero als initial value.
53. Activate the two options Input and Output.
54. Confirm with ok.
55. Click on new.
56. The Variables dialog opens.
57. Enter the value "counter employees" as name.
58. We will need the variable later for our calculation.
59. Select number as the type.
60. Set zero als initial value.
61. Activate the two options Input and Output.
62. Confirm with ok.
63. Select the pie chart.
64. On the right side, under Actions, click Edit on load.
65. The flow editor opens.
66. Drag and drop the Database element under App Components to the middle of the flow editor.
67. The use database dialog opens.
68. Select Get all rows of Employees.
69. Confirm with ok.
70. Drag and drop the For Each element under General to the middle of the flow editor.
71. Drag and drop the Logic element under General to the middle of the flow editor.
72. Connect the output of the Get all rows of Employees block to the input of the For Each block.
73. Connect the output of the For Each block to the input of the Logic block.
74. Select the for each block.
75. On the right side, select Object als Item Type.
76. Select employees as object type.
77. Click on list.
78. Select Custom als list.
79. The logic editor opens.
80. Drag and drop the Rows of employees element under Data from previous blocks to the middle of the logic editor.
81. Drag and drop the List element under Libraries to the middle of the logic editor.
82. Select Convert List Items.
83. Confirm with ok.
84. Click on Item Type.
85. Select data row.
86. Click on table.
87. Select Employees.
88. Click on result type.
89. Select Object.
90. Clock on object type.
91. Select Employees.
92. Confirm with ok.
93. Connect the output of the Rows of employees block to the input of the Convert list Items block.
94. Connect the output of the Convert List Items block to the input of the List block.
95. Select the Convert List items block.
96. Click on edit logic.
97. The logic editor opens.
98. Drag and drop the Data Row element under Libraries to the middle of the logic editor.
99. The data row dialog opens.
100. Select Split Data Row.
101. Confirm with ok.
102. Connect the output of the item block to the input of the Split Data Row block.
103. Connect the content output of the Split Data Row block to the input of the Result block.
104. Navigate back using the Back Button in the upper left corner.
105. Close the Logic editor by clicking close in the upper right corner.
106. Select the for each block.
107. Now we need to add logic for our calculation.
108. We'll leave the Logic configuration uncommented for a moment, as there are a lot of different steps involved here, but they are easy to understand when watching.
109. The logic checks the hierarchy level of the respective employee and counts up the corresponding counter by one.
110. Now we have finished the configuration of the Logic.
111. Navigate back using the Back Button in the upper left corner.
112. Select the logic block.
113. Click on edit logic.
114. The logic editor opens.
115. Now we have to pass the calculated values as data for the Pie chart.
116. Drag and drop the counter employees element under Variables to the middle of the flow editor.
117. The Variable dialog opens.
118. Select get variable.
119. Confirm with ok.
120. Drag and drop the counter middle management element under Variables to the middle of the flow editor.
121. The Variable dialog opens.
122. Select get variable.
123. Confirm with ok.
124. Drag and drop the counter top management element under Variables to the middle of the flow editor.
125. The Variable dialog opens.
126. Select get variable.
127. Confirm with ok.
128. Drag and drop the List element under Libraries to the middle of the flow editor.
129. The list dialog opens.
130. Select Create List.
131. Confirm with ok.
132. Select Number as Item Type.
133. Confirm with ok.
134. Drag and drop the System Object element under Libraries to the middle of the flow editor.
135. The System object dialog opens.
136. Select Create chart data series numeric.
137. Confirm with ok.
138. Drag and drop the Pie Chart element under Scope to the middle of the flow editor.
139. Now the outputs of the blocks must be connected to the corresponding inputs of the blocks.
140. The preview values help the user to connect the database values to the table columns.
141. Close the Logic editor by clicking close in the upper right corner.
142. Close the Flow editor by clicking close in the upper right corner.
143. Close the Page Editor by clicking close in the upper left corner.
144. Now we can try our application with the pie chart.
145. We can add new entries and see how the Pie Chart updates.
146. We can delete existing entries and see how the Pie Chart updates.