Lovelace: mini graph card


#267

NEW RELEASE v0.3.0

Adding bar charts and fixes some issues.

Check out the documentation over at Github for updated options and examples.

hyperion_8123_lovelace_4%20(22)

Changelog

  • New: Support for bar charts (#49)

  • New: Parameter bar added to show -> graph, display graph as a bar chart (#49)

  • New: Option unit added to entity object, overrides unit set in base

  • Change: graph option now defaults to line (#49)

  • Change: Font size of additional displayed state to the same as the main state (when a single additional state is displayed).

  • Fixed: Color thresholds not being applied correctly with several cards in the same view (#52, #54)

  • Fixed: height option can now be set to zero

  • Fixed: Timestamps are now properly center aligned if state is center aligned


#268

Current result:
image

It does look much better, but there is a lot of “empty” space caused by having 3 graph in sequence

Is there anything that can be improved in your opinion?

Cheers
Andrea


#269

I’m experiencing a strange “bug” may be on my end since I haven’t seen it mentioned in the thread yet.

When I first visit the view with the graph it renders correctly, however when I go to a different view and then return, it doesn’t render correctly (see images). Tried clearing cache and different browsers, any other thoughts?

Before:

After:

HA: 87.1
Mini Graph Card: 0.3.0
Code:

  - type: custom:mini-graph-card
    entities:
     - entity: sensor.living_room_thermostat_temperature
    name: Temperature
    show:
      labels: true
      fill: fade
      points: false
    color_thresholds:
      - value: 50
        color: "#5998ff"
      - value: 60
        color: "#ffaf38"
      - value: 70
        color: "#ff5937"
    line_width: 3
    hours_to_show: 48
    animate: true

#270

You wouldn’t happen to be on Chrome Canary? I have the issue there (v74.0.3710.0), seems to be something wonky with static styles and seems to affect all LitElement elements utilising static styles, including core ones.


#271

Not sure if you’ve done it already, but you could try the group option, to maybe get rid of some of the paddings, on the legend card for example.


#272

Thanks for the suggestion @kalkih

I’m on Chrome Beta 73.0.3683.39, Canary does do the same.

Let me get on none beta and do a test


#273

Works fine for me in all browsers except Chrome Canary (probably beta then also).
Not sure what to blame.


#274

Yup, that was exactly the issue, beta train bit me.

Thanks again @kalkih!


#275

Great!
It’s unfortunate though, I’d like to use Chrome Canary as it got the new fancy dark mode :sunglasses:


#276

Is there a way to diplay the new threshold color on mobile browser?
Stock android chrome and iOS safari display it as monochrome. Also any plans to bring back the colors above and below option? Was extremely convenient as with a quick glance at the legend color you could tell that everything is in order or not.


#277

Hej Karl!

This card is great. I have a question however - would it be possible to populate it with other data than a sensor? I understand the code would need to be tweaked for this, but unsure where to start looking.

I have been wanting to create a lovelace card which shows the electricity price for the next 48 hours, using the Tibber API.

I am currently doing a hack where I have a html in my www folder which I view using an iframe-card. it works well on my wall tablet, but it’s not very elegant elsewhere, and it seems like it affect load time on older devices.


(A second dark line appears once the price for the upcoming day is avaiable).

Below is the html shown in the ifram card.

<script src="jquery-3.3.1.js"></script>
<script src="Chart.bundle.js"></script>

<canvas id="canvas" width="350" height="180"></canvas>
<script>

    var labels;
    var data;

    $.ajax({
    url: "https://api.tibber.com/v1-beta/gql",
    beforeSend: function(xhr) {
      xhr.setRequestHeader("Authorization", "Bearer d1007ead2dc84a2b82f0de19451c5fb22112f7ae11d19bf2bedb224a003ff74a");
    },
    type: 'POST',
    dataType: 'json',
    contentType: 'application/json',
    processData: false,
    data: '{ "query": "{viewer {homes {currentSubscription {priceInfo {today {total} tomorrow {total}}}}}}"}',
    success: function (data) {
      doWork(data);
    },
    error: function(){
    alert("Cannot get data");
    }
  });

  function doWork(data)
  {
      var idag  = data.data.viewer.homes[0].currentSubscription.priceInfo.today;
      var imorgon  = data.data.viewer.homes[0].currentSubscription.priceInfo.tomorrow;

      dataIdag = idag.map(function(e) {
         return e.total;
      });

      dataImorgon = imorgon.map(function(e) {
         return e.total;
      });

      var ctx = canvas.getContext('2d');

      var gradientStroke = ctx.createLinearGradient(0, 50, 0, 130);

      gradientStroke.addColorStop(1, "rgba(0,255,0,0.5)");
      gradientStroke.addColorStop(0.5, "rgba(255,255,0,0.5)")
      gradientStroke.addColorStop(0, "rgba(255,0,0,0.5)");

      var pointStroke = ctx.createLinearGradient(0, 50, 0, 200);

      pointStroke.addColorStop(1, "rgba(0,255,0,0.1)");
      pointStroke.addColorStop(0.5, "rgba(255,255,0,0.1)")
      pointStroke.addColorStop(0, "rgba(255,0,0,0.1)");

      var config = {
         type: 'line',
         options: {
          responsive: false,
          legend: {
            display: false
          },
          animation: {
        duration: 0
    },
          tooltips: {
      callbacks: {
         label: function(tooltipItem) {
                return tooltipItem.yLabel;
         }
      },
      displayColors: false,
       mode: 'nearest'
  },
          maintainAspectRatio: false,
             scales: {
                 yAxes: [{
                     ticks: {
                         beginAtZero:true,
               min: 0.4,
               max: 1.1,
               stepSize: 0.1,
                     }
                 }]
             }},
         data: {
            labels: [00,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23],
            datasets: [
      {
         label: 'Imorgon',
         data: dataImorgon,
         backgroundColor: gradientStroke,
         borderColor: "rgba(200,100,200,0.4)",
         pointRadius: 0.1,
         pointHoverRadius: 0,
         fill: false
       },
       {
          label: 'Idag',
          data: dataIdag,
          backgroundColor: gradientStroke,
          pointBackgroundColor: pointStroke,
          borderColor: gradientStroke,
          fill: true,
          pointRadius: 10,
          pointHoverRadius: 15,
 }],
         }
};
if (config &&
  config.data &&
  config.data.datasets) {
  // Loop through all the datasets
    for (var j = 1; j< dataIdag.length; j++){
      var thecolor;
    if (dataIdag[j-1] > 0.7)
     thecolor = "rgb(255,0,0)"
     else {
       thecolor = "rgb(0,255,0)"
     }
  }
}
      var chart = new Chart(ctx, config);
  }
</script>

So essentially it’s a JSON query to the API using a Bearer token (I pasted one of their demo tokens above so hide my own). What are my options for getting this data into a card like your own?

Thanks a lot!


Plot data in frontend
#278

Thas’ great! :slight_smile:

Now it is definetely better:

Need to tweak a little the second graph but we’re almost there :slight_smile:
Any update on the extrema bit to match all the sensors?

Thanks!


#279

Okay I noticed a few things.
Current situatio is with group true only on the graph in the middle:
image

As you can see the middle graph doesn’t have the border on the side because of that, so my question would be, is possible to sete margins manually in this scenario?

I also tried with group: true on all of them, but to be honest I don’t like the result at all :smiley:
image

Thanks again and again and again :slight_smile:


#280

Yes, works on both latest Safari (iOS) and Chrome (Android).
Is it possible that you’re still loading an older version from cache? Make sure you’ve updated the ?v=x.x.x at the end of the resource reference to avoid loading the old version from cache.

You can achieve the same result with color_thresholds.

Thanks.
With some modifications to the source it should definitely be possible.
I think the easiest way would be if you can manipulate the data you get from the api to look similar to home assistants history data. You should then only have to change how the data points in the graph are calculated based on time (future instead of past).

No, not yet.

Yes, using card-modder.

I would suggest setting group: true to all cards and put them in another card, as you have and only set the padding of that card (or use entities card, since that already has paddings).


#281

I get an error when trying to have multiple Aqara temperature sensor (via zigbee2mqtt) on the same graph, in HA 0.87.1, running in Hass.io enviroment and using Lovelace via GUI (not yaml). Not related to Aqara sensors, it fails with every multiple sensor entities. Single graph works perfectly.


#282

You’re running an old version of the card, where multiple entities wasn’t supported.
Either you haven’t updated the card or you need to clear cache by bumping the version number at the end of the resource reference ?v=x.x.x, or clear normally in each browser.


#283

Urka! It’s a browser cache fault!!!
Thanks a lot :wink:


#284

@kalkih Not sure you’re aware but the custom_updater has been updated and doesn’t require the ?v= any longer (if you use it of couorse).

It is actually using a new path /customcards/ (instead of /local/) where there should not be caching.

Hope it helps

Andrea


#285

That’s pretty awesome, will definitely help avoid a lot of issues people are having with caching of older versions.

I still think having cards cached is pretty good though, as it reduces loading times, especially on mobile connections.


#286

Ok, fair enough. It’s a nice component.

Next thing is figuring out how i can get the moving aveage day based so i can see how much water i used per day :slight_smile: