Lovelace: custom history graph


#1

I created a custom history graph card today that allows you to zoom on your data, does live updating and is more customizable.

Will need some further tweaking, especially with some caching.

Compared to the default:


and zoomed in:
image

shown config:

      - type: "custom:graph-card"
        hours_to_show: 24
        update_interval: 10
        zoom: 75
        entities:
          - entity: sensor.elektra_verbruik_vandaag
            color: "#ffce57"
            areaStyle: {}
            smooth: true
            name: Totaal
          - entity: sensor.elektra_dal_verbruik_vandaag
            name: Dal
            color: "#36A2EB"
            smooth: true
            areaStyle: {}
          - entity: sensor.elektra_piek_verbruik_vandaag
            name: Piek
            color: "#FF6384"
            smooth: true
            areaStyle: {}

basic config:

      - type: "custom:graph-card"
        entities:
          - sensor.elektra_verbruik_vandaag
          - sensor.elektra_dal_verbruik_vandaag
          - sensor.elektra_piek_verbruik_vandaag

advanced config:

      - type: "custom:graph-card"
        title: 'Stroom verbruik'
        hours_to_show: 24
        update_interval: 10
        zoom: 75
        entities:
          - entity: sensor.elektra_dal_verbruik_vandaag
            name: Dal
            smooth: false
            color: "blue"
            areaStyle:
              color:
                type: 'linear'
                x: 0
                y: 0
                x2: 0
                y2: 1
                colorStops: 
                  - offset: 0
                    color: 'red'
                  - offset: 1
                    color: 'blue' 
                globalCoord: false
          - entity: sensor.elektra_piek_verbruik_vandaag
            name: Piek
            smooth: true
            color: "red"
            areaStyle:
              color:
                type: 'radial'
                x: 0.5
                y: 0.5
                r: 0.5
                colorStops: 
                  - offset: 0
                    color: 'blue'
                  - offset: 1
                    color: 'red'
                globalCoord: false
          - entity: sensor.elektra_verbruik_vandaag
            areaStyle: {}
            name: Totaal
          - sensor.elektra_verbruik_vandaag

Installation:

Download graph-card.js and echarts.min.js and place them in /config/www/custom-lovelace/graph-card/ (or another folder but you will need to adjust the path to echarts.min.js in graph-card.js)

Include graph-card.js in your lovelace config:

resources:
  - url: /local/custom-lovelace/graph-card/graph-card.js?v=0.1
    type: js

#2

YES PLEASE!

Great i wanted something like this


#3

Looks absolutely beautiful


#4

Don’t know why, but can’t get this to work… Just gives me a blank card… :frowning:


#5

Found it. You hard reference to
getScript("/local/custom-lovelace/graph-card/echarts.min.js", function(){
in the graph-card.js

In your first post you mention that you can change the install dir, which I did. So that’s why it failed in my case.

I changed to my own custom location and now it works, but at the next update (I use your update json also), it will fail again…
I hope you can fix that. :wink:

Nice card by the way! Thanks!!


#6

Looks cool now! Any chance you can add the labels and the title?


#7

installed everything and it’s showing, but for some reason the main area doesn’t show anything…
I’ve placed it in the folder you suggested and copied the config you suggested (only changed the entity)
Any idea what could be wrong ?


#8

Same thing here, changed path though. Card show up and working fine in android mobile!!! but not on computer with chrome or edge. No graph in main windows but I do see the small graph below.


#9

Is it any documentation for

areaStyle: {}

?


#10

https://ecomfe.github.io/echarts-doc/public/en/option.html#series-line.areaStyle


#11

Thanks, i already find but was not sure :slight_smile: One more question - is it possible to use another settings from that page to the chart? If yes - how?


#12

You could add them here:


#13

You could add them here:

Thanks!


#14

Same here, on my laptop in Chrome it doesn’t work (large graph is there but no data is shown), on my phone in Chrome it does. It’s a shame, it looks really cool.


#15

Same here, no data on Firefox or Chrome on Ubuntu. Android works fine.


#16

any update on this ?


#17

Do you see any errors in the console? Can you check if the network request is successful?


#18

Hi

How to make “legend” visible?
And how to name graph?

P.S.
It looks very nice! Just a bit slow, but… something for something :slight_smile:


#19

I really like the look of the graph! The customization is easy too, but I would like to turn of the data points, is it possible?


#20

I’m trying to add this card in ‘Edit UI mode’ but i get an error when adding a name.

My question is: will this work in UI mode? Or will it ony work when in YAML mode?