Step counter Graph

[fifthh]

Great card, i use it mainly for temperature sensors and such, however i added the Garmin integration together with a couple of sensors that i’m trying to make graphs for.
For example, how would i make a graph for the steps counter? What i’m looking to get out is total steps each day in a nice bar graph.

This is what i got so far but it´s acting kind of funny with panning and zooming.

type: custom:plotly-graph
entities:
  - entity: sensor.total_steps
    statistic: state
    period: auto
    type: bar
    texttemplate: '%{y}'
hours_to_show: 168
defaults:
  entity:
    line:
      width: 2
  yaxes:
    fixedrange: true
refresh_interval: 60
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: 10
      type: buttons
      x: 1
      xanchor: right
      'y': 1.3
      yanchor: top
    - buttons:
        - $fn({vars}) => vars.zoom( '1d', 24)
        - $fn({vars}) => vars.zoom( '1w', 24*7)
        - $fn({vars}) => vars.zoom( '1m', 24*30)
      direction: right
      active: -1
      pad:
        r: 10
        t: 10
      type: buttons
      x: 0
      xanchor: left
      'y': 1.3
      yanchor: top

I would like to use

period: day

but it gives me inaccurate values and doesn't play nice with panning/zooming either.

[dbuezas]

Hi 👋

What i’m looking to get out is total steps each day in a nice bar graph.

Look into filters, the delta with reset should do the trick. For the bar chart, I suggest you browse the discussions section for tips and tricks on bar charts, they are a bit particular.

it´s acting kind of funny with panning and zooming.

can you make a video?

[dbuezas]

Oh, I see. Then just make a filter map_y: y || 0

[fifthh]

map_y: y || 0

Doesn't seem to do anything, unless i'm placing it wrong?
Like this?

type: custom:plotly-graph
entities:
  - entity: sensor.total_steps
    statistic: state
    period: day
    type: bar
    texttemplate: '%{y}'
    filters:
      - filter: i>0
      - resample: 1d
      - map_y: y || 0

[dbuezas]

Uhm. That should actually work fine. I suggest you take a look at the debugging section in the readme. That way you will be able to see exactly what data comes in and how each filter transforms it.
Let me know if you succeed! :)

[fifthh]

Uhm. That should actually work fine. I suggest you take a look at the debugging section in the readme. That way you will be able to see exactly what data comes in and how each filter transforms it. Let me know if you succeed! :)

Will do, thanks for the help!

[dbuezas]

https://github.com/dbuezas/lovelace-plotly-graph-card#debugging