5.2.1 Graph form
Boa includes a powerfull graph form which can be used as a menu item, or as the action of a button. As with other element you can use the pagetype graph or modalgraph.
![](https://i1.wp.com/boa-platform.com/wp-content/uploads/2019/01/overview.png?resize=1024%2C446&ssl=1)
Different graphics:
![](https://i0.wp.com/www.boa-platform.com/wp-content/uploads/2019/05/graphlines.png?fit=1024%2C466&ssl=1)
There are three type of graphics build in:
- Bar graph
- Line graph
- Pie charts
![](https://i1.wp.com/boa-platform.com/wp-content/uploads/2019/05/graphpiechart.png?resize=706%2C428&ssl=1)
Setup of graphform.
The following request starts a graph from the menu:
{
“title”: “Demo chart”,
“endpoint”: “/chart/demografiek”,
“pagetype”: “graph”,
“id”: “chart1”,
“buttons”: [
“exit”
]
}
- title: description of menu-item.
- endpoint: the endpoint to get all the data for the graph.
- pagetype: graph or modalgraph.
- pagesize: if modal you can use sm, md, lg, xl.
- id: unique name
- buttons: array with exit button. BOA will add automatically the buttons to switch to bar, line or pie.
When starting a graph from a button, you need to define the onclick object of the button. This will be as follows:
onclick: {
endpoint: “/chart/klantomzet/${id}”,
buttons: [“exit”]
pagetype: “modalgraph”
pagesize: “lg”
- onclick: object for the action of the button.
- endpoint: where to get the data for the graph. Notice the use of ${id} to get the information for that specific data element, in this case a customerid.
- buttons: only exit button.
- pagetype: graph or modalgraph. Most logical to use is a modalgraph in this case.
- pagesize: sm, md, lg or xl.