Small Business
25 Benutzer & 25 GB Speicherplatz
(Monatsabonnement 110 €)
Previous Tutorial: Entering your app
Next Tutorial: Creating a gauge chart
Charts are directly dependent on data Modules. Therefore, at least one Module needs to exist in your Corteza application namespace.
While theoretically not essential for creating a chart, it does help a lot to have sample data added to the Module which can be loaded in the Chart Builder. This allows you to accurately visualize your chart inside the Chart Builder before you add it as a block in the Page Builder.
Every namespace application in Corteza has its own Chart Builder. From the main menu screen, click on “Low Code”, then select “Visit namespace” for the application of your choice.
Once inside the application namespace, click on the “Admin panel” on the left menu bar.
Now, in the left menu bar you will see the third item on the menu is “Charts”.
Hit “New Chart” and select “Generic chart” from the drop-down options displayed.
Enter a “Chart name” and a “Handle”. The Handle is what will be used by other parts of the system to reference the chart, so it must consist only of letters (a-z/A-Z), numbers (0-9) or the underscore and dash characters.
Choose a “Colour scheme” from the long list of options. These include colour schemes from popular software vendors such as Microsoft or Tableau.
Then pick a “Module” from the available list.
The “Y-axis” of the chart is configured firstly. Tick the “Always begin axis scale at zero” box and add an “Axis label”. The “Min value” and “Max value” lines can remain blank for this example.
“Dimensions” are the X-axis of a chart. The “Field” line allows you to pick which field from a Module you want to show on your chart. Select your desired field and tick the “Skip missing values” box.
“Metrics” define how you want to measure and on which exact chart. Select “Count” for the “Field”, “Doughnut” for the “Output” and tick the “Always show tooltips” box. Then hit “Save” in the bottom left corner.
If you have already entered data into your data Module, then scroll to the top right corner of the screen and click on “Load data”. Your chart will appear as it will for use in the Page Builder later. Hit “Save and close”.
Via the left menu bar, navigate to the “Pages” section. Click on the “Page Builder” for the “Catalog Browser” page.
Re-size the “Catalog Browser” block to about three-quarters of the existing size by dragging and dropping it from the bottom left corner of the block.
Click on “+Add Block” at the bottom of the page. From the options presented, select “Chart”.
In the “General” tab, add a chart title and, in the “Chart” tab, select the chart you wish to display. Then hit “Add block”.
The new block will appear in the bottom left corner. Drag and drop it to the top right corner and resize it to fill the space. Then hit “Save and close”.
To delete a chart in Corteza often requires the reverse of creating a chart and putting it in a block. In other words, the block(s) in which it exists should first be deleted in the Page Builder.
Only then should the chart be deleted in the Chart Builder.
For more detailed information about charts, please read our documentation.
See for yourself how easy it is to build apps on Corteza.
Try Corteza online or install on your own server – both for free.