xxxxxxxxxx
1
<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
RUNNING
8
<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 content
40
</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
xxxxxxxxxx
1
.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
}
xxxxxxxxxx
1
$(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