Plotly interactive Graph Card

I want my y-axis only 0 and 1. how can I change this ?

See here: Basics: How to map states to values on plot? (Advise needed). Ā· dbuezas/lovelace-plotly-graph-card Ā· Discussion #356 Ā· GitHub

1 Like

edit:


                tickmode: "array"
                tickvals: [0,1]

image

3 questions

1.how can I remove the date ?
2. can I have a tittle in the upper left like in apex chart ?
3. Why cant I see any title ?

image

          - type: custom:plotly-graph
            entities:
              - sensor.keuken_vloerverwarming_status
            name: On/Off  
            hours_to_show: 8  
            refresh_interval: 10
            fillcolor: rgba(174, 236, 239, 0.5) 
            config:
              scrollZoom: false
              displayModeBar: false
            layout:
              dragmode: false
              title: "On/Off"
              showlegend: false
              yaxis:
                tick0: '0'
                nticks: '2'
                tickmode: "array"
                tickvals: [0,1]
  1. how can I remove the date ?

google plotly xaxis date format

  1. can I have a tittle in the upper left like in apex chart ?

use the native plotly title in layout: {title:"whatever"} and position it googling plotly title position

  1. Why cant I see any title ?

I donā€™t know, this does work fine for me. try changing margins and positioning it.

Life pro tip: the words hello, thanks and please and part of the human communication protocol. If you donā€™t comply with the spec, the free forum assistance service api will fail with an internal server error and discard your request.

1 Like
    - square: false
        columns: 1
        type: grid
        cards:                   
          - type: custom:plotly-graph
            entities:
              - sensor.keuken_vloerverwarming_status
            hours_to_show: 8  
            refresh_interval: 10
            fillcolor: rgba(174, 236, 239, 0.5) 
            config:
              scrollZoom: false
              displayModeBar: false
            layout:
              dragmode: false
              title: {
                text:'On/Off',
                font: {
                  family: 'Courier New, monospace',
                  size: 24
                },
              xref: 'paper',
              x: 0.05,
              }
              showlegend: false
              yaxis:
                # tick0: '0'
                nticks: '2'
                tickmode: "array"
                tickvals: [0,1]
              xaxis:
                tickformat: ''

image

Hi all,
I want to remove the date. so I was thinking add tickformat:ā€œā€, but it is still active
Added a tittle, but it is not seen in the chart.

Where am I going wrong ?
Thanks in advance

Hi there :wave:
Your yaml has trailing commas and curly braces (most likely pasted from json). Probably this is breaking everything.

Hello,

would you mind sharing the yaml for this graph with plotly @mateine ? I am looking at doing something similar with min, moving average, max, and some fill between min and max valuesā€¦

(I have a very chatty sensor with high variability of the values, which I am trying to make a little easier to read)

image

Itā€™s here: Long term statistics support Ā· dbuezas/lovelace-plotly-graph-card Ā· Discussion #81 Ā· GitHub

I need to make an examples page with links to yamls

1 Like

Is there a way to get stackgroups to work with a granularity of 1 min or less? 5 min is fairly delayed and if I donā€™t use the period attribute the data doesnā€™t stack at all. 5minute appears to be the smallest period attribute that can be applied.

type: custom:plotly-graph
entities:
  - entity: sensor.washer_power
    name: Washer
    stackgroup: stacked
    period: 5minute
  - entity: sensor.office_plug_power
    name: Office
    stackgroup: stacked
    period: 5minute
  - entity: sensor.server_rack_ups_power_usage
    name: Server Rack
    stackgroup: stacked
    period: 5minute
  - entity: sensor.xmas_lights_power
    name: Xmas Lights
    stackgroup: stacked
    period: 5minute
  - entity: sensor.deep_freeze_power
    name: Deep Freeze
    stackgroup: stacked
    period: 5minute
hours_to_show: 1
1 Like

Setting period makes stackgroups work because it switches to statistics data, and that results in the entities having data with the same timestamps.

To use stack group with the normal history data, try the resample filter

That sounds simple but when I remove ā€œperiod: 5minuteā€ from each entity and then ad a filters section to the graph with

filters:
  - resample: 5m

I donā€™t get the same result.

Edit: Never mind, adding it as defaults for entities at works, fixed it thank-you

defaults:
  entity:
    filters:
      - resample: 1m
1 Like

Hello @mateine - it seems yo are back after a bit if a break.
Can you please help me with my post quite a few posts back - hopefully referenced in this pose.
Susan

Ok, for anybody looking for an answer, it was resolved here:

Hi,

Iā€™m trying to get a enegy dashboard like card, showing the hours my heating system is active per day.

This is my code nowadays:

type: custom:plotly-graph
hours_to_show: 168
defaults:
  yaxes:
    fixedrange: true
layout:
  xaxis:
    rangeselector:
      'y': 1.25
      buttons:
        - count: 7
          step: day
        - count: 1
          step: month
        - count: 1
          step: year
entities:
  - entity: sensor.salon_heating_equivalente_left
    statistic: sum
    period: day
    name: Horas calefaccion equivalentes
    unit_of_measurement: h
    type: bar
    filters:
      - derivate: d
refresh_interval: 10

The problem is that the period and derivate filter are fixed. I would like them to change to month when I press the buttom year, similar to what happens in th energy dashboard.

Any idea on how to do it? I have been trying with getFromConfig parameter but I donā€™t know how and where use it.

Hi Susan!
yeah, Iā€™m back from vacation :slight_smile:
Would you make a post with your question in a Q&A github discussion?
Itā€™s easier for me to follow up there when involves some back and forth.

Try using a $ex and something like:

{
   const [start, end] = get('visible_range');
   const dist = +end-start;
   const day = 1000*60*60*24;
   const month = day*30;
   if (dist < day) return 'h';
   if (dist < month) return 'd';
   return 'M';
}

I tried that code and it works for change the derivate filter, but some strange error appears. This is the code configured in the card:

type: custom:plotly-graph
hours_to_show: 168
defaults:
  yaxes:
    fixedrange: true
layout:
  xaxis:
    rangeselector:
      'y': 1.25
      buttons:
        - count: 1
          step: day
        - count: 7
          step: day
        - count: 1
          step: month
        - count: 1
          step: year
entities:
  - entity: sensor.salon_heating_equivalente_left
    statistic: sum
    period: 
      0s: hour
      24h: hour
      7d: day
      6M: month
      1y: month
    name: Horas calefaccion equivalentes
    unit_of_measurement: h
    type: bar
    filters:
      - derivate: |       
          $ex {
             const [start, end] = get('visible_range');
             const dist = +end-start;
             const day = 1000*60*60*24;
             const month = day*30;
             if (dist < day) return 'h';
             if (dist <= month) return 'd';
             return 'M';
          }
refresh_interval: 10

So the filter is changing when I press the buttons, but the bars shown are not correct. THis is the variable history that I want to represent in the graph bar:

However the first representation of the graph is showing an strange first value on Feb. 20:

image

If I scroll to the left a little that strange value disapper:

image

I I change to 1d the values ar not correct either, if the total day is 3h (and the total var value is 18.5 h) , one hour the same day cannot be 63 hours.

image

The same is happening when changing to 1m:
image

ok, I have tried different options and neither seem to work. Even more, with the simplier original code , the wrong values also appears in the graph:

Original code:

type: custom:plotly-graph
hours_to_show: 168
defaults:
  yaxes:
    fixedrange: true
layout:
  xaxis:
    rangeselector:
      'y': 1.25
      buttons:
        - count: 7
          step: day
        - count: 1
          step: month
        - count: 1
          step: year
entities:
  - entity: sensor.salon_heating_equivalente_left
    statistic: sum
    period: day
    name: Horas calefaccion equivalentes
    unit_of_measurement: h
    type: bar
    filters:
      - derivate: d
refresh_interval: 10

First representation:

image

after scrolling to the left, the value the 20th changes to 4.86h

image

Scrolling a little more I can get the correct value, 2.34h but the 19th is not represented and the variable has value for that day (values from 18th )

image

When you derivate or integrate, you should discard the first datapoint. This is because Home Assistant sends a ā€œfakeā€ datapoint at the exact beginning of the requested range (i.e the leftmost date in the visible range), with the value before it.

When derivating or integrating, the math takes into account the time difference between points, which will be therefore wrong for the first element.

Use

filters:
  - filter: i>0