I am trying to create a past, present, future graph of the outdoor temperature vs hour.
I have a template sensor containing .JSON data of future, hourly weather conditions that I would like to use with “custom:apexcharts-card” like this: Display future values in a graph
I am having issues getting the “data_generator:” portion to work.
The JSON is formatted slightly different from the example so that I cannot figure out how to modify the Card Configuration to work, or modify my data to use the example.
Here is my config:
rest:
- authentication: basic
# username: "admin"
# password: "password"
scan_interval: 300
resource: https://api.weather.com/v3/wx/forecast/hourly/2day?geocode=41.1011635,-85.1276185&format=json&units=e&language=en-US&apiKey={privatekey}
sensor:
- name: "Weather Forecast - Hourly"
unique_id: "weather_forecast_hourly"
# json_attributes_path: "$."
value_template: "ok"
json_attributes:
- "validTimeLocal"
- "temperature"
- "temperatureDewPoint"
- "relativeHumidity"
- "precipChance"
- "qpf"
Sensor Attributes:
validTimeLocal: 2023-04-07T23:00:00-0400, 2023-04-08T00:00:00-0400, 2023-04-08T01:00:00-0400, 2023-04-08T02:00:00-0400, 2023-04-08T03:00:00-0400, 2023-04-08T04:00:00-0400, 2023-04-08T05:00:00-0400, 2023-04-08T06:00:00-0400, 2023-04-08T07:00:00-0400, 2023-04-08T08:00:00-0400, 2023-04-08T09:00:00-0400, 2023-04-08T10:00:00-0400, 2023-04-08T11:00:00-0400, 2023-04-08T12:00:00-0400, 2023-04-08T13:00:00-0400, 2023-04-08T14:00:00-0400, 2023-04-08T15:00:00-0400, 2023-04-08T16:00:00-0400, 2023-04-08T17:00:00-0400, 2023-04-08T18:00:00-0400, 2023-04-08T19:00:00-0400, 2023-04-08T20:00:00-0400, 2023-04-08T21:00:00-0400, 2023-04-08T22:00:00-0400, 2023-04-08T23:00:00-0400, 2023-04-09T00:00:00-0400, 2023-04-09T01:00:00-0400, 2023-04-09T02:00:00-0400, 2023-04-09T03:00:00-0400, 2023-04-09T04:00:00-0400, 2023-04-09T05:00:00-0400, 2023-04-09T06:00:00-0400, 2023-04-09T07:00:00-0400, 2023-04-09T08:00:00-0400, 2023-04-09T09:00:00-0400, 2023-04-09T10:00:00-0400, 2023-04-09T11:00:00-0400, 2023-04-09T12:00:00-0400, 2023-04-09T13:00:00-0400, 2023-04-09T14:00:00-0400, 2023-04-09T15:00:00-0400, 2023-04-09T16:00:00-0400, 2023-04-09T17:00:00-0400, 2023-04-09T18:00:00-0400, 2023-04-09T19:00:00-0400, 2023-04-09T20:00:00-0400, 2023-04-09T21:00:00-0400, 2023-04-09T22:00:00-0400
temperature: 43, 40, 38, 36, 35, 34, 34, 32, 32, 32, 37, 41, 45, 48, 52, 54, 56, 57, 57, 58, 56, 53, 50, 47, 44, 42, 40, 39, 38, 37, 36, 35, 34, 36, 40, 46, 51, 55, 58, 60, 61, 62, 62, 62, 60, 56, 52, 49
temperatureDewPoint: 29, 28, 28, 27, 27, 26, 26, 25, 25, 25, 25, 24, 23, 24, 24, 25, 26, 26, 27, 27, 29, 30, 30, 30, 31, 31, 30, 30, 30, 30, 29, 29, 28, 28, 30, 31, 31, 31, 30, 30, 31, 31, 31, 31, 33, 33, 33, 33
relativeHumidity: 58, 62, 65, 68, 71, 72, 73, 75, 76, 73, 62, 49, 41, 38, 34, 32, 31, 30, 31, 32, 35, 42, 47, 53, 58, 64, 68, 70, 74, 76, 77, 77, 79, 75, 66, 55, 46, 39, 35, 33, 31, 31, 31, 32, 35, 42, 48, 54
precipChance: 1, 1, 1, 1, 1, 1, 1, 3, 3, 2, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 2, 3, 3, 4, 4, 4, 4, 4, 4, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1
qpf: 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
friendly_name: Weather Forecast - Hourly
Card Configuration:
type: custom:apexcharts-card
header:
show: true
title: Outside Forcast
show_states: true
colorize_states: true
graph_span: 48h
span:
offset: +36h
now:
show: true
label: Now
update_interval: 30min
series:
- entity: sensor.my_weather_station_temp
stroke_width: 1
color: red
data_generator: ''
extend_to: now
- entity: sensor.my_weather_station_dew_point
type: line
stroke_width: 1
color: darkblue
data_generator: ''
extend_to: now
- entity: sensor.weather_forecast_hourly
type: line
stroke_width: 1
color: lightblue
data_generator: |
return entity.attributes.map((record, index) => {
return [new Date(record.validTimeLocal).getTime(), record.temperature];
}).sort((a, b) => { return a[0] - b[0] });