anchor.diff:          }
       },
       size: {
  -    		width: 500,
  -        height: 250
  +    		width: 200,
  +        height: 200,
       }, 
       padding: {
  -    	bottom: 100
  -    }
  -});
  -
  -var chart2 = c3.generate({
  -    data: {
  -    		bindto: '#another',
  -        columns: [
  -            ['data', 60.4]
  +    	left: 0,
  +    	right: 0
  +    }
  +});
  +
  +var ccc_gauge = c3.generate({
  +		bindto: '#ccc_gauge',
  +    data: {
  +        columns: [
  +            ['data', 91.4]
           ],
           type: 'gauge',
  -
  -        onclick: function (d, i) { console.log("onclick", d, i); },
  -        onmouseover: function (d, i) { console.log("onmouseover", d, i); },
  -        onmouseout: function (d, i) { console.log("onmouseout", d, i); }
  -    },       
  +        onclick: function (d, i) { console.log("onclick", d, i); },
  +        onmouseover: function (d, i) { console.log("onmouseover", d, i); },
  +        onmouseout: function (d, i) { console.log("onmouseout", d, i); }
  +    },
       gauge: {
   //        label: {
   //            format: function(value, ratio) {
  
positive.code:         }
      },
      size: {
      		width: 500,
          height: 500
      }, 
      padding: {
      	bottom: 100
      }
  });
  
  </script>
  
negative.code: <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <style>
  /*#chart {
  	width: 200px;
  	height: 300px;
  }*/
  
  #chart text {
  	font-size: 12px;
  }
  
  
  #audatex {
  	background-color: red;
  }
  
  .panel-body .gauges {
  	display: flex;
  }
  
  .gauge {
  	display: flex;
  	margin: 0px;
  	width: 300px;
  }
  
  .c3-chart {
  	background-color: red;
  }
  
  </style>
  
  <div class="panel panel-default">
  	<div class="panel-heading">IP</div>
  	<div class="panel-body gauges">
  		<a href="#" class="btn btn-info">Time Response</a>
    	<a href="#" class="btn btn-info">Life Cycle</a>
  		<div id="audatex_gauge" class="gauge"></div>
  		<div id="ccc_gauge" class="gauge"></div>
  		<div id="mitchell_gauge" class="gauge"></div>
  	</div>
  </div>
  <br>
  <div class="panel panel-default">
  	<div class="panel-heading">IP</div>
  	<div class="panel-body">
  		<div id="audatex_donut"></div>
  		<div id="ccc_donut"></div>
  		<div id="mitchell_donut"></div>
  		
  	</div>
  </div>
  
  <script>
  
  $(document).ready(function(){
  	console.log("doing it");
  
  	var audatex_gauge = c3.generate({
  		bindto: '#audatex_gauge',
      data: {
          columns: [
              ['data', 91.4]
          ],
          type: 'gauge',
          onclick: function (d, i) { console.log("onclick", d, i); },
          onmouseover: function (d, i) { console.log("onmouseover", d, i); },
          onmouseout: function (d, i) { console.log("onmouseout", d, i); }
      },
      gauge: {
  //        label: {
  //            format: function(value, ratio) {
  