<style>
.cht-pie{
    width: 75%;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 60px;
    background: #f3f3f3;
    padding: 30px 30px;
    box-shadow: -1px 20px 7px -18px #717171;
}
</style>
<aside class="right-side">
  <!-- Main content -->
  <section class="content">
    <div class="row">
      <div class="col-xs-12"> 
        <!-- /.box -->
        <div class="box box-primary">
          <div class="box-body table-responsive">
			<?php 
                foreach($results as $k => $r ) : 
                    $chartData[$item] = $r['now_avail_qty']; 
                endforeach;
				$calArray	= $chartData;
				arsort($calArray);
				if($calArray){
					$i = 0;
					foreach($calArray as $greater){
					  if($i == 1)
						continue;
						
					  if($i == 0){
						  $num 		= (int)((int)$greater/6);
						  $round 	= (strlen($num)-1)*-1;
						  $stepSize =  round($num,$round); // prints 200
					  }
					  $i++;
					}
				}else{
					$num 		= 20;
					$round 		= (strlen($num)-1)*-1;
					$stepSize 	=  round($num,$round);
				}
            ?>
            <table border="0" width="100%" cellpadding="5">
                <tbody>
                    <tr height="10" class="auto-adj"></tr>                       
                </tbody>
            </table>
            <div class="cht-pie">
                <canvas id="chart-area"></canvas>
            </div> 
          </div>
          <!-- /.box-body --> 
        </div>
        <!-- /.box --> 
      </div>
    </div>
  </section>
  <!-- /.content --> 
</aside>
<!-- /.right-side -->
<!-- ./wrapper --> 
<?php 
//echo "<pre>"; print_r($chartData); echo "</pre>"; exit;  
$label 		= '';
$dataval 	= '';

if($chartData){
	foreach($chartData as $key => $amount){
		if(empty($label)){
			$label = "'".$key."'";
		}else{
			$label .= ",'".$key."'";
		}
		
		if(empty($dataval)){
			$dataval = "'".number_format($amount,2,".","")."'";
		}else{
			$dataval .= ",'".number_format($amount,2,".","")."'";
		}
	}		
}
?>
<script src="<?php echo base_url().'assets/js/Chart.min.js'?>"></script>
<script type="text/javascript">
window.onload = function() {
var ctx = document.getElementById("chart-area").getContext('2d');
     Chart.defaults.global.defaultFontColor = "#ff0000";
     Chart.defaults.global.defaultFontSize = "14";
     Chart.defaults.global.defaultFontStyle = "bolder";
debugger;

var data= {
    labels: [<?php echo $label; ?>],
    datasets: [{
      backgroundColor: [
        "#ff4700",
        "#FFA07A",
        "#bc00bf",
        "#FA8072",
        "#E9967A",
        "#E74C3C",
        "#34495E",
        "#bf8400",
        "#148F77",
        "#dd0000",
        "#0093f4",
		"#B22222",
		'#FFD700',
		'#FFEFD5',
		'#FFE4B5',
		'#7CFC00',
		'#00FF7F',
		'#98FB98',
		'#808000',
		'#00FFFF',
		'#008B8B'       
      ],
      //label: '',
      data: [<?php echo $dataval; ?>]
     
    }]
    
  }
var myChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
      "hover": {
                    "animationDuration": 0
                },
                "animation": {
                  "duration": 1,
                    
                  "onComplete": function() {
                      
                    var chartInstance = this.chart,
                      ctx = chartInstance.ctx;
                    ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontColor, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily, Chart.defaults.global.defaultFontWeight);
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'bottom';

                    this.data.datasets.forEach(function(dataset, i) {
                      var meta = chartInstance.controller.getDatasetMeta(i);
                      meta.data.forEach(function(bar, index) {
                        var data = "S$"+dataset.data[index];
                        ctx.fillText(data, bar._model.x, bar._model.y - 3);
                      });
                    });
                  }
                },
        tooltips: {
              "enabled": false
            },
          responsive: true,
         
          legend: false,
       fontColor: 'black',
         
		   scales: {
                  yAxes: [{
                    display: true,
                    gridLines: {
                      display: false
                    },
                    ticks: {
                      //max: Math.max(...data.datasets[0].data) + 50,
					  stepSize: <?php echo $stepSize; ?>,
                      display: true,
                      beginAtZero: true
                    }
                  }],
                  xAxes: [{
                    gridLines: {
                      display: true
                    },
                    ticks: {
                      beginAtZero: true
                    }
                  }]
               
                }
        }
});
};
</script>