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
Works fine for me in all browsers except Chrome Canary (probably beta then also).
Not sure what to blame.
1 Like
Great!
It’s unfortunate though, I’d like to use Chrome Canary as it got the new fancy dark mode 
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.
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!
Thas’ great! 
Now it is definetely better:
Need to tweak a little the second graph but we’re almost there
Any update on the extrema bit to match all the sensors?
Thanks!
Okay I noticed a few things.
Current situatio is with group true only on the graph in the middle:
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 
Thanks again and again and again
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).
1 Like
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.
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.
1 Like
Urka! It’s a browser cache fault!!!
Thanks a lot 
1 Like
@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
1 Like
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.
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
I am not 100% sure on how it exactly works, maybe the user still cache it but the system send a new tag for it when there is an updated version? That would make lot of sense and is actually how the caching layers do work
Any possible way to do the following?
- Adjust height of the card. I have a bunch of temperature sensors that I want to view, but I have to scroll a lot now. If I could shrink the height of the card, that would help.
- Have 2 labels on card. If I have 2 sensors (temp, humidity), and want to see the current value with the big bold number on the card, I’d like to have temperature readout on the left side of the card, and maybe humidity on the right side. Currently, we can have multiple sensors per card, but only one big number shows.
1 Like
Hi, you can use:
height to adjust the height, default is 150
For the second bit you add on each identity that you want to see the value on the top:
show_state: true
Technically, is always true for the first identity, so you can add it on the second (the second will be showen on the right side)
Example:
Let me know
1 Like
Thanks! That definitely helps. Any suggestions on the graph? Individually, the graphs look good when the sensors change, but once put together since the numbers (temp/humidity) are vastly different, they are pretty much flat. Is there a specific way I should be configuring the axis to display it better? or is it just the downfall with the 2 sensors im putting into each box?
Also, the moment I add the height info to all of the cards, I now get a vertical scroll bar immediately to the right of my vertical stack that has all of the cards in it.