ApexCharts card - A highly customizable graph card

ninjaef · February 4, 2021, 6:27pm

Hi.
I am not getting any plot?

my sensor yaml code

  sensor:
    - platform: mqtt
      name: ble_temperature_lounge
      unique_id: ble-temperature-lounge
      state_topic: "homeassistant/sensor/ble-temp/A4:C1:38:1C:49:97"
      value_template: "{{ value_json['temperature-celsius'] }}"
      unit_of_measurement: "°C"
      json_attributes_topic: "homeassistant/sensor/ble-temp/A4:C1:38:1C:49:97"
      device_class: temperature

my card config:

type: 'custom:apexcharts-card'
header:
  show: false
series:
  - entity: sensor.ble_temperature_lounge
    curve: straight
    group_by:
      func: avg
      duration: 5min
graph_span: 12h
cache: true
apex_config:
  yaxis:
    show: true
    showAlways: true
    showForNullSeries: true
    seriesName: undefined
    opposite: false
    reversed: false
    logarithmic: false
    tickAmount: 25
    min: 0
    max: 25
    forceNiceScale: true
    floating: false
    decimalsInFloat: 0

my output:

Just stuck at ‘Loading’ - nothing.
I know the sensor value is working because it’s on my list of other temps and measures which are all correct.

help please.

RomRider · February 4, 2021, 6:29pm

Is your entity excluded from the recorder? Is history showing up in the default home-assistant more-info of this entity?

ninjaef · February 4, 2021, 6:30pm

Thanks for replyinh.
No it is not showing up in history but it is not excluded specifically. Dam, I forgot about that. I prob need a config line on the sensor for history.

RomRider · February 4, 2021, 6:31pm

You have to enable the recorder. Not the history. It is not in the entity configuration: https://www.home-assistant.io/integrations/recorder/

ninjaef · February 4, 2021, 6:44pm

schoolboy error. I had a recorder.yaml in my packages area that I meant to remove months back but forgot. You made me recall it. The sensor domain was excluded - for a test I was doing at the time.
Thanks. Working now.

ninjaef · February 4, 2021, 7:22pm

So all working, but from the config options, I am unsure how I would plot a switch (on/off) state (1/0) on a graph of sensor temps. I’m getting N/A but as an aside, I would imaging it would only plot 0 or 1 on the Y axis which would not really be visible in this graph?

type: 'custom:apexcharts-card'
header:
  show: false
series:
  - entity: sensor.ble_temperature_lounge
    name: Lounge
  - entity: sensor.ble_temperature_dad
    name: Dad
  - entity: sensor.ble_temperature_summer
    name: Summer
  - entity: sensor.ble_temperature_guest
    name: Guest
  - entity: sensor.ble_temperature_kitchen
    name: Kitchen
  - entity: switch.danfoss_ch_1
    name: CH(Ch2)
    type: column
    curve: stepline
graph_span: 12h
update_interval: 5m
cache: true
apex_config:
  yaxis:
    show: true
    showAlways: true
    showForNullSeries: true
    seriesName: 'Temp'
    opposite: false
    reversed: false
    logarithmic: false
    tickAmount: 25
    min: 0
    max: 25
    forceNiceScale: true
    floating: false
    decimalsInFloat: 0

How might I do this-if at all? I was looking into data-generator but i don’t feel it is that complex and there’s probably a simple way - I just do not know it. Issue is, that 0 would be off the axis and so would 1 (on).

Y axis title not showing either.

RomRider · February 4, 2021, 7:35pm

In the upcoming release (or the latest beta) you’ll be able to use transform: return x === 'on' ? 15 : 0. Replace 15 with any number you want.

This is not the title of the axis. Don’t use seriesName ever, it will break many things.
To display the title on the axis you have to use:

apex_config:
  yaxis:
    title:
      text: YOUR TEXT

ninjaef · February 4, 2021, 7:51pm

Yep, the transform would be idea - I was looking for something like that , a function, but couldn’t find anything. Sure, I would set it to 0:5 or something , so that I get no plot (0) or a column bar to y=5 high. That would provide a nice emulated digital plot along the bottom.
Will download the beta and report back.

Y axis title working thanks and warning understood.

Thank you.

ninjaef · February 4, 2021, 8:11pm

D/L the latest dev version
https://github.com/RomRider/apexcharts-card/releases/download/v1.5.0-dev.4/apexcharts-card.js

and followed this guide:

Restarted the HA server from the front end
But getting an error:

EDIT:
MY BAD.
Already had a .js file in there so wget created js.1
sorry
testing now

mirekmal · February 4, 2021, 8:15pm

WTH… how can I install it via HACS? Am I blind? I searched through and cannot find it:
Screenshot 2021-02-04 at 9.11.12
I’m on 2021.1.5 and most recent version of HACS… even reinstalled it to make sure it is properly updated with info about repositories. I get notifications about new repositories as these arrives… what is wrong?

pollinolas · February 4, 2021, 8:18pm

You need to add the URL of github repository to custom repositories in HACS, after that,you can install it

RomRider · February 4, 2021, 8:22pm

See: https://github.com/RomRider/apexcharts-card/issues/28

ninjaef · February 4, 2021, 8:22pm

Nope, still getting the same error @RomRider ,

Does HA cache the .js resource files. I am definitely using the lastest dev from https://github.com/RomRider/apexcharts-card/releases/download/v1.5.0-dev.4/apexcharts-card.js

How can I force HA to use your latest js file?

EDIT
Cleared browser cache in Chrome (last hour). Resolved it. Bloody annoying cache.

RomRider · February 4, 2021, 8:28pm

Clear your cache or change the resource URL by appending ?v=x.y.z or use HACS which does this for you.

ninjaef · February 4, 2021, 8:32pm

Yeah, as per edit above, I cleared the cache. darn annoying. I will look into HACS thanks.
For the moment just trying to understand why my switch.danfoss_ch_2 is not plotting 0 or 5. It is not plotting at all yet I have the history for it.

Nothing on the Apexgraph.

RomRider · February 4, 2021, 9:00pm

Config? (no screenshot please, the code, pasted)

ninjaef · February 4, 2021, 9:05pm

as per previous posts. but here they are again:

HA yaml pretty simple…

switch:
  danfoss_ch_2:
    ..
    ..

RomRider · February 4, 2021, 9:05pm

I can’t edit your screenshot , I need the yaml of your card as code

ninjaef · February 4, 2021, 9:06pm

Sorry, didn’t know you were going to need/edit code, here ya go

type: 'custom:apexcharts-card'
header:
  show: false
series:
  - entity: sensor.ble_temperature_lounge
    name: Lounge
  - entity: sensor.ble_temperature_dad
    name: Dad
  - entity: sensor.ble_temperature_summer
    name: Summer
  - entity: sensor.ble_temperature_guest
    name: Guest
  - entity: sensor.ble_temperature_kitchen
    name: Kitchen
  - entity: switch.danfoss_ch_2
    name: CH(Ch2)
    type: column
    transform: 'return x === ''on'' ? 5 : 0;'
graph_span: 12h
update_interval: 5m
cache: true
apex_config:
  yaxis:
    title:
      text: Temperature °C
    show: true
    showAlways: true
    showForNullSeries: true
    opposite: false
    reversed: false
    logarithmic: false
    tickAmount: 10
    min: 10
    max: 25
    forceNiceScale: false
    floating: false
    decimalsInFloat: 0

HA card code editor keeps changing
transform: "return x === 'on' ? 5 : 0;"
to
transform: 'return x === ''on'' ? 5 : 0;'

note the quotes.

EDIT: If I hover the mouse over the X axis , and slide left to right, the values 0 and 5 are shown in the popup , but I can’t take a pic of this because when I mouse-click to grab a screenshot , the popup on the graph is not shown. So the graph seems to “know” the correct 0 and 5 values , but not plotting them?

RomRider · February 4, 2021, 9:10pm

Here you go:

type: 'custom:apexcharts-card'
header:
  show: false
series:
  - entity: sensor.ble_temperature_lounge
    name: Lounge
  - entity: sensor.ble_temperature_dad
    name: Dad
  - entity: sensor.ble_temperature_summer
    name: Summer
  - entity: sensor.ble_temperature_guest
    name: Guest
  - entity: sensor.ble_temperature_kitchen
    name: Kitchen
  - entity: switch.danfoss_ch_2
    name: CH(Ch2)
    curve: stepline # you should use stepline for that kind of data
    # type: column You shouldn't use type column for that kind of data
    transform: 'return x === "on" ? 5 : 0;'  # this was double single quotes instead of double quotes
graph_span: 12h
update_interval: 5m
cache: true
apex_config:
  yaxis:
    title:
      text: Temperature °C
    show: true
    showAlways: true
    showForNullSeries: true
    opposite: false
    reversed: false
    logarithmic: false
    tickAmount: 10
    min: 10
    max: 25
    forceNiceScale: false
    floating: false
    decimalsInFloat: 0