Hi
I have this apex that shows my energy prices
But I would like the Graf to use the corlors like this one I have for my solar sales prices
the first one is giving me todays prices and forecast witch change when the prices are available and would like it to stay that way. only with the colors like no2.
I have tryed to modify it and tryed to use ChatGPT with no luck. Can any of you smart guys outthere help me?
the first code is:
type: custom:apexcharts-card
apex_config:
chart:
height: 350px
xaxis:
type: datetime
labels:
datetimeFormatter:
hour: H
tickPlacement: 'on'
graph_span: 48h
span:
start: hour
offset: '-2h'
now:
show: true
label: Nu
header:
title: El-priser pr. time (Kr./kWh) + Abn.(93.28kr./mdr.)
show: true
show_states: true
colorize_states: true
yaxis:
- min: 0
max: 0
decimals: 2
apex_config:
max: auto
tickAmount: 7
series:
- entity: sensor.energi_data_service
name: Lige nu
color: orange
type: column
show:
in_header: raw
in_chart: true
float_precision: 2
unit: ' kr'
data_generator: >
/**
* Get HEX color of data point based on value.
*
* @param value { float }
* @returns { string }
*/
var colorByValue = function (value) {
if (value >= 5.5) { return '#ff0303'; } // Dark red
else if (value >= 4.5) { return '#e65555' } // Red
else if (value >= 3.5) { return '#fc8905' } // Orange
else if (value >= 2.0) { return '#fce005' } // Yellow
else { return '#2abf1d' } // Green
}
/**
* Build data point object.
*
* @param item { object }
* @param isForecast { boolean }
* @returns { object }
*/
var buildDataPoint = function (item, isForecast = false) {
return {
x: new Date(item['hour']).getTime(),
y: item['price'],
fillColor: isForecast ? '#a1a1aa' : colorByValue(item['price'])
}
}
// Expected data points.
// Has to equal the value set in "group_span" but as hours.
// Which means, if you ie. have set "1d" as group span, you should set
this to 24.
var expectedDataPoints = 48;
// Data points
var data = [];
// No prices available.
// Return empty dataset.
if (!entity.attributes.raw_today) {
return data;
}
// Offset of hours set in "span" option.
// Note: Only set this, if offset is negative.
var offsetHours = 2;
// Get current timestamp (incl. offset).
var currentTime = new Date().getTime() - (3600000 * offsetHours);
// Loop through all today's hours and collect prices,
// but discard hours which have already passed.
entity.attributes.raw_today.filter(item => new
Date(item['hour']).getTime() > currentTime).forEach(item => {
data.push(buildDataPoint(item));
});
// If tomorrow prices is available,
// we'll add those to our dataset.
if (entity.attributes.tomorrow_valid) {
entity.attributes.raw_tomorrow.forEach(item => {
data.push(buildDataPoint(item));
});
}
// Determine if we could use a few forecasted today points
// to forfill our expected data points.
var forecastValuesNeeded = expectedDataPoints - data.length;
// If forecast values are needed and they are available,
// add forecast data points to our data set,
// until our expected data points has been reached.
if (forecastValuesNeeded > 0 && entity.attributes.forecast) {
var lastKnownDatapointTimestamp = data[data.length - 1]['x'];
entity.attributes.forecast.filter(item => new Date(item['hour']).getTime() > lastKnownDatapointTimestamp).slice(0, forecastValuesNeeded).forEach(item => {
data.push(buildDataPoint(item, true));
});
} return data;
- entity: sensor.energi_data_service
name: Lavest i dag
attribute: today_min
color: var(--success-color)
transform: |
return entity.attributes.today_min?.price ?? null
float_precision: 2
unit: ' kr'
show:
in_chart: false
- entity: sensor.energi_data_service
name: Højest i dag
attribute: today_max
color: red
transform: |
return entity.attributes.today_max?.price ?? null
float_precision: 2
unit: ' kr'
show:
in_chart: false
- entity: sensor.energi_data_service
name: Gns. i dag
attribute: today_mean
color: var(--energy-grid-consumption-color)
float_precision: 2
unit: ' kr'
show:
in_chart: false
- entity: sensor.energi_data_service
name: Lavest i morgen
attribute: tomorrow_min
color: var(--success-color)
transform: |
return entity.attributes.tomorrow_min?.price ?? null
float_precision: 2
unit: ' kr'
show:
in_chart: false
- entity: sensor.energi_data_service
name: Højest i morgen
attribute: today_max
color: red
transform: |
return entity.attributes.tomorrow_max?.price ?? null
float_precision: 2
unit: ' kr'
show:
in_chart: false
- entity: sensor.energi_data_service
name: Gns. i morgen
attribute: tomorrow_mean
color: var(--energy-grid-consumption-color)
float_precision: 2
unit: ' kr'
show:
in_chart: false
- entity: sensor.dagens_pris_for_kobt_strom
color: purple
float_precision: 2
stroke_width: 2
unit: ' Kr'
name: Omkostning
group_by:
duration: 24h
show:
in_chart: false
legend_value: false
and the second code is:
type: custom:vertical-stack-in-card
style: |
ha-card {
box-shadow: 2px;
background: transparent;
margin: 15px;
}
cards:
- type: custom:apexcharts-card
now:
show: true
graph_span: 24h
apex_config:
chart:
height: 300px
show:
last_updated: true
legend:
showForSingleSeries: false
plotOptions:
bar:
borderRadius: 3
yaxis:
- min: ~0
max: ~1
decimalsInFloat: 2
apex_config:
max: auto
tickAmount: 5
forceNiceScale: true
xaxis:
labels:
datetimeFormatter:
hour: H
experimental:
color_threshold: true
all_series_config:
show:
offset_in_name: false
header:
title: Salgspriser for overskudsproduktion
show: true
show_states: true
colorize_states: true
span:
start: day
offset: +0h
series:
- entity: sensor.nordpool_kwh_dk1_dkk_3_00_0
name: Salgspris nu
unit: Kr.
show:
extremas: true
in_header: raw
header_color_threshold: true
in_chart: true
type: area
stroke_width: 3
float_precision: 2
data_generator: |
return entity.attributes.raw_today.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]];
});
color_threshold:
- value: 0
color: darkred
- value: 0.1
color: red
- value: 0.3
color: orange
- value: 0.5
color: green
- value: 0.7
color: green
opacity: 1
- value: 0.8
color: green
- value: 0.9
color: green
- value: 1
color: darkgreen
- entity: sensor.nordpool_kwh_dk1_dkk_3_00_0
attribute: max
type: column
color: var(--success-color)
float_precision: 2
stroke_width: 2
unit: kr
name: Dagens bedste pris
group_by:
duration: 24h
show:
in_chart: false
legend_value: false
- entity: sensor.nordpool_kwh_dk1_dkk_3_00_0
attribute: min
type: column
color: var(--mdc-theme-error)
float_precision: 2
stroke_width: 2
unit: kr
name: Dagens dårligste pris
group_by:
duration: 24h
show:
in_chart: false
legend_value: false
- entity: sensor.dagens_indtjening
color: purple
float_precision: 2
stroke_width: 2
unit: ' Kr'
name: Dagens indtjening
group_by:
duration: 24h
show:
in_chart: false
legend_value: false
Hope you can help 