aframe-babia-components
Version:
A data visualization set of components for A-Frame.
240 lines (199 loc) • 86.3 kB
Markdown
---
#date: 2020-06-19T12:58:28+02:00
linktitle: charts-api
title: Charts components API
draft: false
weight: 50
categories: [ "Components", "Documentation" ]
tags: ["api", "data format", "demo"]
---
## Chart components API
The installation contains the following components:
### babia-pie component
This component shows a pie chart.
#### API
| Property | Description | Type | Default value |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------- |
| from | The filterdata/querier entity ID where is the data for the chart | string | - |
| key | The field of the data that will define each slice of the pie. (Make sure that this field has unique values!) | string | key |
| size | The **numeric** field of the data that will define the size of the slices | string | size |
| legend | Shows a legend when hovering a slice | boolean | false |
| legend_lookat | Element that the legend will follow in terms of rotation | string | `[camera]` |
| legend_scale | Scale for the legend | number | 1 |
| palette | Color palette of the chart `blues` `bussiness` `sunset`. [See more](#color-palettes) or a custom array of colors ` <a-entity babia-xxxx='...; palette: ["#ffb02e", "#8600c4", "#007700", "#00388c", "#df0084", "#00c4ff"]'></a-entity>` | string or array | ubuntu |
| title | Shows chart title | string | - |
| titleFont | Font of the title. Path to a typeface.json file or selector to `<a-asset-item>`. [See more](#fonts) | JSON (list of objects) | https://rawgit.com/supermedium/superframe/master/components/text-geometry/lib/helvetiker_regular.typeface.json |
| titleColor | Color of the title | string | #FFFFFF |
| titlePosition | Position of the title | string | 0 0 0 |
| animation | Animates chart | boolean | false |
| data | Data to show with the chart. **Important**: Using this attribute will disable the `from` attribute. | JSON (list of objects) | - |
#### Data format example
```json
[{"key":"kbn_network","size":10},
{"key":"Maria","size":5},
...
]
```
### babia-doughnut component
This component shows a doughnut chart.
#### API
| Property | Description | Type | Default value |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------- |
| from | The filterdata/querier entity ID where is the data for the chart | string | - |
| key | The field of the data that will define each slice of the pie. (Make sure that this field has unique values!) | string | key |
| size | The **numeric** field of the data that will define the size of the slices | string | size |
| legend | Shows a legend when hovering a slice | boolean | false |
| legend_lookat | Element that the legend will follow in terms of rotation | string | `[camera]` |
| legend_scale | Scale for the legend | number | 1 |
| palette | Color palette of the chart `blues` `bussiness` `sunset`. [See more](#color-palettes) or a custom array of colors ` <a-entity babia-xxxx='...; palette: ["#ffb02e", "#8600c4", "#007700", "#00388c", "#df0084", "#00c4ff"]'></a-entity>` | string or array | ubuntu |
| title | Shows chart title | string | - |
| titleFont | Font of the title. Path to a typeface.json file or selector to `<a-asset-item>`. [See more](#fonts) | JSON (list of objects) | https://rawgit.com/supermedium/superframe/master/components/text-geometry/lib/helvetiker_regular.typeface.json |
| titleColor | Color of the title | string | #FFFFFF |
| titlePosition | Position of the title | string | 0 0 0 |
| animation | Animates chart | boolean | false |
| data | Data to show with the chart. **Important**: Using this attribute will disable the `from` attribute. | JSON (list of objects) | - |
#### Data format example
```json
[{"key":"kbn_network","size":10},
{"key":"Maria","size":5},
...
]
```
### babia-bars component
This component shows a simple 2D bar chart.
#### API
| Property | Description | Type | Default value |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------- |
| from | The filterdata/querier entity ID where is the data for the chart | string | - |
| x_axis | The field of the data that will define the tags of the x_axis of the chart (as a keys). (Make sure that this field has unique values!) | string | x_axis |
| height | the **numeric** field of the data that will define the height of the bars | string | height |
| legend | Shows a legend when hovering a bar | boolean | false |
| legend_lookat | Element that the legend will follow in terms of rotation | string | `[camera]` |
| legend_scale | Scale for the legend | number | 1 |
| axis | Shows chart axis | boolean | true |
| axis_name | Shows metric labels on axis | boolean | false |
| chartHeight | Adjusts the height of the chart. | number | - |
| palette | Color palette of the chart `blues` `bussiness` `sunset`. [See more](#color-palettes) or a custom array of colors ` <a-entity babia-xxxx='...; palette: ["#ffb02e", "#8600c4", "#007700", "#00388c", "#df0084", "#00c4ff"]'></a-entity>` | string or array | ubuntu |
| title | Shows chart title | string | - |
| titleFont | Font of the title. Path to a typeface.json file or selector to `<a-asset-item>`. [See more](#fonts) | JSON (list of objects) | https://rawgit.com/supermedium/superframe/master/components/text-geometry/lib/helvetiker_regular.typeface.json |
| titleColor | Color of the title | string | #FFFFFF |
| titlePosition | Position of the title | string | 0 0 0 |
| animation | Animates chart | boolean | false |
| dur | Duration of the animation(ms) | number | 2000 |
| data | Data to show with the chart. **Important**: Using this attribute will disable the `from` attribute. | JSON (list of objects) | - |
#### Data format example
```json
[{"x_axis":"kbn_network","height":10},
{"x_axis":"Maria","height":5},
...
]
```
### babia-barsmap component
This component shows a bars map.
#### API
| Property | Description | Type | Default value |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------- |
| from | The filterdata/querier entity ID where is the data for the chart | string | - |
| x_axis | The field of the data that will define the tags of the x_axis of the chart (as a keys). (Make sure that this field has unique values!) | string | x_axis |
| z_axis | The field of the data that will define the tags of the z_axis of the chart (as a keys). (Make sure that this field has unique values!) | string | z_axis |
| height | the **numeric** field of the data that will define the height of the bars | string | height |
| legend | Shows a legend when hovering a bar | boolean | false |
| legend_lookat | Element that the legend will follow in terms of rotation | string | `[camera]` |
| legend_scale | Scale for the legend | number | 1 |
| axis | Shows chart axis | boolean | true |
| axis_name | Shows metric labels on axis | boolean | false |
| chartHeight | Adjusts the height of the chart. | number | - |
| palette | Color palette of the chart `blues` `bussiness` `sunset`. [See more](#color-palettes) or a custom array of colors ` <a-entity babia-xxxx='...; palette: ["#ffb02e", "#8600c4", "#007700", "#00388c", "#df0084", "#00c4ff"]'></a-entity>` | string or array | ubuntu |
| title | Shows chart title | string | - |
| titleFont | Font of the title. Path to a typeface.json file or selector to `<a-asset-item>`. [See more](#fonts) | JSON (list of objects) | https://rawgit.com/supermedium/superframe/master/components/text-geometry/lib/helvetiker_regular.typeface.json |
| titleColor | Color of the title | string | #FFFFFF |
| titlePosition | Position of the title | string | 0 0 0 |
| animation | Animates chart | boolean | false |
| dur | Duration of the animation(ms) | number | 2000 |
| data | Data to show with the chart. **Important**: Using this attribute will disable the `from` attribute. | JSON (list of objects) | - |
#### Data format example
```json
[{"x_axis":"David","z_axis":"2019","height":9},
{"x_axis":"David","z_axis":"2018","height":8},
...
]
```
### babia-bubbles component
This component shows a 3D Bubbles chart.
#### API
| Property | Description | Type | Default value |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------- |
| from | The filterdata/querier entity ID where is the data for the chart | string | - |
| x_axis | The field of the data that will define the tags of the x_axis of the chart (as a keys) | string | x_axis |
| z_axis | The field of the data that will define the tags of the z_axis of the chart (as a keys). (Make sure that this field has unique values!) | string | z_axis |
| height | the **numeric** field of the data that will define the height of the bubbles | string | height |
| radius | the **numeric** field of the data that will define the radius of the bubbles | string | radius |
| legend | Shows a legend when hovering a bubble | boolean | false |
| legend_lookat | Element that the legend will follow in terms of rotation | string | `[camera]` |
| legend_scale | Scale for the legend | number | 1 |
| axis | Shows chart axis | boolean | true |
| scale | Scales up the chart. For example: scale 1/100 => `scale: 100` | number | - |
| heightMax | Adjusts the height of the chart. | number | - |
| radiusMax | Adjusts bubbles' radius of the chart. | number | - |
| palette | Color palette of the chart `blues` `bussiness` `sunset`. [See more](#color-palettes) or a custom array of colors ` <a-entity babia-xxxx='...; palette: ["#ffb02e", "#8600c4", "#007700", "#00388c", "#df0084", "#00c4ff"]'></a-entity>` | string or array | ubuntu |
| title | Shows chart title | string | - |
| titleFont | Font of the title. Path to a typeface.json file or selector to `<a-asset-item>`. [See more](#fonts) | JSON (list of objects) | https://rawgit.com/supermedium/superframe/master/components/text-geometry/lib/helvetiker_regular.typeface.json |
| titleColor | Color of the title | string | #FFFFFF |
| titlePosition | Position of the title | string | 0 0 0 |
| animation | Animates chart | boolean | false |
| data | Data to show with the chart. **Important**: Using this attribute will disable the `from` attribute. | JSON (list of objects) | - |
#### Data format example
```json
[{"x_axis":"David","z_axis":"2019","height":1,"radius":9},
{"x_axis":"David","z_axis":"2018","height":2,"radius":8},
...
]
```
### babia-cyls component
This component shows a cylinder chart.
#### API
| Property | Description | Type | Default value |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------- |
| from | The filterdata/querier entity ID where is the data for the chart | string | - |
| x_axis | The field of the data that will define the tags of the x_axis of the chart (as a keys). (Make sure that this field has unique values!) | string | x_axis |
| height | the **numeric** field of the data that will define the height of the cylynders | string | height |
| radius | the **numeric** field of the data that will define the radius of the cylynders | string | radius |
| legend | Shows a legend when hovering a cylinder | boolean | false |
| legend_lookat | Element that the legend will follow in terms of rotation | string | `[camera]` |
| legend_scale | Scale for the legend | number | 1 |
| axis | Shows chart axis | boolean | true |
| axis_name | Shows metric labels on axis | boolean | false |
| chartHeight | Adjusts the height of the chart. | number | 10 |
| keepHeight | Keep height when updating data. | boolean | true |
| radiusMax | Adjusts bubbles' radius of the chart. | number | 2 |
| palette | Color palette of the chart `blues` `bussiness` `sunset`. [See more](#color-palettes) or a custom array of colors ` <a-entity babia-xxxx='...; palette: ["#ffb02e", "#8600c4", "#007700", "#00388c", "#df0084", "#00c4ff"]'></a-entity>` | string or array | ubuntu |
| title | Shows chart title | string | - |
| titleFont | Font of the title. Path to a typeface.json file or selector to `<a-asset-item>`. [See more](#fonts) | JSON (list of objects) | https://rawgit.com/supermedium/superframe/master/components/text-geometry/lib/helvetiker_regular.typeface.json |
| titleColor | Color of the title | string | #FFFFFF |
| titlePosition | Position of the title | string | 0 0 0 |
| animation | Animates chart | boolean | false |
| dur | Duration of the animation(ms) | number | 2000 |
| data | Data to show with the chart. **Important**: Using this attribute will disable the `from` attribute. | JSON (list of objects) | - |
#### Data format example
```json
[{"key":"David","height":9,"radius":1},
{"key":"David","height":8,"radius":3},
...
]
```
### babia-cylsmap component
This component shows a 3D cylinder chart.
#### API
| Property | Description | Type | Default value |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------- |
| from | The filterdata/querier entity ID where is the data for the chart | string | - |
| x_axis | The field of the data that will define the tags of the x_axis of the chart (as a keys) | string | x_axis |
| z_axis | The field of the data that will define the tags of the z_axis of the chart (as a keys). (Make sure that this field has unique values!) | string | z_axis |
| height | the **numeric** field of the data that will define the height of the cylynders | string | height |
| radius | the **numeric** field of the data that will define the radius of the cylynders | string | radius |
| legend | Shows a legend when hovering a cylinder | boolean | false |
| legend_lookat | Element that the legend will follow in terms of rotation | string | `[camera]` |
| legend_scale | Scale for the legend | number | 1 |
| axis | Shows chart axis | boolean | true |
| axis_name | Shows metric labels on axis | boolean | false |
| scale | Scales up the chart. For example: scale 1/100