Plotly interactive Graph Card

[OddyAte]

Sure, for this you need a custom HACS integration called CryptoTracker. The tutorial on how to set it up should pretty much get you going, my exact setup is this:

type: vertical-stack
title: Crypto Price Graphs
cards:
  - type: horizontal-stack
    cards:
      - entities:
          - sensor.bitcoin
        type: custom:mini-graph-card
        name: Bitcoin
        line_color: '#735119'
        line_width: 2
        hours_to_show: 168
        decimals: null
        points_per_hour: 1
        animate: true
        icon: mdi:currency-btc
        show:
          labels: false
        color_thresholds:
          - value: 40000
            color: '#008f39'
          - value: 38000
            color: '#ffff00'
          - value: 35000
            color: '#ff0000'
      - entities:
          - sensor.ethereum
        type: custom:mini-graph-card
        name: Ethereum
        line_color: '#735119'
        line_width: 2
        hours_to_show: 168
        decimals: null
        points_per_hour: 1
        animate: true
        icon: mdi:currency-eth
        show:
          labels: false
        color_thresholds:
          - value: 3000
            color: '#008f39'
          - value: 2500
            color: '#ffff00'
          - value: 2000
            color: '#ff0000'

This will get you these 2:

Now that I use Plotly interactive Graph Card my setup looks like this:

The main benefit (even though my first option looks a bit better) is that I can do all the nice things Plotly allows me (zoom, time period, etc.). Let me know if you need further help.

[Mosher]

Thank you so much.
Where do you get prices from?
I am thinking do the small button graphs as yours but on click open big detailed plotly graphs.

[OddyAte]

Not sure if tap_action knows how to do that, but let me know if you find a way to do this. Regarding where the price is updated from, that is done by the CryptoTracker integration, I do not know how it operates and where does it pull data from.

[mateine]

show_value: true

May be useful for your prices charts

[OddyAte]

What should happen when applying it? I do not see any change.

[mateine]

If you add that to an entity, it will show the value of the last data point.
See the screenshot here https://github.com/dbuezas/lovelace-plotly-graph-card/discussions/17

[OddyAte]

I have the following code for a card:

type: vertical-stack
title: Currency Exchange Graphs
cards:
  - entities:
      - sensor.yahoofinance_usdron_x
      - sensor.yahoofinance_eurron_x
      - sensor.yahoofinance_gbpron_x
    type: custom:plotly-graph
    hours_to_show: 168
    show_value: true
    layout: null
    xaxis:
      rangeselector:
        'y': 1.2
        buttons:
          - count: 7
            step: day
          - count: 1
            step: month
          - count: 3
            step: month
          - count: 1
            step: year

But this still does not change anything (tried it in a few different places). What am I doing wrong?

[Pulpyy]

Hi.
Thanks for this very useful card. I switched all my graphs and it does work nicely.
I only have one problem, It does not diplay values after dot

Is there something i didn’t found yet in config ?
Regards

[flemmingss]

A little usefull thing I found. If you want to change the transparency of the fill use fillcolor: rgba(215, 200, 0, 0.2) (the last value 0.2 is transparency .

type: custom:plotly-graph
entities:
  - entity: sensor.energy_consumption_total_hourly
    name: Forbruk
    unit_of_measurement: kWh
    fill: tozeroy
    line:
      color: green
    width: 3
  - entity: sensor.nordpool_kwh_krsand_nok_3_10_025
    name: Nordpool Pris
    unit_of_measurement: nok/kWh
    fill: tozeroy
    fillcolor: rgba(215, 200, 0, 0.2)
    line:
      color: red

[mateine]

Yes, you can add a right margin to show_value. Search for show_value in the readme of the repository (link in first post)

[mateine]

your indentation is off.
layout: null → WRONG
it should be:

layout: 
   xaxis:
     [...]

[OddyAte]

Thanks, I fixed that (this was only for 1 of my 6 charts). I did not see that the buttons were missing. But show_value: true still does nothing, anywhere I place it.

[mateine]

Hey @OddyAte,
Yes, you put it in the wrong place. I recommend you use the examples provided in the docs as a start point when you don’t get what you want.

show_value goes inside entities. You can alternatively define the default for entities to avoid repetition. Like this:

type: custom:plotly-graph
[....]
defaults:
  entity:
    show_value: true

By the way, make sure to use the reply button so the context is not lost

[flemmingss]

Is is possible to use template to change the entity value (I want to convert value to 1000 times more, W to kW):
This syntax might be wrong, but can it be done?

  - entity: { (states.sensor.zigbee_41_power.state | int ) * 1000 ) }
    name: KiloWatt
    unit_of_measurement: kW

[mateine]

Use a lambda instead:

- entity: sensor.xxxx
  lambda: ys => ys.map(y => y * 1000)

Checkout the readme for more

[Pulpyy]

Thank you !

[miljbee]

Hello,

I can’t plot attributes:

Am I missing something evident ?

Thanks for your help

[mateine]

No, you are not missing anything, you caught a bug!

It is fixed now on v1.1.5 so if you update this should be working. Thanks for reporting!

[jmdenis]

Hello,
Thanks a lot for the card, really useful.

do you have by any chance example with “if” condition with the lambda function to change the value of the Y?
Something like that ?
lambda: (ys) => ys.map(y => 1 if y = ‘heating’ else 0)

[mateine]

It’s fairly straightforward. The lambdas are pure javascript so you can google “how to do x in javascript”.

In your case:

(ys) => ys.map(y => (y == 'heating') ? 1 : 0)

If you want to do something more complex, you can use a more imperative approach:

(ys) => ys.map(y => {
   if (y == 'heating') return 1;
   else return 0;
})