Graph
This component can visualise data in form of a graph. Below are graph types:
- Column chart (including line chart drawn on top of it)
- Pie chart
Each graph type has its unique qualities and options.
| Example | Code |
|---|---|
<as-graph controls markers data-data="[data Object]"></as-graph> |
|
<as-graph controls markers data-data="[data Object]"></as-graph> |
| Property name | Description | Type |
|---|---|---|
| data-data | Required: parameter in a form of an JSON object formatted as string. Contains some additional settings and actual data points to be displayed within graph component. | object |
| data |
Required:
holds data point informationExample of data point object:{Notice drilldown key, that if present, can hold more detailed data about the current data points, e.g. data divided into weeks data points. Similarly, weak data point can hold daily data, then hourly data and so on. There's no limit on the number of data levels present.
|
array of objects |
| resolution | Optional: key in data-data object | number |
| step | Optional: key in data-data object | number |
| charttype |
Optional:
key in data-data object, if present defines initial chart type to use. Chart types are as follows: 1. Columns chart 2. Pie chart |
number |
| title | Optional: key in data-data object, if present defines chart / graph title. | string |
| xtitle | Optional: key in data-data object, if present defines chart / graph X axis title. | string |
| ytitle | Optional: key in data-data object, if present defines chart / graph Y axis title. | string |
| palette | Optional: key in data-data object to hold table with RGB colours used within graph component to colour data points. It can contain from one to Infinite colours. Data points are coloured in cycle if number of colours is not equal to maximum number of data points within data level. | array |
| controls | Optional: when present graph will render control buttons that allow to change how many data points are displayed at once, allow adding & removing visible data points, move between point and go bac one level if drill down data are present. | string |
| markers | Optional: when present graph type of Pie chart will display labels and drill down icon (a + sign). | string |