Plotly interactive Graph Card

That’s expected behavior, Home assistant only keeps a couple of days to ensure the db doesn’t grow too much you can change Recorder - Home Assistant

But for long term data look into “statistics”, these are kept forever but data is stored less frequently

Ohhh, I see. Thanks for the info.

Hi is there any way to putt the custom buttons above the chart instead of in the chart itself?
And is there any way to hide 0-values on the y-axis?

Code
type: custom:plotly-graph
entities:
  - entity: sensor.actuele_opbrengst_zonnepanelen_kw
    name: Zonnepanelen
    statistic: mean
    period: auto
    line:
      shape: spline
      width: 1.5
      color: rgba(255,152,0,255)
    fill: tozeroy
    fillcolor: rgba(255,152,0,0.2)
  - entity: sensor.power_consumption
    name: Afname
    statistic: mean
    period: auto
    line:
      shape: spline
      width: 1.5
      color: rgba(72,143,194,255)
    fill: tozeroy
    fillcolor: rgba(72,143,194,0.2)
  - entity: sensor.power_production
    name: Injectie
    filters:
      - map_y: '-y'
    statistic: mean
    period: auto
    line:
      shape: spline
      width: 1.5
      color: rgba(131,83,209,255)
    fill: tozeroy
    fillcolor: rgba(131,83,209,0.2)
hours_to_show: 24
config:
  scrollZoom: false
  disable_pinch_to_zoom: true
  hours_to_show: 1h
fn: |
  $fn({getFromConfig, vars})=> {
    const range = getFromConfig("visible_range");
    const width = range[1] - range[0];
    vars.scroll = (label, p) => ({
      args: [
        {
          layout: {
            "xaxis.range": [range[0] + width*p, range[1] + width*p],
          }
        }, {
          transition: {
            duration: 150,
          }
        }
      ],
      label,
      method: "animate",
    })
    vars.zoom = (label, h) => ({
      args: [
        {
          layout: {
            "xaxis.range": [Date.now()-1000*60*60*h, Date.now()],
          }
        }
      ],
      label,
      method: "animate",
    })
  }
layout:
  updatemenus:
    - buttons:
        - $fn({vars}) => vars.scroll( '<', -.5)
        - $fn({vars}) => vars.scroll( '>', .5)
      direction: right
      active: -1
      pad:
        r: 10
        t: -20
      type: buttons
      x: 1
      xanchor: right
      'y': 1
      yanchor: top
    - buttons:
        - $fn({vars}) => vars.zoom( '1y', 24*365)
        - $fn({vars}) => vars.zoom( '1m', 24*30)
        - $fn({vars}) => vars.zoom( '1w', 24*7)
        - $fn({vars}) => vars.zoom( '1d', 24)
        - $fn({vars}) => vars.zoom( '12h', 12)
        - $fn({vars}) => vars.zoom( '1h', 1)
      direction: right
      active: -1
      pad:
        r: 10
        t: -20
      type: buttons
      x: 0
      xanchor: left
      'y': 1
      yanchor: top
refresh_interval: 10
title: Verbruik huis

To position buttons, change the x and or y values inside the buttons field.
To hide the zero values, use the map filter:

filters:
   - map_y: "y==0?null:y"
2 Likes

Hi mateine,

could you share our configuration code for the scatter plot with the two histograms? Or do you alrady have and i can not find it?

Cheers, Philipp

I’m not sure I posted it before I did now in Scatter with double histogram · dbuezas/lovelace-plotly-graph-card · Discussion #342 · GitHub

1 Like

Hallo, i am new in Plotly, can you show me a example yaml for the chart in 3d before the with the humidity temp an presure value. I find it is very cool but i found no information the document

Welcome to your new plotting hobby then :slight_smile:

You probably missed the discussions section of the repo. There’s a lot more examples there.

Here’s the 3d scatter plot: 3D-scatter graph · dbuezas/lovelace-plotly-graph-card · Discussion #298 · GitHub

Thanks a lot mateine, it is mega cool for data from my weatherstation. Can you show me the code of the rippon 3d line chart and any idea how can i my heatmap in 3d chart. Plotly is the best chart engine ever see

Es ist schon ziemlich cool :wink:

Ive never tried the 3d ribbon, that’s a tricky one because you need to make multiple surface traces. See here:

Oha Deutsch? sehr schön. My english is not so good but your anwsers are very good and useful. I taste the RibbonPlots in HA nexttime thanks @mateine

Thanks, your English is fine :+1:. Only a German would use the metric system for superlatives (Mega cool) I love it :grin:

1 Like

See here. And with type surface for 3d with the same code.

I think seba means something like this:

which are multiple surface plots

This might very well be one of those requests that solve exactly 1 person’s need. If so, I totally understand telling me ‘You’re welcome: Now live with the problem.’ :grinning:

I have a bunch of data sources that I plot together.

But, I need an at-a-glance way to see them with periods of 5minute as well as with periods of (1) hour.

I’ve created duplicate cards on a single lovelace, but if there was single card with a button to toggle between (or select) periods (just like the rangeselector buttons), that would be great.

Of course, user-definable periods (other than being limited to: 5minutes, hour, day, week, month), would also be great – but that’s a different question.

Thank you so much for your fantastic work, and your outstanding ongoing support!

Here’s what I have now:

Hey @josephny , thanks for the kind words :slight_smile:

Indeed my objective with this was to maximize the individual “one-person needs” by making it as customizable as I can manage. Often that person is myself, but not always.
If you want different granularity depending on how much zoom you have, loon into period: auto. You can also customize how much zoom corresponds to which period. If you add range buttons, the periods will also update.

Alternatively you can look into legend groups and put all series of each period inside its own group.

There may be other ways too!

Oh, here’s another one. Download a templating custom card, create a helper boolean/toggle/switch, and make the templating card render different things depending on the boolean

Wow!

The legend groups sound very powerful.

I’m having a hard time figuring out how to use them.

I was able to add: “legendgroup: 1” to the code, but I don’t see how to set ‘global’ settings for all entities in a specific legendgroup, or how to select only a specific legendgroup to display.

type: custom:plotly-graph
title: 255 Real Time
defaults:
  entity:
    show_value: true
entities:
  - entity: sensor.255_panel_2_123_123_1min
    name: 255 Total group 1 by 5minute                     '
    yaxis: y1
    line:
      color: red
    period: 5minute
    legendgoup: 1
  - entity: sensor.255_panel_2_123_123_1min
    name: 255 Total group 2 by hour
    yaxis: y1
    line:
      color: blue
    period: hour
    legendgoup: 2
layout:
  height: 600
  xaxis:
    rangeselector:
      'y': 1.2
      buttons:
        - count: 1
          step: hour
        - count: 24
          step: hour
        - count: 3
          step: day
  yaxis:
    fixedrange: true
    range:
      - 1
      - 8000
  yaxis2:
    fixedrange: true
    range:
      - 10
      - 80
refresh_interval: 60
hours_to_show: 1

Oh, you’ll have to duplicate all entities.

The legend groups just put all traces with the same group inside a single legend. That way you can toggle them all at once. Not exactly what you asked for, but it may get the job done.