tabler-ui
Version:
Premium and Open Source dashboard template with responsive and high quality UI. For Free!
65 lines (64 loc) • 1.87 kB
HTML
<div class="card">
<div class="card-body">
<h3 class="card-title">Browsers traffic</h3>
<div>
<div id="chart-browsers" style="height: 15rem"></div>
</div>
</div>
<table class="table card-table">
<tbody>
<tr>
<td width="1"><i class="browser browser-chrome"></i></td>
<td>Google Chrome</td>
<td class="text-right"><span class="text-muted">23%</span></td>
</tr>
<tr>
<td><i class="browser browser-firefox"></i></td>
<td>Mozila Firefox</td>
<td class="text-right"><span class="text-muted">15%</span></td>
</tr>
<tr>
<td><i class="browser browser-safari"></i></td>
<td>Apple Safari</td>
<td class="text-right"><span class="text-muted">7%</span></td>
</tr>
<tr>
<td><i class="browser browser-opera"></i></td>
<td>Opera mini</td>
<td class="text-right"><span class="text-muted">23%</span></td>
</tr>
<tr>
<td><i class="browser browser-edge"></i></td>
<td>Microsoft edge</td>
<td class="text-right"><span class="text-muted">9%</span></td>
</tr>
</tbody>
</table>
</div>
<script>
require(['c3', 'jquery'], function (c3) {
var chart = c3.generate({
bindto: '#chart-browsers',
data: {
columns: [
['Chrome', 36],
['Firefox', 5],
['Safari', 9],
['Edge', 20],
['Opera', 30],
],
colors: {
Chrome: '{{ site.colors.green }}',
Firefox: '{{ site.colors.orange }}',
Safari: '{{ site.colors.blue }}',
Edge: '{{ site.colors.azure }}',
Opera: '{{ site.colors.red }}',
},
type: 'donut'
},
legend: {
show: false
}
});
});
</script>