Skip to content

Gráficos de Datadis

Índice de contenido

    Tarjeta ApexCharts

    Esta tarjeta nos permitirá crear los gráficos de Datadis, pero también gráficos de otras entidades en nuestro Home Assistant. Vamos a ver cómo instalarla. Para que esta tarjeta nos muestre los gráficos de nuestro consumo eléctrico, previamente tenemos que haber hecho la integración de Datadis en Home Assistant.

    Instalación

    HACS (recomendado)

    Esta tarjeta está disponible en HACS (Home Assistant Community Store). HACS es una tienda comunitaria de terceros y no está incluida en Home Assistant lista para usar. Simplemente entre en HACS, Interfaz y busque por «apexcharts»

    Instalación manual

    Descargue y copie apexcharts-card.js desde la última versión a su directorio config/www.

    Agregue la referencia del recurso como se describe a continuación.

    Agregar referencia de recurso

    Si configura Lovelace a través de YAML, agregue una referencia apexcharts-card.js dentro de su configuration.yaml:

    resources:
      - url: /local/apexcharts-card.js?v=1.10.0
        type: module
    

    De lo contrario, si prefiere el editor gráfico, use el menú para agregar el recurso:

    1. Asegúrese de que el modo avanzado esté habilitado en su perfil de usuario (haga clic en su nombre de usuario para llegar allí)
    2. Vaya a Configuración -> Paneles Lovelace -> Pestaña Recursos. Pulsa el icono naranja (+)
    3. Ingrese la URL /local/apexcharts-card.js y seleccione el tipo «Módulo JavaScript».
    4. Reinicie Home Assistant.

    A continuación se ofrecen una serie de tarjetas (en yaml) que permiten visualizar los datos obtenidos mediante gráficas interactivas generadas con un componente llamado apexcharts-card, que también debe instalarse manualmente o mediante HACS. Siga las instrucciones de https://github.com/RomRider/apexcharts-card y recuerde tener el repositorio a mano para personalizar las gráficas a continuación.

    NOTA: en las siguientes tarjetas deberá reemplazar TODAS xxxx por los últimos cuatro caracteres de su CUPS.

    Consumo diario

    Gráficos de Datadis GIF consumo diario
    Gráficos de Datadis
    type: custom:apexcharts-card
    graph_span: 30d
    stacked: true
    span:
      offset: '-1d'
    experimental:
      brush: true
    header:
      show: true
      title: Consumo diario
      show_states: false
      colorize_states: false
    brush:
      selection_span: 10d
    all_series_config:
      type: column
      unit: kWh
      show:
        legend_value: false
    series:
      - entity: sensor.edata_XXXX
        name: Total
        type: column
        data_generator: |
          return hass.connection.sendMessagePromise({
          type: 'edata/consumptions/daily', 
          scups: 'XXXX'}).then(
              (resp) => {
                  return resp.map((data, index) => {
                    return [new Date(data['datetime']).getTime(), data['value_kWh']];
                  });
              }
          );
        show:
          in_chart: false
          in_brush: true
      - entity: sensor.edata_XXXX
        name: Punta
        data_generator: |
          return hass.connection.sendMessagePromise({
          type: 'edata/consumptions/daily', 
          scups: 'XXXX'}).then(
              (resp) => {
                  return resp.map((data, index) => {
                    return [new Date(data['datetime']).getTime(), data['value_p1_kWh']];
                  });
              }
          );
      - entity: sensor.edata_XXXX
        name: Llano
        data_generator: |
          return hass.connection.sendMessagePromise({
          type: 'edata/consumptions/daily', 
          scups: 'XXXX'}).then(
              (resp) => {
                  return resp.map((data, index) => {
                    return [new Date(data['datetime']).getTime(), data['value_p2_kWh']];
                  });
              }
          );
      - entity: sensor.edata_XXXX
        name: Valle
        data_generator: |
          return hass.connection.sendMessagePromise({
          type: 'edata/consumptions/daily', 
          scups: 'XXXX'}).then(
              (resp) => {
                  return resp.map((data, index) => {
                    return [new Date(data['datetime']).getTime(), data['value_p3_kWh']];
                  });
              }
          );

    Consumo mensual

    consumo mensual Gráficos de Datadis
    type: custom:apexcharts-card
    graph_span: 395d
    stacked: true
    yaxis:
      - id: eje
        opposite: false
        max: '|+20|'
        min: ~0
        apex_config:
          forceNiceScale: true
    header:
      show: true
      title: Consumo mensual
      show_states: false
      colorize_states: false
    all_series_config:
      type: column
      unit: kWh
      yaxis_id: eje
      extend_to_end: false
      show:
        legend_value: false
    series:
      - entity: sensor.edata_XXXX
        type: line
        name: Total
        data_generator: |
          return hass.connection.sendMessagePromise({
          type: 'edata/consumptions/monthly', 
          scups: 'XXXX'}).then(
              (resp) => {
                  return resp.map((data, index) => {
                    return [new Date(data['datetime']).getTime(), data['value_kWh']];
                  });
              }
          );
        show:
          in_chart: true
      - entity: sensor.edata_XXXX
        name: Punta
        data_generator: |
          return hass.connection.sendMessagePromise({
          type: 'edata/consumptions/monthly', 
          scups: 'XXXX'}).then(
              (resp) => {
                  return resp.map((data, index) => {
                    return [new Date(data['datetime']).getTime(), data['value_p1_kWh']];
                  });
              }
          );
      - entity: sensor.edata_XXXX
        name: Llano
        data_generator: |
          return hass.connection.sendMessagePromise({
          type: 'edata/consumptions/monthly', 
          scups: 'XXXX'}).then(
              (resp) => {
                  return resp.map((data, index) => {
                    return [new Date(data['datetime']).getTime(), data['value_p2_kWh']];
                  });
              }
          );
      - entity: sensor.edata_XXXX
        name: Valle
        data_generator: |
          return hass.connection.sendMessagePromise({
          type: 'edata/consumptions/monthly', 
          scups: 'XXXX'}).then(
              (resp) => {
                  return resp.map((data, index) => {
                    return [new Date(data['datetime']).getTime(), data['value_p3_kWh']];
                  });
              }
          );

    Maxímetro

    Captura maximetro
    type: custom:apexcharts-card
    graph_span: 1y
    span:
      offset: '-30d'
    header:
      show: true
      title: Maxímetro
      show_states: false
      colorize_states: false
    chart_type: scatter
    series:
      - entity: sensor.edata_XXXX
        name: Potencia máxima
        type: column
        extend_to_end: false
        unit: kW
        show:
          extremas: true
          datalabels: false
        data_generator: |
          return hass.connection.sendMessagePromise({
          type: 'edata/maximeter', 
          scups: 'XXXX'}).then(
              (resp) => {
                  return resp.map((data, index) => {
                    return [new Date(data['datetime']).getTime(), data['value_kW']];
                  });
              }
          );
    

    Ayer

    Captura ayer
    type: custom:apexcharts-card
    chart_type: pie
    header:
      show: true
      title: Ayer
      show_states: true
      colorize_states: true
      floating: true
    all_series_config:
      unit: kWh
      show:
        legend_value: true
        in_header: false
    apex_config:
      chart:
        height: 250px
    series:
      - entity: sensor.edata_XXXX
        attribute: yesterday_kWh
        show:
          in_chart: false
          in_header: true
        name: Total
      - entity: sensor.edata_XXXX
        attribute: yesterday_p1_kWh
        name: Punta
      - entity: sensor.edata_XXXX
        attribute: yesterday_p2_kWh
        name: Llano
      - entity: sensor.edata_XXXX
        attribute: yesterday_p3_kWh
        name: Valle

    Mes en curso

    Gráficos de Datadis Captura mes en curso
    type: custom:apexcharts-card
    chart_type: pie
    header:
      show: true
      title: Mes en curso
      show_states: true
      colorize_states: true
      floating: true
    all_series_config:
      show:
        legend_value: true
        in_header: false
      unit: kWh
    apex_config:
      chart:
        height: 250px
    series:
      - entity: sensor.edata_XXXX
        attribute: month_kWh
        show:
          in_chart: false
          in_header: true
        name: Total
      - entity: sensor.edata_XXXX
        attribute: month_p1_kWh
        name: Punta
      - entity: sensor.edata_XXXX
        attribute: month_p2_kWh
        name: Llano
      - entity: sensor.edata_XXXX
        attribute: month_p3_kWh
        name: Valle
      - entity: sensor.edata_XXXX
        unit: €
        attribute: month_pvpc_€
        show:
          in_chart: false
          in_header: true
        name: PVPC

    Mes anterior

    Captura mes pasado
    type: custom:apexcharts-card
    chart_type: pie
    header:
      show: true
      title: Mes pasado
      show_states: true
      colorize_states: true
      floating: true
    all_series_config:
      show:
        legend_value: true
        in_header: false
      unit: kWh
    apex_config:
      chart:
        height: 250px
    series:
      - entity: sensor.edata_XXXX
        attribute: last_month_kWh
        show:
          in_chart: false
          in_header: true
        name: Total
      - entity: sensor.edata_XXXX
        attribute: last_month_p1_kWh
        name: Punta
      - entity: sensor.edata_XXXX
        attribute: last_month_p2_kWh
        name: Llano
      - entity: sensor.edata_XXXX
        attribute: last_month_p3_kWh
        name: Valle
      - entity: sensor.edata_XXXX
        unit: €
        attribute: last_month_pvpc_€
        show:
          in_chart: false
          in_header: true
        name: PVPC

    Si quieres una mayor explicación, no te pierdas el vídeo de gráficos de Datadis

    Sígueme a Youtube

    Kodi en español - Sígueme en Youtube

    Ajustes