Lovelace: custom history graph

Bram_Kragten · October 3, 2018, 9:02pm

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:

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

cheynespc · October 6, 2018, 9:45am

YES PLEASE!

Great i wanted something like this

isnotatree · October 16, 2018, 10:06pm

Looks absolutely beautiful

molano · October 19, 2018, 9:14pm

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

molano · October 19, 2018, 9:25pm

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.

Nice card by the way! Thanks!!

molano · October 19, 2018, 9:32pm

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

Steve_Jaspers · October 26, 2018, 2:52pm

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 ?

Leafshore · October 31, 2018, 12:05pm

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.

MaximumSU · November 10, 2018, 8:08pm

Is it any documentation for

areaStyle: {}

?

Bram_Kragten · November 11, 2018, 12:46pm

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

MaximumSU · November 11, 2018, 1:07pm

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

Bram_Kragten · November 11, 2018, 3:50pm

You could add them here:

github.com

bramkragten/custom-ui/blob/master/graph-card/graph-card.js#L92


    };

    for (const entity of this.entities) {
        this.update_options.series.push({
            	smooth: entity.smooth || true,
                name: entity.name || '',
                type: entity.type || 'line',
                areaStyle: entity.areaStyle || null,
                color: entity.color || null,
                data: null
            });
    }

	this.getHistory();
}

getHistory(update) {
	var startTime;
	if (update) {
        startTime = this.lastEndTime;
	} else {

MaximumSU · November 11, 2018, 4:06pm

You could add them here:

Thanks!

rpr · November 17, 2018, 1:53am

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.

aniemiec · December 14, 2018, 10:29am

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

Steve_Jaspers · December 14, 2018, 12:14pm

any update on this ?

Bram_Kragten · December 20, 2018, 8:20am

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

sirfalo · December 31, 2018, 11:38am

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

flomo · January 24, 2019, 8:35pm

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?

nldroid · January 26, 2019, 10:13am

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?