xxxxxxxxxx1
<span class="min-chart m-4" id="chart2" data-percent="26.3"> <!-- initial value eg. 26.3-->2
<span class="integer"></span>3
</span>4
5
<h5>6
<span class="badge green mx-3" id="badge1" style="display:inline-block; width:100px">7
RUNNING8
<i class="fas fa-sync"></i>9
</span>10
</h5>11
12
<div class="card text-white bg-success m-3" style="max-width: 20rem;">13
<div class="card-header">Header</div>14
<div class="card-body">15
<h5 class="card-title">Success Panel title</h5>16
<p class="card-text text-white">Some quick example text to build on the panel title and make up the bulk of the panel's content.</p>17
</div>18
</div>19
<div class="card text-white bg-danger m-3" style="max-width: 20rem;">20
<div class="card-header">Header</div>21
<div class="card-body">22
<h5 class="card-title">Danger Panel title</h5>23
<p class="card-text text-white">Some quick example text to build on the panel title and make up the bulk of the panel's content.</p>24
</div>25
</div>26
27
<div class="card bg-light m-3" id="myCard" style="background:none; display:inline-block; width:400px">28
<div class="card-header">29
<h5 class="elegant-color-text" id="headerText" style="background:none;">Header </h5>30
</div>31
<div class="card-body"> 32
<div class="card-title" id="subTitle" style="background:none;">Subtitle</div>33
</div>34
</div>35
36
<div class="panel panel-default" style="background:none; display:inline-block; width:200px" id="myPanel";>37
<div class="panel-heading">Panel heading</div>38
<div class="panel-body" id="needsBody" style="background:none;">39
Panel content40
</div>41
</div>42
43
44
<button type="button" id="btn1" class="btn btn-outline-red btn-rounded btn-sm px-2">45
SET<i class="fas fa-pencil-alt mt-0"></i>46
</button>47
xxxxxxxxxx1
.min-chart .integer {2
display: inline-block;3
line-height: 110px;4
z-index: 2; 5
} 6
.min-chart .integer:after {7
content: "°C"; /* chart2.unit */8
margin-left: 0.1em; 9
font-size: 1rem; 10
}11
12
.myCard {13
background: rgba(255, 255, 0, 0.3);14
}xxxxxxxxxx1
$(function () {2
$('.min-chart#chart2').easyPieChart({3
barColor: function (percent) {4
//return (percent < 40 ? '#00C851' : percent < 80 ? '#ffbb33' : '#ff4444'); 5
return (percent < 40 ? 'green' : percent < 80 ? 'gold' : 'red'); 6
},7
lineWidth: 5,8
range: 200,9
decimals: 1,10
unit: "°C",11
//size: 130, 12
onStep: function (from, to, value) {13
//$(this.el).find('.integer').text((value).toFixed(this.decimals));14
$(this.el).find('.integer').text((value).toFixed(1));15
}16
});17
});18
19
var newValue = 42.5;20
var newColor = "#00C851";21
var darkColor = "#007E33";22
var danger = "#CC0000";23
24
$('#btn1').click(function(e) {25
//alert(newValue);26
e.preventDefault();27
$('.min-chart#chart2').data('easyPieChart').update(newValue);28
29
$element = document.getElementById("headerText");30
$element.innerHTML = 'Header text & color CHANGED <i class="fas fa-exclamation-triangle"></i>' ;31
32
$element = document.getElementById("subTitle");33
$element.innerHTML = 'Subtitle text-bg color changed, but not the whole card' ;34
35
$element = document.getElementById("badge1");36
$element.innerHTML = 'STOPPED <i class="fas fa-exclamation-triangle"></i>' ;37
38
$("#myPanel").css("background", "#007E33"); // 'success-color-dark' 39
$("#needsBody").css("background", "#00C851"); // 'success-color'40
41
$("#myCard").css("background", danger);42
$('#headerText').css("color", danger); //.update(newColor);43
$('#subTitle').css("background", newColor); //.update(newColor);44
45
$('#badge1').css('background', danger);46
47
$element = document.getElementById("myCard");48
$element.class = "card text-white bg-success mb-3";49
$element.background = "bg-success";50
51
}); 52
Console errors: 0