Hi there!

I'm trying to use ploty for showing graph for my binary open/close sensor. I fixed range with the following:

layout:
  yaxis:
    range:
      - 'off'
      - 'on'
    fixedrange: true

However, for the first day graph looked ok (only on and off values were shown), but now it shows me also "unknown" value:

How could I avoid it?

Reported here https://community.home-assistant.io/t/plotly-interactive-graph-card/347746/5

Hi. I just tried this and I really love it! It has everything that history chart was missing.
Unfortunately it worked for half an hour and now nothis is displayed anymore, both on PC and Mobile app.
Mmm… I’m trying to set it up again, it look like it doesn’t like to be put in a vertical stack card.
I created 2 charts and they are ok, if I put them in a avertical stack, no graph is displayed anymore.
By the way… great work!

Hi,
just upgraded to 1.4.2 to get the new statistics support - awesome!

Unfortunately, that broke one of my more advanced graphs - a stacked area graph with a lambda to sort all values into 15s buckets.
It looks like plotly can't stack the graphs any more, and looks somewhat like in earlier versions if one tried to stack graphs with different X values (timestamps):

In the developer console, I can see a lot of this:

plotly-graph-card.js?hacstag=413812496142:44 TypeError: a.lambda is not a function
    at plotly-graph-card.js?hacstag=413812496142:44:6004
    at Array.flatMap (<anonymous>)
    at Qj.getData (plotly-graph-card.js?hacstag=413812496142:44:5594)
    at plotly-graph-card.js?hacstag=413812496142:44:7499
    at Qj.withoutRelayout (plotly-graph-card.js?hacstag=413812496142:44:585)
    at Qj.plot (plotly-graph-card.js?hacstag=413812496142:44:7450)
    at Qj.fetch (plotly-graph-card.js?hacstag=413812496142:12:13141)

so it seems like the lambda is not executed any more.
And indeed, if I put a console.log in the first line of my lambda, it seems to never be executed at all.

Card configuration:

type: custom:plotly-graph
layout:
  height: 550
  title:
    text: Strommix
entities:
  - entity: sensor.strom_eigenverbrauch
    name: Direktverbrauch
    fillcolor: 90EE90
    stackgroup: verbrauch
  - entity: sensor.strom_netzbezug
    name: Netzbezug
    stackgroup: verbrauch
    fillcolor: red
  - entity: sensor.strom_netzeinspeisung
    fillcolor: '#006400'
    name: Einspeisung
    stackgroup: verbrauch
hours_to_show: 12
refresh_interval: 10
defaults:
  entity:
    line:
      width: 0
    lambda: |-
      (ys, xs) => {
          const seconds = 15 // 60
          const window_size_ms = 1000 * seconds
          const t0 = Math.ceil(+xs[0]/window_size_ms)*window_size_ms;
          const t1 = Math.ceil(+xs[xs.length-1]/window_size_ms)*window_size_ms;
          const buckets = (t1 - t0) / window_size_ms

          const result = {
            x: Array.from({length: buckets}, (_, i) => new Date(t0 + i * window_size_ms)),
            y: Array(buckets).fill(NaN)
          };

          for (let i = 0; i < xs.length; i++) {
            const t = +xs[i]
            const bucket = Math.floor((t - t0) / window_size_ms)
            const values = [ys[i]]

            for (let j = i; j < xs.length; j++) {
              const t2 = +xs[j]
              const bucket2 = (t2 - t0) / window_size_ms
              if (bucket == bucket2) {
                values.push(ys[j])
                i++
              } else {
                break;
              }
            }
            let value = values.reduce((a, b) => a + b, 0) / values.length
            //let value = values[0]
            //console.log('bucket=' + bucket + ', value=' + value)
            result.y[bucket] = value
          }
          let prev = 0;
          for (let i = 0; i < result.y.length; i++) {
            if (isNaN(result.y[i]))
              result.y[i] = prev
            prev = result.y[i]
          }
          //console.log(result)
          return result
        }

BONUS: this is my PV graph. At around noon, you can see the effect of a partly solar eclipse today!

I really like to use plotly graphs but do miss the full size pop-ups that sensor cards provide and think this would be a great feature for plotly graph cards, too

It would be worthwhile to support long-term statistics for entities that support it. There needs to be options to toggle statistics mode on and off, select between the mean, max, min or sum, and select between the period hour, day or month (there is 5min too IIRC).

Apex-charts card already supports long-term statistics. See https://github.com/RomRider/apexcharts-card/blob/master/src/graphEntry.ts#L257 for the if/else clauses with first statistics fetching then normal history fetching. AFAICT the difference is not much and mostly in _fetchStatistics vs _fetchRecent even though the value of the datapoint then comes from entry[period] instead of entry.state or an attribute, and the time is gotten from start/end attributes instead of entry.last_changed/entry.last_updated. To me it seems that it is not too hard to retrofit the statistics fetching into the format output by fetchSingleRange() at https://github.com/dbuezas/lovelace-plotly-graph-card/blob/master/src/Cache.ts#L13

Some example JS code that actually fetches statistics data, filters it and returns a list of [timestamp, value] pairs:

      const statistics = await hass.callWS({
          type: 'recorder/statistics_during_period',
          start_time: new Date(start).toISOString(),
          end_time: new Date(end).toISOString(),
          statistic_ids: [entity.entity_id],
          period: "hour",
      });
      var result = [];
      statistics[entity.entity_id].forEach( (item) => {
        val = parseFloat(item.mean)
        if (val > 100) {
           result.push([
            ((new Date(mid.start).getTime()) + (new Date(mid.end).getTime()))/2,
            val
          ])
        }
      });
      return result;

It is adapted from https://gitlab.com/home-assistant-frnchfrgg/apex-local-extrema/-/blob/main/apex.yaml that I use in production currently (but lovelace-ploty-graph-card has features I hope to use, in particular your data mangling feature is not per-point so I could do all this without abusing a data generator).

I would do it myself in a pull request (and maybe will) but since you embed the history entry into the result I would have to check all around what fields you expect to see in users of the cache.

reported here: https://community.home-assistant.io/t/plotly-interactive-graph-card/347746/3

Firstly, This is excellent. I have used 2 graphs previously to track short term and long term CPU usage and this provides exactly what I was trying to achieve. Thank you.

I had a problem this morning, I am seeing this error when I edit the card:-

Configuration errors detected:

*** document.createElement(...).constructor.getConfigElement is not a function**
The card config which was working last night is as follows -

type: custom:plotly-graph
entities:

• entity: sensor.load_1m
• entity: sensor.processor_use_percent
  hours_to_show: 2
  refresh_interval: 10
  title: CPU Load
  Clearing the browser cache had no effect but a restart of HA seemed to resolve it so it could be an issue with my setup.

I will convert more of my graphs to plotly and let you know if anything else occurs.

~B

adding fill: tonexty at the same level as the entity works here and links with the previous entity in the yaml list. Warning: AFAICT it links to the previous one that is enabled. If you disable it in the legend then it links to the previous one and so on.

It makes me crazy... i can do it outside HA, but not inside...
Here is one of my example:

  - entity: sensor.ths_fridge_humidity
      name: φ[%] (max)
      fill: none
      line:
        color: rgba(143, 86, 164, 0.6)
        width: 1
      statistic: max
      period: 1day
      showlegend: true
      
    - entity: sensor.ths_fridge_humidity
      fill: tonexty
      name: φ[%] (min)
      line:
        color: rgba(143, 86, 164, 0.6)
        width: 1
      statistic: min
      period: 1day
      showlegend: true
      
    - entity: sensor.ths_fridge_humidity
      fill: none
      name: φ[%] (mean)
      line:
        color: rgba(143, 86, 164, 1.0)
      statistic: mean
      period: 4hour`

The result:

I think I was exhaustive in trying different combinations of fill, order of entities, but I get similar results....

Originally posted by @r-jean-pierre in #75 (reply in thread)

DST change happened Sunday morning in my country which uncovered a bug in plotly-graph: it generated two points with the same x value for the two consecutive hours, which creates a strange graph:

I think an easy way to solve this bug is to always convert dates and times to UTC when generating data points, and if needed converting anew to the local timezone for axes label and tooltip display. I'll try when I have time.

as wished in #85 :

Could the width of the card be better used in the standard layout?
As you can see there is a bigger right boarder on the right side that could be used for the graph...
(Just compare to the "standard" history graph). Left side could be a little bit more narrow as well :-)

Thx for your great work,

Sebastian

Would it be possible to enable a normaliz function on the data on the latest value? (or on the first/average value of the selected timeframe 1day, 1 week,..)
e.g. if you have a 5 stock charts with a large difference in their stock value, this would allow to compare the trends of the stocks

First, since installing 1.5.0 plotly-graph behaves as if period: auto was set even if I set period: hour in defaults:/entity:.

Second, the transition between hour and day occurs roughly when there are 10 days visible, which does not mean 500 data points are visible (only 10, maybe 15 at most). Even if I considered that it sums over all six displayed entities, that's not 500 points by far. I can supply a GIF screen cast if you cannot reproduce.

Would it be possible to create a configurable height so one could see more detail, like the mini-graph-card:
https://github.com/kalkih/mini-graph-card

This would be a lot more readable if I could adjust the height:

I want to start by thanking you for an incredibly good card.
It's exactly what I've been looking for. 😃 😃

I have 2 problems with the card.

I do not get hoverlabel (I think it is called that) to appear on my Mobile App with Android.
The box with the current value when you have the mouse pointer over.
But it shows up on my pc with windows.

I love the new possibility of multiple graphs in 0.6.0 that are together

But I'm having problem with the left column with the unit.

In my example it should have been:
"°C"
"DM"
"°C"
"Hz"
"kr/timma"
"öre/timma"

There is no sensor with Hz as unit in the third graph.

Thank you,

I'm trying to customize hovertemplate but whatever I set seems to get %{customdata.name} : added in front of it, am I missing a configuration option or is there some other way to prevent this? See yellow and red boxes below for an example

I poked around a little bit in plotly-graph-card.ts but my js is pretty weak. I see where the default template is set but can't figure out why the name : still gets added when I provide a template?

I have some sensors for hourly and daily values that increase till the next hour/day and then reset. It is now not very easy to create a graph of the maximum of these hourly/daily values (a bar chart for example)
For example I have this graph (created in another graph library, but this does not allow me to scroll easily):

This is based on this sensor:

Hi,

Could the date be shown in the time axis as the normal historiy graph?
In the history graph the date is shown instead of "00:00" which is kind of nice as it saves one line.

Thx for your great work,

Sebastian

Hi.
Your graph has the great feature to be able to scroll along the timeline, so I think that a button that can shift the displayed data +/- 12 or 24 or maybe a configurable amount of hours would be very useful.

Since "hours_to_show" is a configurable parameter, the +/- button could simply move the displayed data forward or back for the value used in "hous_to_show".

Thank you again for this very useful card.

[from xalex75 in the HA community]

About zoom… yes, probably zooming only x axis would be more effective, otherwise I noticed that I need to move down the graph everytime

I have 2 Power meter in 1 scale
1x PV
1x Real used power

The graphs ar not in sync in the y axis.

[from xalex75 in the HA community]

I noticed that on mobile and pc there’s a little difference in showing time and day, and that on pc it results cut.

PC:

Mobile:

It happens only in 12h view, while both 6h and 1d views are ok, and only on PC.
Probably showing the year is not necessary and can save space.

Add the y axis min and max in the configuration options to fix the range of the y axis.

Hi
i recently discoverd this card, and i like it very much, but why are there sections in graphs omitted if the value doesn't change.
it looks bad compared to the history-graph, for example:

or am i missing some parameter? apologies if i do
tonexty and tozeroy are not the solutions i am looking for

I use a tablet that stays on 24/7, and I have noticed the CPU temperature of my netbook home assistant host PC show severe spikes as long as the lovelace-plotly-graph-card is kept visible on screen. If i go to another lovelace page, without this custom card, the CPU temperature spikes are immediately gone.

[from xalex75 in the HA community]

Hi.
I just saw the reply in issues section.
There you proposed something little different from what you realized here, buttons for shifting back he view, not just for changing hours to view.
On the screen they look the same, so probably using both at the same time could be a little confusing.
What about left and right buttons for shifting the view back or forward for the amount of hours selected?
I don’t know if this would be something that would require too much work or not, I’m just asking from the user point of view 😉

If you have a line graph with two fixed axes, and change the zoom using the time period buttons, and then use the reset button, it loses the left axis fixed scale, whilst retaining the one on the right.

Have one plotty card configured for right Y-axis:

layout:
  margin:
    r: 50

Issue is: after switching to other lovelaces this setting become applied on cards where NOT configured !!!

Before card with layout configured opened once card with no right margin looks as expected:

Is it possible to add different background colors on the y axis to get color ranges?
like this:

Very strange situation if move graph zoom select only some lines and press Autoscale
in 90% of cases is just same as I press Reset

Not a browser problem tested with different browsers, same effect.

Currently, plotly-graph is not compatible with card-mod. I think there are two ways of making it compatible. A way which will work only with card-mod, and another which should make plotly-graph sufficiently similar to a vanilla card that card-mod and any other similar mod will work.

The first way is to call some card-mod primitive yourself so that it can do its magic. See https://github.com/thomasloven/lovelace-card-mod/blob/master/README-developers.md where AFAICT el should be the <ha-card/>, type should be what you want it to be (probably plotly-graph but you can use card which is what card-mod uses when it can hook into the ha-card itself as in the complicated method), styles should be config?.card_mod?.style || config?.style || "" where config is the whole card configuration, variables should be { config }, the unused should be null, and the last one I think should be false.

See https://github.com/thomasloven/lovelace-card-mod/blob/master/src/patch/ha-card.ts#L25 which is what card-mod wants ha-card to do when it is patched. I do not know if and when you are supposed to use the returned object to call its refresh() method as the patched ha-card does.

The other way is to make plotly-card extend LitElement instead of HTMLElement, as apexcharts-card does here: https://github.com/RomRider/apexcharts-card/blob/master/src/apexcharts-card.ts#L116. Another much simpler example to get inspiration from is https://github.com/thomasloven/lovelace-card-mod/blob/master/src/mod-card.ts whose role is only to wrap elements without an inner <ha-card/> into one.

But maybe the only thing that makes a LitElement work as-is with card-mod and your HTMLElement-based card not is that you do not provide any update() method ? Maybe adding a dummy update() would magically make things work ? I'll have to try if you do not get to do it before me.

Note that I never programmed in TypeScript before so I am very slow and naive. Sorry for that.

Error Description
The card cannot render on older versions of the iPad, and returns error “Custom element doesn’t exist: plotly-graph”. The card works on both PC and Android, so the configuration is correct.

Setup
iPad Air (1st gen) running IOS 12.5.4.
Tested and failes on Chrome v 87.0.4280.77, Safari as well as in Home Assistant app v 2022.3.

UA Info Chrome:
Mozilla/5.0 (iPad; CPU OS 12_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/87.0.4280.77 Mobile/15E148 Safari/604.1
UA Info Safari:
Mozilla/5.0 (iPad; CPU OS 12_5_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.2 Mobile/15E148 Safari/604.1

Further info
There are no errors in the Home Assistant log.

The issue might be related to the following issue and seems to be resolved based on the comments:
AlexxIT/WebRTC#107

Is it possible to end the graph line with a marker and current value?

Like this:

Info here:
https://stackoverflow.com/questions/66190574/plotly-how-to-annotate-end-of-multiple-lines-with-text-and-marker-colors-that-m

I have a graph with both left and right axes. I want both to be fixed, but only the right one obeys the config

- type: custom:plotly-graph
            entities:
              - entity: sensor.pressure_stats_mean
                name: Pressure
                show_value: true
                right_margin: 40
                yaxis: y1
                line: 
                  shape: spline
              - entity: sensor.pressure_change
                show_value: true
                right_margin: 40
                yaxis: y2
                line: 
                  shape: spline
            title: Pressure
            hours_to_show: 24
            refresh_interval: 10
            layout:
              yaxis1:
                gridcolor: whitesmoke
                zeroline: false
                range:
                  - 900
                  - 1010
                fixedrange: true
              yaxis2:
                gridcolor: whitesmoke
                zeroline: true
                range:
                  - -5
                  - 5
                fixedrange: true
              xaxis:
                rangeselector:
                  "y": 1.2
                  buttons:
                    - count: 1
                      step: hour
                    - count: 12
                      step: hour
                    - count: 1
                      step: day
                    - count: 7
                      step: day
                    - count: 28
                      step: day
            view_layout:
              grid-area: footer7

I have a graph that has 4 digit numbers that are sometimes whole and sometimes have a decimal.
When hovering over the numbers, if it's a fraction, it will have a comma for the thousands separator, when it's a whole number, there is no separator:
5236
6,241.5
Verified the data in Home Assistant History, and it consistently adds the thousands comma separator.

Edit:
Since the code is dropping duplicate values, the graph is not able to handle sensors that rarely changes because it draws a straight line between the first two different values, which is not right.

I found that the cause should be to remove minimal_response here:

The reason is that:

With minimal response we do not care about attribute changes so we can filter out duplicate states

https://github.com/home-assistant/core/blob/9864090e0b414b0c610cd0c33c6a49f81940bb9d/homeassistant/components/recorder/history.py#L417-L421

As described here, there is currently no way to access nested attributes. However, this would be incredibly useful for weather forecast data.

Would be great to have heatmaps as type as well. E.g. x-axsis days, y-axis hours or timeframes or .... The would give a great visual overview for temperatures, percentages, liters, etc. etc.

https://plotly.com/javascript/heatmaps/

as wished in #85 :

Could the date be shown in the localized format?

Right now it is in english with your card, but I set it to the german way in my profile settings:

German in profile, english in the card:

Thx for your great work,

Sebastian

in src/plotly-graph-card.ts line 473.

Great job!
Thanks.

Patrick.

For some reason it says can't find custom plotly graph element anymore in the browser.
Not sure if it ever worked.

Discussed in #92

type: custom:plotly-graph
entities:
  - entity: sensor.helper_elektriciteit_aanvoer_net
    statistic: max
    period: day
hours_to_show: 144
refresh_interval: 30
title: Energy

I have different themes on every device so it would be great to be able to set line colors (and others?) to theme variables to make everything look natural.

More details on the forum post below. Using the format var(—background-color) is the proposed way to express it.

https://community.home-assistant.io/t/plotly-interactive-graph-card/347746/110

Thanks!

https://github.com/RomRider/apexcharts-card has a offset field that is used to "move" the x values of a series.
I already tried to use data transformation, but the problem is that values outside the graph are not available.

Why is it a problem? I have an entity that gives a forecast of a value 12h in the future. I therefore need to move the entity values 12h in the future because the current value refers to a future event. However, I can only "move" data that are already visible, which leaves a blank space. If I scroll left, the data is loaded, but it is of course inconvenient.

The transformation I used:

# this works only partially
    lambda: |-
      (ys, xs) => {
        const result = {x:[], y:[]}
        for (let i = 0; i < xs.length; i++) {
          const x = xs[i].setHours(xs[i].getHours()+12) # move the x-values (<--)
          const y = ys[i]
          if (x<((new Date).setHours((new Date).getHours()+2))){ # only show 2 hours in the furure (not relevant for this issue)
            result.y.push(y)
            result.x.push(x)
          }
        }
        return result;
      }

Using plotly-graph-card with horizontal-stack causes some weird behavior from the plotly-graph-card.
It just keeps resizing from some maximum to some minimum size, over and over again.
I found it a little difficult to describe the issue, so I've attached a video showing the problem.

I've had the same problem with multiple configurations, but this is the dashboard configuration I'm using in the example:

views:
  - title: Home
    cards:
      - type: horizontal-stack
        cards:
          - type: gauge
            entity: sensor.apc_br1200gi_load
            name: Load
            needle: true
            severity:
              green: 0
              yellow: 30
              red: 70
          - type: gauge
            entity: sensor.apc_br1200gi_battery_voltage
            max: 27
            min: 20
            needle: true
            name: Batt. Voltage
            severity:
              green: 24
              yellow: 23
              red: 0
          - type: gauge
            entity: sensor.apc_br1200gi_input_voltage
            min: 200
            max: 260
            needle: false
            unit: V
            name: AC In
          - type: gauge
            entity: sensor.apc_br1200gi_battery_runtime
      - type: horizontal-stack
        cards:
          - type: custom:plotly-graph
            entities:
              - entity: sensor.apc_br1200gi_load
            hours_to_show: 1
            refresh_interval: 30
            title: Load/Time
          - type: gauge
            entity: sensor.apc_br1200gi_battery_charge
            max: 100
            min: 0
            needle: true
            name: Batt. Charge
            severity:
              green: 75
              yellow: 25
              red: 0
          - type: custom:plotly-graph
            entities:
              - entity: sensor.apc_br1200gi_input_voltage
            hours_to_show: 24
            refresh_interval: 10
            title: AC In/Time
          - type: custom:plotly-graph
            entities:
              - entity: sensor.apc_br1200gi_battery_runtime
            hours_to_show: 1
            refresh_interval: 10
            title: Runtime/Time

Added as a new issue for tracking purposes and details updated where needed:

When specifying the discrete mapping steps in YAML, the period grouping is not shown any more.
In 'auto' mode, it shows up fine. It would be nice if it was there, to validate the correct behaviour.
If you don't want to put it there by default (e.g. for space savings on the graph), please make it at least 'includable' with an option.
Or in upcoming beta releases included it, till all has been verified to be correct. Then it can be removed if you want.

So right now I can't really tell if the discrete grouping is indeed working.
But already by looking at the graphs I'm expecting it doesn't ...

24hr time range, data point labels are per hour (should be 5minutes)

1 month time range, data points labels are still per hour (should be day):

1 year time frame, data points label per day but multiple data points shown for the SAME date, hence the zigzag. This still points to an hourly number of data points. So not a single mean period grouping by day has been used:

I tried 1.6.0-beta and after reverting to 1.5.3, same behaviour.

Zooming in/out doesn't change any period value, too.

My YAML:

type: custom:plotly-graph
entities:
  - entity: sensor.th_livingroom_temperature
    statistic: mean
    legendgroup: 1
    name: Livingroom
    yaxes: y1
    line:
      color: red
      shape: spline
  - entity: sensor.th_kitchen_temperature
    statistic: mean
    legendgroup: 2
    name: Kitchen
    yaxes: y1
    line:
      color: orange
      shape: spline
  - entity: sensor.th_garage_temperature
    statistic: mean
    legendgroup: 3
    name: Garage
    yaxes: y1
    line:
      color: green
      shape: spline
  - entity: sensor.buienradar_temperature
    statistic: mean
    legendgroup: 4
    visible: legendonly
    name: Outside
    yaxes: y2
    line:
      color: gray
      shape: spline
  - entity: sensor.th_office2_temperature
    statistic: mean
    legendgroup: 5
    name: Office
    yaxes: y1
    line:
      dash: dot
      shape: spline
  - entity: sensor.th_guest_temperature
    legendgroup: 6
    name: Guest
    yaxes: y1
    line:
      dash: dot
      shape: spline
      color: red
  - entity: sensor.th_master_br_temperature
    statistic: mean
    legendgroup: 7
    name: Master
    yaxes: y1
    line:
      dash: dot
      shape: spline
      color: orange
  - entity: sensor.th_alastair_temperature
    statistic: mean
    legendgroup: 8
    name: Alastair
    yaxes: y1
    line:
      dash: dot
      shape: spline
  - entity: sensor.th_bathroom_temperature
    statistic: mean
    legendgroup: 9
    name: Bathroom
    yaxes: y1
    line:
      dash: dot
      shape: spline
hours_to_show: 24
no_default_layout: true
layout:
  dragmode: pan
  margin:
    t: 30
    l: 50
    r: 30
    b: 50
  showlegend: true
  height: 1028
  legend:
    x: 0
    'y': 1
    bgcolor: rgba(0,0,0,.4)
    orientation: h
    itemsizing: fixed
    font:
      size: 10
  grid:
    rows: 3
    columns: 1
    roworder: top to bottom
  yaxis:
    title:
      text: Temperature
  yaxis2:
    title:
      text: Humidity
  yaxis3:
    title:
      text: Abs. Humidity
  plot_bgcolor: black
  y1:
    gridcolor: whitesmoke
    zeroline: false
    fixedrange: true
  xaxis:
    rangeselector:
      'y': 1.02
      buttons:
        - count: 3
          step: day
        - count: 7
          step: day
        - count: 14
          step: day
        - count: 1
          step: month
        - count: 3
          step: month
        - count: 12
          step: month
        - count: 36
          step: month
defaults:
  entity:
    line: null
    period:
      24h: 5minute
      3d: 5minute
      7d: hour
      14d: hour
      1m: day
      3m: day
      12m: day
      36m: day
  width: 1
title: Climate

If I drag in the past on iOS (companion app, iPad, iPhone), the graph is moved, but no older values are loaded/shown.

I am having some trouble getting my graph to look right. I am stacking 3 power monitoring sensors (phase 1,2,3) on one graph. The data from the sensors has a DateTime with ms precision. Because of this, the data do not all fall at the same time but instead get drawn at their own interval on the graph. I'm using the stackgroup function to put them all in a single stack and plot them on top of each other.
What seems to happen is that the system is looking at the precise time stamp instead and stacking only data that has the same time stamp to the millisecond. If the timestamps are different (even by millisconds) it inserts a 0%{customdata.unit_of_measurement} for the value of the other sensors. This results in add short spikes or gaps in the data.

Could I tell plotly if there is no specific data point for that time stamp to keep using the last datapoint from the same sensor? or can I re do the graph and align it by minute instead of second or millisecond?

would be nice to have

It would be great if we could change the autoscale behavior. For example one of the following (or all) would be nice:

1. Exclude certain entities from the automatically computed axis limits.
2. Specify either a hard coded lower or upper bound for an axis, but have the other bound automatically computed.
3. Specify a function for automatical computation of limits, for example:

range:
  - max(entities)
  - max( min(entities), 20 )

4. Potentially have 'range selector' buttons like we have for the x-axis, but then for various settings. For example button 1 could represent fixed range of 0 - 20, button 2 could be from 12-30, button 3 could be automatic computation, button 4 could be automatic computation with a certain entity excluded, etc.

I'd like to have the chart updated when the sensor value changes, like it is done with the history card. Is this possible?

If not: is it possible to have buttons to change the update interval, just like the range selector buttons?