How to add charts

This tutorial shows you how to generate chart with data from database. In our example, we will show you how to generate chart of Users/Orders per days. We used Chart.js library to generate charts (www.chartjs.org).

Chart example

1. Login into developer panel.

2. Navigate to Pages menu item.

3. Select page where you want to generate chart.

4. Drag and drop action component to form on page (i.e. FormChart).

5. Select PHP Code as Action type.

Chart 1

6. Click on textare under Action code title. First, type code to get data from database that you will use to generate chart. In our example we will return number of Users and number of Orders per days.

Chart 2

7. In data attribute of $result variable (instance of AjaxResult class) we will return JavaScript code that will be executed in application. JavaScript code will generate div with chart in form div of application page (id of form is name of form; i.e. #FormChart).

Chart 3

8. Click on Save button.

9. Click on Save changes button, go into your application and check out the results.