×
Menu
Index
Zoekopdracht
 
   
   
   
 
  (c) ABO Service bv, 2022

5.2. 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:
 
 
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.
 

Graph / Chart data.

 
At the startup of the graph BOA will send his request to the endpoint to your iAPI. You need to send all the data in your response, so the chart can be build with your data.
 
Request: url/onclick.endpoint/id
 
Sample: url/chart/customersales/123
 
Result: data to create the chart.
 
{
"chart": {
"data": [
{
"month": "Jul",
"16Debet": 91026.65,
"16Credit": 13642.39,
"17Debet": 81154.46,
"17Credit": 63782.76
},{
"month": "Aug",
"16Debet": 55394.01,
"16Credit": 4146.51,
"17Debet": 42131.31,
"17Credit": 58718.39
},{
"month": "Sep",
"16Debet": 47224.12,
"16Credit": 2787.89,
"17Debet": 42157.41,
"17Credit": 40214.29
},{
"month": "Oct",
"16Debet": 106196.52,
"16Credit": 200834.14,
"17Debet": 40889.43,
"17Credit": 2279.42
},{
"month": "Nov",
"16Debet": 48437.26,
"16Credit": 66301.66,
"17Debet": 47477.81,
"17Credit": 56979.84
},{
"month": "Dec",
"16Debet": 70183.9,
"16Credit": 6922.61,
"17Debet": 57878.59,
"17Credit": 89498.24
},{
"month": "Jan",
"16Debet": 70611.4,
"16Credit": 94323.92,
"17Debet": 65398.25,
"17Credit": 104797.76
},{
"month": "Feb",
"16Debet": 65128.65,
"16Credit": 93404.85,
"17Debet": 52173.84,
"17Credit": 47789.03
},{
"month": "Mar",
"16Debet": 45521.06,
"16Credit": 53781.59,
"17Debet": 48040.31,
"17Credit": 62582.84
},{
"month": "Apr",
"16Debet": 48255.37,
"16Credit": 42343.5,
"17Debet": 51060.76,
"17Credit": 45996.81
},{
"month": "May",
"16Debet": 62680.23,
"16Credit": 62729.35,
"17Debet": 33270.77,
"17Credit": 34142.09
},{
"month": "Jun",
"16Debet": 73034.82,
"16Credit": 82631.68,
"17Debet": 55082.73,
"17Credit": 49103.35
}],
"title": "Customers",
"description": "Sales overview",
"max": 200834.14,
"min": 0,
"cumul": 783693.99,
"axis": "Amount euro",
"legend": [
{
"name": "month",
"title": "month"
},{
"name": "16Debet",
"title": " 16 - Debet."
},{
"name": "16Credit",
"title": " 16 - Credit."
},{
"name": "17Debet",
"title": " 17 - Debet."
},{
"name": "17Credit",
"title": " 17 - Credit."
}]}}
 
  • chart: contains the complete object.
  • data: contains the data for the chart. Data is an array with all the objects for the graph. In this case the array contains 12 objects for each month of the year.
     
    Each dataobject has at least 2 elements. The first element is the name, from the second element on it contains data. In this sample there are 5 elements:
  • month: name for the graph. This is the legend for the horizontal axis.
  • 4 elements with data. This is a chart with 4 bars, lines or pies.
     
  • title: the title to show on the top of the chart.
  • description: text to show on the line below the title.
  • max: the highest value you want to use for the bar chart. BOA will use this value to divide the height of you chart in 10 row blocks.
  • min: you can set a value as minimum value. This according to your date. In most cases this will be set to 0.
  • cumul: the maximum value for the line chart you want to use. BOA will divide your chart in 10 blocks.
  • axis: the legend to use for the vertical axis.
  •  
  • legend: is an array with a legend for your data. This way you can have fieldnames in your data array, and convert it to a description that will be shown on the chart. The array has to be the same lenght as the data objects. You need to provide objects which has two elements:
  • name: how it is called in the data array.
  • title: which text must be shown in the graph.
 
 
The above response gives the following graph.
 
This is the chart build with the above data.