Skip to content

Commit fff95d1

Browse files
committed
Update example
using the forecast_json attribute and apexcharts-card
1 parent 47b3bd6 commit fff95d1

1 file changed

Lines changed: 29 additions & 34 deletions

File tree

README.md

Lines changed: 29 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -28,44 +28,39 @@ Configuration of the integration is done through Configuration > Integrations wh
2828

2929
To display the precipitation data, use your choice of charting component.
3030

31-
### Example configuration using [chartjs-card](https://github.com/ricreis394/chartjs-card)
31+
### Example configuration using [apexcharts-card]([https://github.com/ricreis394/chartjs-card](https://github.com/RomRider/apexcharts-card))
3232

3333
Replace `<entity_id>` with your entity id.
3434

3535
```
36-
- chart: line
37-
data:
38-
datasets:
39-
- backgroundColor: rgb(255, 99, 132)
40-
fill: true
41-
borderWidth: 0
42-
cubicInterpolationMode: monotone
43-
data: >-
44-
${states[<entity_id>].attributes.forecast.map(cast =>
45-
({x: new Date(cast.datetime).getTime(),y:
46-
parseFloat(cast.precipitation)}))}
47-
label: Precipitation
48-
labels: >-
49-
${states[<entity_id>].attributes.forecast.map(cast => new
50-
Date(cast.datetime).toTimeString())}
51-
custom_options:
52-
showLegend: false
53-
options:
54-
elements:
55-
point:
56-
radius: 0
57-
scales:
58-
x:
59-
display: false
60-
'y':
61-
beginAtZero: true
62-
display: false
63-
plugins:
64-
title:
65-
display: false
66-
text: Precipitation
67-
entity_row: false
68-
type: custom:chartjs-card
36+
type: custom:apexcharts-card
37+
apex_config:
38+
chart:
39+
height: 170px
40+
header:
41+
show: true
42+
floating: true
43+
title: Precipitation next 90 minuntes
44+
show_states: false
45+
colorize_states: true
46+
series:
47+
- entity: <entity_id>
48+
type: area
49+
stroke_width: 0
50+
data_generator: |
51+
const f = JSON.parse(entity.attributes.forecast_json)
52+
return f.map(s=>[s.datetime,s.precipitation])
53+
span:
54+
start: minute
55+
graph_span: 100min
56+
yaxis:
57+
- show: false
58+
min: 0
59+
layout: minimal
60+
6961
```
7062

7163
![Precipitation chart](precipitation_chart.png)
64+
65+
### Debug
66+
Name your device `debug` to get random precipitation data in the range from 0 to 10.

0 commit comments

Comments
 (0)