Plotly interactive Graph Card

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:
Opera Snapshot_2022-02-02_131309_snkvpn.tech

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.

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.

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.

show_value: true

May be useful for your prices charts

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

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

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?

image_2022-02-04_212935

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

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

image

3 Likes

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

1 Like

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

layout: 
   xaxis:
     [...]

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.

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 :slight_smile:

1 Like

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

Use a lambda instead:

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

Checkout the readme for more :slight_smile:

Thank you !

Hello,

I can’t plot attributes:

Am I missing something evident ?

Thanks for your help :slight_smile:

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!

1 Like

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)

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;
})