xxxxxxxxxx1
<div class="container my-5 py-5">2
3
<hr class="mt-5">4
5
<p>Built with <a target="_blank" href="https://mdbootstrap.com/docs/standard/">Material Design for Bootstrap</a> - free and powerful Bootstrap UI KIT</p>6
7
<a class="btn btn-primary me-2" href="https://mdbootstrap.com/docs/standard/getting-started/installation/" target="_blank" role="button">Download MDB UI KIT <i class="fas fa-download ms-2"></i></a>8
<a class="btn btn-danger me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/" role="button">Learn more</a>9
<a class="btn btn-success me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/getting-started/" role="button">Tutorials</a>10
<a class="btn btn-dark me-2" target="_blank" href="https://github.com/mdbootstrap/mdb-ui-kit" role="button">GitHub <i class="fab fa-github ms-2"></i></a>11
12
<hr class="mb-5">13
14
15
<!--Section: Block Content-->16
<section>17
18
<div class="card">19
<div class="card-body">20
21
<h5 class="text-center font-weight-bold mb-4">Number of browser users</h5>22
23
<hr>24
25
<!--Grid row-->26
<div class="row">27
28
<!--Grid column-->29
<div class="col-md-7 mb-4">30
31
<canvas id="pieChart" class="mt-4"></canvas>32
33
</div>34
<!--Grid column-->35
36
<!--Grid column-->37
<div class="col-md-5 mb-4">38
39
<table class="table">40
<thead>41
<tr>42
<th scope="col">Browser</th>43
<th scope="col">Users</th>44
</tr>45
</thead>46
<tbody>47
<tr>48
<td>Chrome</td>49
<td id="cell-chrome"></td>50
</tr>51
<tr>52
<td>FireFox</td>53
<td id="cell-firefox"></td>54
</tr>55
<tr>56
<td>Opera</td>57
<td id="cell-opera"></td>58
</tr>59
<tr>60
<td>Safari</td>61
<td id="cell-safari"></td>62
</tr>63
<tr>64
<td>Edge</td>65
<td id="cell-edge"></td>66
</tr>67
</tbody>68
</table>69
70
</div>71
<!--Grid column-->72
73
</div>74
<!--Grid row-->75
76
</div>77
</div>78
79
80
</section>81
<!--Section: Block Content-->82
83
84
</div>xxxxxxxxxx1
body {2
background-color: #eee;3
}xxxxxxxxxx1
// Data2
const usersChrome = 243;3
const usersFirefox = 70;4
const usersOpera = 100;5
const usersSafari = 60;6
const usersEdge = 120;7
8
//pie9
var ctxP = document.getElementById("pieChart").getContext('2d');10
var myPieChart = new Chart(ctxP, {11
type: 'pie',12
data: {13
labels: ["Chrome", "FireFox", "Opera", "Safari", "Edge"],14
datasets: [{15
data: [usersChrome, usersFirefox, usersOpera, usersSafari, usersEdge],16
backgroundColor: ["#9c27b0", "#ad1457", "#0277bd", "#303f9f ", "#009688"],17
hoverBackgroundColor: ["#a34cb3", "#a85076", "#679bb9", "#6d74a1", "#28a89b"],18
borderWidth: 4,19
borderColor: '#eee'20
}]21
},22
options: {23
responsive: true,24
legend: {25
position: 'bottom',26
labels: {27
padding: 20,28
boxWidth: 1029
}30
},31
plugins: {32
datalabels: {33
formatter: (value, ctx) => {34
let sum = 0;35
let dataArr = ctx.chart.data.datasets[0].data;36
dataArr.map(data => {37
sum += data;38
});39
let percentage = (value * 100 / sum).toFixed(2) + "%";40
return percentage;41
},42
color: 'white',43
labels: {44
title: {45
font: {46
size: '10'47
}48
}49
}50
}51
},52
tooltips: {53
callbacks: {54
label: function (tooltipItem, data) {55
return data.labels[tooltipItem.index] + ' users ' + ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];56
}57
}58
}59
}60
});61
62
// Table63
document.getElementById("cell-chrome").innerHTML = usersChrome;64
document.getElementById("cell-firefox").innerHTML = usersFirefox;65
document.getElementById("cell-opera").innerHTML = usersOpera;66
document.getElementById("cell-safari").innerHTML = usersSafari;67
document.getElementById("cell-edge").innerHTML = usersEdge;68
Console errors: 0