ApexCharts card - A highly customizable graph card

uiguy · February 2, 2023, 12:10pm

Can someone help with rounding values in the radialBar display value?

The 2 graphs below show battery (delivered already in %) and signal (dBi) I have created a range (Min: -130, Max: -40) As you can however see, when the values come through, this is not rounded, ideally to no decimal places.

This is the card yaml

      - cards:
          - type: custom:apexcharts-card
            chart_type: radialBar
            experimental:
              color_threshold: true
            apex_config:
              legend:
                show: false
              chart:
                height: 250px
              plotOptions:
                radialBar:
                  startAngle: -90
                  endAngle: 90
                  dataLabels:
                    name:
                      show: true
                      offsetY: 35
                    value:
                      show: true
                      offsetY: -25
                    total:
                      show: true
                      label: Battery
                      formatter: |
                        EVAL:(w) => {
                          return w.globals.seriesTotals + '%';
                        }
                  hollow:
                    size: 45%
                    imageWidth: 70
                    imageHeight: 70
                    imageOffsetY: -40
                    imageClipped: false
                  track:
                    show: true
                    strokeWidth: 175%
                    dropShadow:
                      enabled: true
                      top: 2
                      left: 0
                      blur: 4
                      opacity: 0.15
              stroke:
                dashArray: 5
                lineCap: butt
            series:
              - entity: sensor.lorawan_school_meds_battery_percentage
                show:
                  header_color_threshold: true
                color_threshold:
                  - color: '#B20000'
                    value: 10
                  - color: '#FF9912'
                    value: 15
                  - color: '#FFFF00'
                    value: 25
                  - color: '#98FB98'
                    value: 60
                  - color: '#008C23'
                    value: 100
          - type: custom:apexcharts-card
            chart_type: radialBar
            experimental:
              color_threshold: true
            apex_config:
              legend:
                show: false
              chart:
                height: 250px
              plotOptions:
                radialBar:
                  startAngle: -90
                  endAngle: 90
                  dataLabels:
                    name:
                      show: true
                      offsetY: 35
                    value:
                      show: true
                      offsetY: -25
                    total:
                      show: true
                      label: Signal
                      formatter: |
                        EVAL:(w) => {
                          return w.globals.seriesTotals + '%';
                        }
                  hollow:
                    size: 45%
                    imageWidth: 70
                    imageHeight: 70
                    imageOffsetY: -40
                    imageClipped: false
                  track:
                    show: true
                    strokeWidth: 175%
                    dropShadow:
                      enabled: true
                      top: 2
                      left: 0
                      blur: 4
                      opacity: 0.15
              stroke:
                dashArray: 5
                lineCap: butt
            series:
              - entity: sensor.lorawan_school_meds_signal
                max: -40
                min: -130
                show:
                  header_color_threshold: true
                color_threshold:
                  - color: '#B20000'
                    value: -150
                  - color: '#FFFF00'
                    value: -120
                  - color: '#008C23'
                    value: -100
        type: grid
        columns: 2
        square: false

Can anyone help steer me in the right direction?

Many thanks

uiguy · February 2, 2023, 12:24pm

are the additional values delivered over MQTT

“manual_control”: “False”,
“dt_level_sensor”: “Wet”,
“qt_level_sensor”: “Wet”,
“dt_water_level”: “22.0”,
“qt_water_level”: “16.8”,
“dt_solenoid”: “Closed”,
“qt_solenoid”: “Closed”

sent as attributes in the sensor.reef_controller_ato or how are these displayed in Home Asstant (assuming that this is a MQTT sensor as opposed to binary_sensor?)

If you are purely looking for the wet/dry sensor, you could create an MQTT binary_sensor out of just those 2 attributes?

something like this (in your mqtt.yaml file):

binary_sensor:
  - state_topic: "reef/controller/ato"
    name: "reef_controller_ato_dt_level_sensor_state"
    value_template: '{{ value_json["object"]["dt_level_sensor"] | int }}'
    payload_on: "Wet"
    payload_off: "Dry"
    device_class: "moisture"
    unique_id: reef_controller_ato_dt_level_sensor_state

uiguy · February 2, 2023, 12:30pm

actually solved this by simply changing min/max to

                max: -40
                min: -140

justone · February 2, 2023, 1:14pm

turn

return w.globals.seriesTotals + '%';

to

return ~~w.globals.seriesTotals + '%';

KWolfe81 · February 2, 2023, 1:45pm

Correct, they are attributes in the sensor.reef_controller_ato. Good idea to break them all out into their own sensors as you proposed. It would be nice if I could just grab the attribute and compute from there, but whatever works in the end!

uiguy · February 2, 2023, 2:02pm

you can possibly do this in the sensor definition in apex cards? something like

value_template: "{{state_attr('sensor.reef_controller_ato', 'dt_level_sensor')}}"

this is also how you would configure each of the attributes as an individual sensor if you were configuring the sensor.yaml as opposed to the mqtt.yaml

so it would be like this then (in sensors.yaml)

- platform: template
  sensors:
   dt_level_sensor:
      value_template: "{{state_attr('sensor.reef_controller_ato', 'dt_level_sensor')}}"
      friendly_name: "dt_level_sensor"

so as you can see, there are loads of different paths to achieve the same outcome.

You should however just pick one and standardise on that for maintenance purposes moving forward (in case you need to change something du to breaking changes)

personally, if the data point is important enough, i create a dedicated sensor for it…

have a look at this post

happy .yaml hunting!

uiguy · February 2, 2023, 2:08pm

you legend!

HA_n00b · February 2, 2023, 6:17pm

[SOLVED] See below.

Is there any way to control the sizing of the xaxis? As you can see below, the column charts are very thin. And they started in the middle.

type: custom:config-template-card
variables:
  - states['sensor.helper_electricity_consumption_this_month_normal'].state
entities:
  - sensor.time
  - sensor.helper_electricity_consumption_this_month_normal
  - sensor.helper_electricity_consumption_this_month_off_peak
card:
  type: custom:apexcharts-card
  header:
    show: true
    title: Consumption This Month (kWh)
    show_states: true
    colorize_states: true
  card_mod:
    style: |
      ha-card {
        font-size: 11px;
      }
  graph_span: 31d
  span:
    start: month
  all_series_config:
    unit: ' '
    show:
      legend_value: false
      datalabels: false
    float_precision: 2
    group_by:
      func: last
      duration: 1d
  stacked: true
  series:
    - entity: sensor.helper_electricity_consumption_this_month_normal
      name: Normal
      show:
        in_chart: false
    - entity: sensor.helper_electricity_consumption_this_month_off_peak
      name: Off peak
      show:
        in_chart: false
    - entity: sensor.helper_electricity_consumption_normal
      type: column
      name: Normal
      color: var(--chart-color-electricity-normal)
      show:
        in_header: false
    - entity: sensor.helper_electricity_consumption_off_peak
      type: column
      name: Off peak
      color: var(--chart-color-electricity-off-peak)
      show:
        in_header: false
    - entity: sensor.helper_electricity_consumption_this_month
      name: Total
      color: '#FFFFFF'
      show:
        in_chart: false
        in_header: true
    - entity: sensor.electricity_price_plafond
      name: Price Plafond
      color: var(--chart-color-price-plafond)
      show:
        in_chart: false
        in_header: true
    - entity: sensor.electricity_price_plafond_left_this_month
      name: Plafond left
      color: var(--chart-color-price-plafond-left)
      show:
        in_chart: false
        in_header: true
  apex_config:
    yaxis:
      forceNiceScale: true
      decimals: 3
      min: 0
      max: |
        EVAL: function(max) { return max }
    xaxis:
      tooltip: false
      labels:
        show: true
        style:
          fontSize: 12px
    tooltip:
      enabled: true
      x:
        format: MMM dd
      'y':
        formatter: |
          EVAL:function(value) {
          if (value == 0) { 
            return "0";
          }
          let text = parseFloat(value).toFixed(3);
          let result = text.replace(".", ".");
          return result;
          }
        title:
          formatter: |
            EVAL: function(seriesName) {
            return "";
            }
      fixed:
        enabled: true
        offsetX: -175
        offsetY: -60
    chart:
      zoom:
        enabled: false
      toolbar:
        show: false
        tools:
          zoom: true
          zoomin: true
          zoomout: true
          pan: true
          reset: true

Just learned how to integrate JavaScript So, using JavaScript code below, the graph_span is dynamic with at least 7 days, based on the current date.

  graph_span: |-
      ${ var nDay = new Date().getDate();
         if (nDay < 7) {
           nDay = 7
         };
         var nDayStr = String(nDay)+"d";
         nDayStr
      }

Rubbervdh · February 2, 2023, 6:27pm

Do you have the code for this graph? Looks intersting! I have Price Plafond too

HA_n00b · February 2, 2023, 6:37pm

The code is above. It’s quite a simple graph, consisting 5 helpers which I made from the P1 meter data.

Rubbervdh · February 2, 2023, 6:42pm

Solved this yet? I am interested too!

Rubbervdh · February 2, 2023, 6:49pm

Thanks. I have a P1 meter too and want to realize this if possible I have a few questions tough. Maybe you should call me HA noob instead

I see you have Type: Custom:config-template-card. How do I get this card?
I have a P1 meter too. Got this helpers already:
consumtion month off peak (same for week, day)
consumtion month normal (same for week, day)
Do I need more helpers for this? I see you have çonsumtion this month. How did you check the total consumtion of T1 and T2 from the p1 meter?
How did you get the priceplafond data?

You would realy help me out! you have the perfect graph here thanks for sharing

HA_n00b · February 2, 2023, 6:52pm

Yes, I added the codes below in the red-rectangle.

Rubbervdh · February 2, 2023, 7:08pm

Thanks! The graph you show here looks even better!
If you like to share the code would be awesome.

It worked tough, your code!

johnneman · February 2, 2023, 8:13pm

I’m also interested in how to calculate over multiple sensors…

mb-software · February 3, 2023, 8:18am

Is it possible to have a stacked column chart with two sensors, but instead of adding both sensor values on top of each other, overlap them? Or in other words, on a non stacked column chart show both bars overlapped at the same x location.

I have two sensors, one is the total value and the second is a percentage of the total. I want it to look like a stacked column chart, but I don’t want the sum. I have searched the whole apex chart configuration but could not find an option for this, though it is a common use case, isn’t it?

jkaberg · February 3, 2023, 9:10am

Is it possible to group several entities? Eg for an pie chart I’d like to give one series “entity” several entities that would aggregate/group the values of each sensor accordingly

My goal is to create an pie chart where ‘heating’, ‘lights’, ‘ev charging’, ‘boiler’ and ‘other’ are an set of groups that would display (total) usage for the defined window for each group in an pie chart. Each group usually contains more than one entity.

atv · February 3, 2023, 11:01am

I’m trying to address a sub attribute within a attribute like this:

  - entity: sensor.atv_weight_history
    type: line
    attribute: history[0].weight

It doesn’t error out but it doesn’t show anything either, i just shows the state of the main attribute.

Is this possible?

fho · February 3, 2023, 6:07pm

For those trying to replicate the original climate card look which includes the heating phases here is a little JS snippet that should do the trick:

type: custom:apexcharts-card
header:
  show: true
  show_states: false
  colorize_states: true
graph_span: 4d
color_list:
  - '#4c2621'
  - '#ff5235'
  - 'firebrick'
series:
  - entity: climate.wohnzimmer_heizung
    name: Aktiv
    type: area
    stroke_width: 0
    show:
      legend_value: false
    data_generator: |

      var url = 'history/period'
      url += '/' + start.toISOString()
      url += '?filter_entity_id=' + entity.entity_id
      url += '&end_time=' + end.toISOString()
      url += '&significant_changes_only=0'

      const h = await hass.callApi('GET', url)
      
      var out = h[0].map((e, i) => [e.last_updated, e.attributes.hvac_action == 'heating' ? e.attributes.current_temperature : null])
      out = out.concat([[end.toISOString(), entity.attributes.hvac_action == 'heating' ? entity.attributes.current_temperature : null]])
      
      return(out)
      
  - name: Soll-
    entity: climate.wohnzimmer_heizung
    attribute: temperature
    show:
      legend_value: false
    group_by:
      func: max
      duration: 2h
    curve: stepline
  - name: Ist-Temperatur
    entity: climate.wohnzimmer_heizung
    attribute: current_temperature
    show:
      legend_value: false
      extremas: true
    group_by:
      func: avg
      duration: 10min

Cronix · February 3, 2023, 8:56pm

Is there a way to make it not reset zoom when new data is polled and added to the chart? I have new data coming in every 10 seconds and it barely gives me enough time to zoom in and examine fine details before the whole thing gets reset and I’m looking at the zoomed out chart again.