Doughnut Chart in chart.js

by beaver71

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">

  <div class="row">
    <div class="col-sm-3">
      1
    </div>
    <div class="col-sm-3">
      2
    </div>
    <div class="col-sm-2">
      3
    </div>
    <div class="col-sm-1">
      4
    </div>
    <div class="col-sm-1">
      5
    </div>
    <div class="col-sm-1">
      6
    </div>
    <div class="col-sm-1">
      7
    </div>
  </div>

  <div class="row">
    <div class="col-sm-3">
      Some content
    </div>
    <div class="col-sm-3">
      Some other content
    </div>

    <div class="col-sm-2">
      Third col
    </div>

    <div class="col-sm-1 chart-container">
      <canvas id="chart1" class="" width="100%" height="100%"></canvas>
    </div>
    <div class="col-sm-1 chart-container">
      <canvas id="chart2" width="200" height="200"></canvas>
    </div>
    <div class="col-sm-1 chart-container">
      <canvas id="chart3" width="200" height="200"></canvas>
    </div>
    <div class="col-sm-1 chart-container">
      <canvas id="chart4" width="200" height="200"></canvas>
    </div>
  </div>
</div>

CSS

html,
body {
  background: lightgrey;
  height: 100%;
  width: 100%;
}

canvas {
  background: white;
  width: 100%;
  height: 100%;
  display: block;
}

.chart-container {
  padding: 1px;
}

.row > div {
  background: #F0E68C;
  border: 1px solid red;
}

JavaScript

var myNewChart;
var data = [{
  value: 30,
  color: "#F7464A"
}, {
  value: 50,
  color: "#E2EAE9"
}, {
  value: 100,
  color: "#D4CCC5"
}, {
  value: 40,
  color: "#949FB1"
}, {
  value: 100,
  color: "#4D5360"
}];

var options = {
  animation: true,
  animationEasing: 'easeInOutQuart',
  animationSteps: 80
};

//Get the context of the canvas element we want to select
var ctx1 = document.getElementById("chart1")
  .getContext("2d");
var ctx2 = document.getElementById("chart2")
  .getContext("2d");
var ctx3 = document.getElementById("chart3")
  .getContext("2d");
var ctx4 = document.getElementById("chart4")
  .getContext("2d");

/*******************************************************/
myNewChart1 = new Chart(ctx1).Doughnut(data, options);
myNewChart2 = new Chart(ctx2).Doughnut(data, options);
myNewChart3 = new Chart(ctx3).Doughnut(data, options);
myNewChart4 = new Chart(ctx4).Doughnut(data, options);