Bootstrap 3 Skeleton

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

by ivanchaer

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.2/Chart.js"></script>
<div class="row">
        <div class="col-sm-9">
            <h2>Stand</h2>
            <h2>
    <small class="text-muted">The amount of time you've been standing</small>
    </h2>
        </div>
        <div class="col-sm-3">
            <div>
                <canvas id="standChart"></canvas>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-9">
            <h2>Move</h2>
            <h2>
    <small class="text-muted">Your movement progress</small>
    </h2>
        </div>
        <div class="col-sm-3">
            <div>
                <canvas id="moveChart"></canvas>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-9">
            <h2>Exercise</h2>
            <h2>
    <small class="text-muted">Your exercise progress</small>
    </h2>
        </div>
        <div class="col-sm-3">
            <div>
                <canvas id="exerciseChart"></canvas>
            </div>
        </div>
    </div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

JavaScript

Chart.defaults.DoughnutTextInside = Chart.helpers.clone(Chart.defaults.doughnut);
    Chart.controllers.DoughnutTextInside = Chart.controllers.doughnut.extend({
        draw: function(ease) {

            var ctx = this.chart.chart.ctx;
            var data = this.getDataset();

            var easingDecimal = ease || 1;
            Chart.helpers.each(this.getDataset().metaData, function(arc, index) {
                arc.transition(easingDecimal).draw();

                var vm = arc._view;
                var radius = (vm.outerRadius + vm.innerRadius) / 2;
                var thickness = (vm.outerRadius - vm.innerRadius) / 2;
                var angle = Math.PI - vm.endAngle - Math.PI / 2;

                ctx.save();
                ctx.fillStyle = vm.backgroundColor;

                ctx.font = "20px Verdana";
                ctx.textAlign = 'center';
                ctx.textBaseline = "middle";

                var text = data.data[0] + '%';
                ctx.fillStyle = '#000';
                ctx.fillText(text, $(ctx.canvas).width()/2, $(ctx.canvas).height()/2);
            });
            ctx.fillStyle = '#fff';
            ctx.fill();
            ctx.restore();

        }

    });


    function setupChart(chartId, progress) {
        var canvas = document.getElementById(chartId);
        var context = canvas.getContext('2d');
        var remaining = 100 - progress;

        var deliveredData = {
            labels: [
                "Value"
            ],
            datasets: [{
                data: [progress, remaining],
                backgroundColor: [
                    '#8FF400',
                    '#FFFFFF'
                ],
                borderColor: [
                    '#8FF400',
                    '#408A00'
                ],
                hoverBackgroundColor: [
                    '#8FF400',
                    '#FFFFFF'
                ]
            }]
        };

        var deliveredOpt = {
            cutoutPercentage: 88,

...