Bootstrap 3 Skeleton

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

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 style="width:100%;">
      <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 style="width:100%;">
      <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 style="width:100%;">
      <canvas id="exerciseChart"></canvas>
    </div>  
  </div>
</div>

CSS

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

JavaScript

setupChart('standChart', 33);
setupChart('moveChart', 66);
setupChart('exerciseChart', 99);


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

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

  var options = {
    responsive: true,
    maintainAspectRatio: false,
    scaleShowVerticalLines: false,

    cutoutPercentage: 80,
    legend: {
      display: false
    },
    animation: {
      onComplete: function (event) {
      	console.log(this.chart.height);
        var xCenter = this.chart.width/2;
        var yCenter = this.chart.height/2;

        context.textAlign = 'center';
        context.textBaseline = 'middle';

        var progressLabel = data.datasets[0].data[0] + '%';
        context.font = '20px Helvetica';
        context.fillStyle = 'black';
        context.fillText(progressLabel, xCenter, yCenter);
      }
    }
  };

  Chart.defaults.global.tooltips.enabled = false;
  var chart = new Chart(context, {
    type: 'doughnut',
    data: data,
    options: options
  });
}