[CARTE] Apexcharts-card

Bonjour à tous,

J’ai moi même un petit soucis avec la carte, je souhaite importer des données venant du data_generator.

Je suis passé pour essayer et éventuellement voir si la facture s’allège chez Barry Energie qui donne accès à son API.
J’arrive donc à récupérer les données de prix via Node Red et Pyscript (pour comparaison avant de passer complètement sous Node-red). Les données sont stockées dans les attributs sous la forme d’un dictionnaire {‹ Date-heure ›:valeur}:
image
Entre Node Red, pyscript et barry, pas de soucis, le graphique m’affiche bien en abscisse la bonne heure et le bon prix:

type: 'custom:apexcharts-card'
header:
  show: true
  title: Barry Electricité NODERED (€/kWh)
  show_states: false
  colorize_states: true
y_axis_precision: 4
span:
  start: day
  offset: '-1day'
graph_span: 72hours
all_series_config:
  stroke_width: 2
  extend_to_end: false
  curve: stepline
now:
  show: true
  label: now
  color: red
series:
  - entity: sensor.general_prices
    unit: €/kWh
    float_precision: 5
    data_generator: |
      let res = [];
      for (const [key, value] of Object.entries(entity.attributes.values)) {
        res.push([new Date(key).getTime(), value]);
      }
      return res.sort((a, b) => { return a[0] - b[0] })

J’ai donc décidé de faire une moyenne mobile sous Node Red afin de trouver le meilleur moment pour lancer la charge du VE / Gros consommateurs.

Pas de soucis avec le retour Node Red qui donne la bonne heure de départ et utilise la même fonction pour renvoyer sous la forme {‹ Date-heure ›:valeur}

Au moment de l’affichage, j’ai par contre un décalage de 2H que je n’avais pas avec les prix généraux:
image
image

On peut voir que la fonction à ajouté 2H à la valeur mini entre les attributs du sensor et le graph…

Une idée d’ou cela pourrait venir ?

Réponse à moi même:

Vu que l’on peut utiliser moment.js, j’ai simplement fait la soustraction de deux heures mais je ne trouve pas la solution élégante ni même perenne du fait de l’heure d’été et l’heure d’hiver…

Si quelqu’un à une solution plus propre…

Hello,

@RomRider , il semble que j’ai un bug en utilisant la card dans une swipe:
image
La première est ok mais, les suivantes… :
image
Les couleurs sont décalées par rapport au chiffres.

Une idée?

THX

2 choses à test:

  • Si tu la sors de swipe-card, ça donne quoi?
  • fill_raw: last dans les 2 séries en la laissant dans swipe-card.

Hors de la swipe, c’est bon.
Dedans avec fill_raw, pas de changement.

Alors malheureusement je ne pourrai rien faire :confused: Je pense qu’il y a certains styles CSS de swipe-card qui « cassent » le styling the ApexCharts

arf dommage, bizarre que sur une cela fonctionne et pas les autres…

Bonjour à tous,
j’ai un petit problème avec le Apexcharts je n’arrive pas à afficher les valeurs que je souhaite.
Je souhaite afficher un graph avec la conso électrique du jour cumulant heures pleines et heures creuses.
J’arrive à afficher un graph avec les 2 l’un a côté de l’autre (ne faite pas attention aux valeurs) mais comment vous faites pour les avoir superposé comme dans le tout premier post du topic ?
chez moi ça ressemble à ça :
image

et je souhaite que ça ressemble à :
image

Merci d’avance

Salut

Essai de mettre :

type: custom:apexcharts-card
stacked: true
… Etc

1 « J'aime »

Tout à fait ça ! Parfait merci beaucoup pour ta réponse rapide et efficace :+1:

2 « J'aime »

Bonjour j’ai une petite question je voudrai afficher une consigne dans mon graph mais voici ce que j’ai


Si je choisi Line c’est guère mieu

Comment faire pour que la valeur de consigne soit maintenu à la même valeur jusqu’a,la prochaine maj,
Voici,le code

type: custom:apexcharts-card
header:
show: true
title: ApexCharts-Card
show_states: true
colorize_states: true
series:

  • entity: input_number.consigne_temperature
    type: line
  • entity: sensor.lumi_lumi_weather_22874005_temperature

Merci

Bonsoir a vous,

J’aimerai faire en sorte que les colonnes soient par semaine
Je n’arrive pas à caler correctement les dates.
Merci pour votre aide

Image 1

type: custom:apexcharts-card
graph_span: 31d
span:
  end: week
stacked: true
header:
  show: true
  title: Conso Semaine
  show_states: true
  colorize_states: true
series:
  - entity: sensor.enedisgateway_xxxxxxxxxx_consumption_this_week
    type: column
    name: Semaine
    color: yellow
    group_by:
      duration: 1w
      func: max

Salut tout le monde, après une longue pause, je peux enfin me dédier de nouveau à HA :slight_smile:
Encore merci pour le job fait pour les infos Enedis, ca a beaucoup évolué :slight_smile:

Seulement, je ne comprends pas un petit « problème ». J’ai intégré les magnifiques apexcharts mais j’ai un problème de data que je ne comprends pas.
J’ai pas mal cherché sans trouver de problème similaire, je m’excuse si cela a déjà été adressé

La Lovelacecard de Saniho affiche bien les valeurs pour le 30 Novembre


Info de l’API

La config de ma card

type: custom:content-card-linky
entity: sensor.myenedis_xxxx_2
nbJoursAffichage: '7'
showIcon: true
showHistory: true
...

Et pourtant mon graph Apexchart dessine un creux pour la journée du 30 Novembre (et du 27 mais pas grave)
HA - ApexChart

Le code de mon chart

type: custom:apexcharts-card
graph_span: 7d
header:
  show: true
  title: Consommation électrique (7 jours)
span:
  end: day
  offset: '-1h'
stacked: true
series:
  - entity: sensor.myenedis_xxxxx_2
    attribute: dailyweek_HC
    type: line
    name: kWh(HC)
    group_by:
      func: max
      duration: 1d
  - entity: sensor.myenedis_xxxxx_2
    attribute: dailyweek_HP
    type: line
    name: kWh(HP)
    group_by:
      func: max
      duration: 1d
  - entity: sensor.myenedis_xxxxx_2
    attribute: daily
    type: line
    name: kWh(Total)
    group_by:
      func: max
      duration: 1d

En comparant les autres dates, les données remontées et le graphe sont ok
HA - Conso 2Dec HA - Conso 2Dec

dailyweek_HC:
  - '10.783'
  - '11.804'
  [...]
dailyweek:
  - '2021-12-02'
  - '2021-12-01'
  [...]
dailyweek_HP:
  - '21.443'
  - '24.066'
  [...]
daily:
  - '32.23'
  - '35.87'
  [...]

Merci pour votre aide

Bonjour; pourriez vous m’indiquez comment vous l’avez installé ?

Bonjour Zobi je suis nouveau sur Home assistant et je cherche une card comme tu a fait pourrai tu partager ton code stp car je n’arrive pas a combiné les é sensors.

Merci bcp

Depuis HACS section frontend.

Bonjour,
Quelqu’un pourrait il m’aider à faire un graphique à partir des données Consumption d’un Sonoff Pow R2
Je n’y arrive pas avec le data generator. Les données sont de cette forme dans l’entité (Capture)
Merci

Hello, alors en fait, c’est un phenomène normal.
Il faut savoir que Enedis met à disposition les données à J+1 environ, mais parfois, à J+2…donc myEnedis à un sensor qui contient la consommation à J-2…sensor utilisé par la card.
Sauf que si un jour J-2 n’est pas disponible, on mettre zéro dans le sensor de la card…par contre peut-etre que 24h après, Enedis mettra cette information à disposition…sauf que le sensor lui attend à ce moment J-2…et ne modifiera pas la valeur de J-3( c’est un des points « embetant » que HA, c’est qu’il ne gere pas une date pour une valeur, mais uniquement une valeur « temps reel » ou depuis une date… mais pas de modification à posterio ;( ) … voilà l’explication est un peu longue à lire, mais te donne la raison.

Bonsoir,
Est-il possible d’avoir un graphique avec des données fixes et pas l’historique du même sensor ?
Je m’explique pour essayer d’être plus clair : historique de 7 jours (par-exemple) mais avec à chaque fois un sensor différent par jour.

tu souhaiterais, un sensor J-1, un J-2…jusqu J-7 avec rotation automatique ?
si oui, cela est possible, mais peux-tu preciser ce que tu veux dans le sensor, et l’objectif ?

Bonjour,

Sur cette carte ApexCharts je devrai avoir des pourcentages dans le donut.

Pouvez-vous me dire ce qui cloche?
Merci

type: custom:apexcharts-card
header:
  show: true
  title: Energie
  show_states: false
  colorize_states: true
series:
  - entity: sensor.energy_total_daily
    name: Réseau
    color: rgb(58, 151, 244)
  - entity: sensor.ecu_today_energy
    name: Solaire
    color: yellow
span:
  end: day
chart_type: donut
apex_config:
  dataLabels:
    enable: true
  plotOptions:
    pie:
      donut:
        labels:
          show: true
          decimals: 2
          total:
            show: true
            decimals: 2