Lowdefy Blocks for AmCharts
This repository provides blocks for AmCharts, a feature rich javascript charts amd maps library.
The implementation of these blocks is a minimal wrapper for the @amcharts/amcharts4
package. It creates charts using the am4core.createFromConfig()
method which maps chart config settings directly to the AMChart library. This means you write normal AmChart config to create charts.
See the AmCharts docs for the chart settings API.
Blocks
AmChartsPie Example
Block URL: https://blocks-cdn.lowdefy.com/v3.11.3/blocks-amcharts/meta/AmChartsPie.json
name: my-app
lowdefy: 3.11.3
types:
AmChartsXY:
url: https://blocks-cdn.lowdefy.com/v3.11.3/blocks-amcharts/meta/AmChartsPie.json
pages:
- id: dashboard
type: PageHeaderMenu
blocks:
- id: my_chart
type: AmChartsPie
properties:
height: 400
data:
- name: 'A'
count: 10
- name: 'B'
count: 30
- name: 'C'
count: 60
- name: 'D'
count: 90
series:
- type: PieSeries
dataFields:
category: name
value: count
AmChartsXY Example
Block URL: https://blocks-cdn.lowdefy.com/v3.11.3/blocks-amcharts/meta/AmChartsXY.json
name: my-app
lowdefy: 3.11.3
types:
AmChartsXY:
url: https://blocks-cdn.lowdefy.com/v3.11.3/blocks-amcharts/meta/AmChartsXY.json
pages:
- id: dashboard
type: PageHeaderMenu
blocks:
- id: my_chart
type: AmChartsXY
properties:
data:
- name: 'A'
count: 10
- name: 'B'
count: 30
- name: 'C'
count: 60
- name: 'D'
count: 90
xAxes:
- type: CategoryAxis
dataFields:
category: name
yAxes:
- type: ValueAxis
series:
- type: ColumnSeries
dataFields:
categoryX: name
valueY: count
columns:
events:
hit:
amcharts_event_listener:
name: onClick
adapter:
fill:
_function:
__if:
test:
__lte:
- __args: '0.count'
- 50
then: '#F00'
else: '#0F0'
events:
onClick:
- id: set_selected
type: SetState
params:
selected:
_event: true
- id: selection
type: Title
properties:
level: 4
content:
_if:
test:
_eq:
- _state: selected
- null
then: 'Click to select a column.'
else:
_string.concat:
- 'Selected: '
- _state: selected.name
- ', Value: '
- _state: selected.count
AmChartsTreeMap Example
Block URL: https://blocks-cdn.lowdefy.com/v3.11.3/blocks-amcharts/meta/AmChartsTreeMap.json
name: my-app
lowdefy: 3.11.3
types:
AmChartsTreeMap:
url: https://blocks-cdn.lowdefy.com/v3.11.3/blocks-amcharts/meta/AmChartsTreeMap.json
pages:
- id: dashboard
type: PageHeaderMenu
blocks:
- id: my_chart
type: AmChartsTreeMap
properties:
height: 400
data:
- name: 'A'
value: 10
- name: 'B'
value: 30
- name: 'C'
value: 60
- name: 'D'
value: 90
dataFields:
name: name
value: value
Other Lowdefy Blocks Packages
More Lowdefy resources
Licence
Apache-2.0