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!
