< Back
You are here:
Print

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.

Graph as a menu-item opened in a tabpage of the application.

Different graphics:

Line graph with cumulation.

There are three type of graphics build in:

  • Bar graph
  • Line graph
  • Pie charts
Pie chart sample

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.

Next 5.2.2 Graph / Chart data
Table of Contents