<?php
	$chart_0 = array();
	$chart_0[] = array('caption'=>'PT. Bersama Zatta Jaya','value'=>6600000000,'color'=>'#6610f2');
	$chart_0[] = array('caption'=>'PT. Bersama Zatta Mulya','value'=>5700000000,'color'=>'#1E9FF2');
	$chart_0[] = array('caption'=>'PT. Bersama Dauky Mulya','value'=>5600000000,'color'=>'#FF4961');
	$chart_0[] = array('caption'=>'PT. Bersama Adi Prakarsa','value'=>1600000000,'color'=>'#28D094');
	
	$chart_1 = array();
	$chart_1[] = array('caption'=>'BCA','value'=>5000000000,'color'=>'#1E9FF2');
	$chart_1[] = array('caption'=>'BRI','value'=>750000000,'color'=>'#6610f2');
	$chart_1[] = array('caption'=>'CIMB NIAGA','value'=>250000000,'color'=>'#FF9149');
	$chart_1[] = array('caption'=>'OCBC NISP','value'=>600000000,'color'=>'#FF4961');
	
	$chart_2 = array();
	$chart_2[] = array('caption'=>'BCA','value'=>2500000000,'color'=>'#1E9FF2');
	$chart_2[] = array('caption'=>'BNI','value'=>200000000,'color'=>'#28D094');
	$chart_2[] = array('caption'=>'BRI','value'=>3000000000,'color'=>'#6610f2');

	$chart_3 = array();
	$chart_3[] = array('caption'=>'BCA','value'=>1000000000,'color'=>'#1E9FF2');
	$chart_3[] = array('caption'=>'BNI','value'=>100000000,'color'=>'#28D094');
	$chart_3[] = array('caption'=>'BRI','value'=>4500000000,'color'=>'#6610f2');

	$chart_4 = array();
	$chart_4[] = array('caption'=>'BCA','value'=>1000000000,'color'=>'#1E9FF2');
	$chart_4[] = array('caption'=>'OCBC NISP','value'=>600000000,'color'=>'#FF4961');
?>
<div class="wrapper wrapper-content animated fadeInRight">
	<div class="row">
	<div class="col-lg-12">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>ALL BANK</h5>
				</div>
				<div class="ibox-content">
					<div class="row">
						<div class="col-lg-6">
							<canvas id="chart_0" height="200"></canvas>
						</div>
						<div class="col-lg-6">
							<div class="table-responsive">
								<table class="table mb-0" style="font-size : 15px">
									<thead class="bg-yellow bg-lighten-4">
									  <tr>
										<th class=""></th>
										<th class="">Bank name</th>
										<th style="text-align: right;">Balance</th>
									  </tr>
									</thead>
									<tbody>
									<?php 
									$total = 0;
									foreach($chart_0 as $key=>$row){
									$total = $total+$row['value'];	
										?>
									  <tr>
										<td><span class="label" style="background-color: <?=$row['color']?>;">&nbsp;</span></td>
										<td class=""><?=$row['caption']?></td>
										<td style="text-align: right;"><?=number_format($row['value'])?></td>
									  </tr>
									<?php }?>
									</tbody>
									<tfoot class="bg-yellow bg-lighten-4">
									  <tr>
										<th colspan="2">Total</th>
										<th style="text-align: right;"><?=number_format($total)?></th>
									  </tr>
									</tfoot>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-lg-6">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>PT. Bersama Zatta Jaya</h5>
				</div>
				<div class="ibox-content">
					<div class="row">
						<div class="col-lg-7">
							<canvas id="chart_1" height="250"></canvas>
						</div>
						<div class="col-lg-5">
							<div class="table-responsive">
								<table class="table mb-0" style="font-size : 12px">
									<thead class="bg-yellow bg-lighten-4">
									  <tr>
										<th class=""></th>
										<th class="">Bank name</th>
										<th style="text-align: right;">Balance</th>
									  </tr>
									</thead>
									<tbody>
									<?php 
									$total = 0;
									foreach($chart_1 as $key=>$row){
									$total = $total+$row['value'];	
										?>
									  <tr>
										<td><span class="label" style="background-color: <?=$row['color']?>;">&nbsp;</span></td>
										<td class=""><?=$row['caption']?></td>
										<td style="text-align: right;"><?=number_format($row['value'])?></td>
									  </tr>
									<?php }?>
									</tbody>
									<tfoot class="bg-yellow bg-lighten-4">
									  <tr>
										<th colspan="2">Total</th>
										<th style="text-align: right;"><?=number_format($total)?></th>
									  </tr>
									</tfoot>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-6">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>PT. Bersama Zatta Mulya</h5>
				</div>
				<div class="ibox-content">
					<div class="row">
						<div class="col-lg-7">
							<canvas id="chart_2" height="250"></canvas>
						</div>
						<div class="col-lg-5">
							<table class="table mb-0" style="font-size : 12px">
								<thead class="bg-yellow bg-lighten-4">
								  <tr>
									<th class=""></th>
									<th class="">Bank name</th>
									<th style="text-align: right;">Balance</th>
								  </tr>
								</thead>
								<tbody>
								<?php 
								$total = 0;
								foreach($chart_2 as $key=>$row){
								$total = $total+$row['value'];	
									?>
								  <tr>
									<td><span class="label" style="background-color: <?=$row['color']?>;">&nbsp;</span></td>
									<td class=""><?=$row['caption']?></td>
									<td style="text-align: right;"><?=number_format($row['value'])?></td>
								  </tr>
								<?php }?>
								</tbody>
								<tfoot class="bg-yellow bg-lighten-4">
								  <tr>
									<th colspan="2">Total</th>
									<th style="text-align: right;"><?=number_format($total)?></th>
								  </tr>
								</tfoot>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-lg-6">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>PT. Bersama Dauky Mulya</h5>
				</div>
				<div class="ibox-content">
					<div class="row">
						<div class="col-lg-7">
							<canvas id="chart_3" height="250"></canvas>
						</div>
						<div class="col-lg-5">
							<table class="table mb-0" style="font-size : 12px">
								<thead class="bg-yellow bg-lighten-4">
								  <tr>
									<th class=""></th>
									<th class="">Bank name</th>
									<th style="text-align: right;">Balance</th>
								  </tr>
								</thead>
								<tbody>
								<?php 
								$total = 0;
								foreach($chart_3 as $key=>$row){
								$total = $total+$row['value'];	
									?>
								  <tr>
									<td><span class="label" style="background-color: <?=$row['color']?>;">&nbsp;</span></td>
									<td class=""><?=$row['caption']?></td>
									<td style="text-align: right;"><?=number_format($row['value'])?></td>
								  </tr>
								<?php }?>
								</tbody>
								<tfoot class="bg-yellow bg-lighten-4">
								  <tr>
									<th colspan="2">Total</th>
									<th style="text-align: right;"><?=number_format($total)?></th>
								  </tr>
								</tfoot>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-6">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>PT. Bersama Adi Prakarsa </h5>
				</div>
				<div class="ibox-content">
					<div class="row">
						<div class="col-lg-7">
							<canvas id="chart_4" height="250"></canvas>
						</div>
						<div class="col-lg-5">
							<table class="table mb-0" style="font-size : 12px">
								<thead class="bg-yellow bg-lighten-4">
								  <tr>
									<th class=""></th>
									<th class="">Bank name</th>
									<th style="text-align: right;">Balance</th>
								  </tr>
								</thead>
								<tbody>
								<?php 
								$total = 0;
								foreach($chart_4 as $key=>$row){
								$total = $total+$row['value'];	
									?>
								  <tr>
									<td><span class="label" style="background-color: <?=$row['color']?>;">&nbsp;</span></td>
									<td class=""><?=$row['caption']?></td>
									<td style="text-align: right;"><?=number_format($row['value'])?></td>
								  </tr>
								<?php }?>
								</tbody>
								<tfoot class="bg-yellow bg-lighten-4">
								  <tr>
									<th colspan="2">Total</th>
									<th style="text-align: right;"><?=number_format($total)?></th>
								  </tr>
								</tfoot>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="<?=base_url()?>assets/js/plugins/chartJs/Chart.PieceLabel.min.js"></script>
<script>

<?php 
/* CHART 0*/
$chart_0_labels = '';
$chart_0_data = '';
$chart_0_color = '';
foreach($chart_0 as $key=>$row){
	if($key!=0)
	{
		$chart_0_labels .= ',';
		$chart_0_data 	.= ',';
		$chart_0_color 	.= ',';
	}
	$chart_0_labels .= '"'.$row['caption'].'"';
	$chart_0_data 	.= $row['value'];
	$chart_0_color 	.= '"'.$row['color'].'"';
}?>
    var chart_0_data = {
        labels: [<?=$chart_0_labels?>],
        datasets: [{
            data: [<?=$chart_0_data?>],
            backgroundColor: [<?=$chart_0_color?>]
        }]
    } ;


    var chart_0_options = {
		legend: {
			display : false
		},
        responsive: true,
		tooltips: {
		  callbacks: {
				label: function(tooltipItem, data) {
				var dataset = data.datasets[tooltipItem.datasetIndex];
				var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
						return previousValue + currentValue;
					});
				var currentValue = dataset.data[tooltipItem.index];
				var percentage = Math.floor(((currentValue/total) * 100)+0.5);      
				var label = data.labels[tooltipItem.index];
				var value = data.datasets[0].data[tooltipItem.index];
				console.log(label);
				value = value.toString();
				value = value.split(/(?=(?:...)*$)/);
				value = value.join(',');
				return label+' : '+value+' ('+percentage+'%)';
				}
		  } // end callbacks:
		}, //end tooltips
      pieceLabel: {
        render: function (args) {
			return args.label+' ('+args.percentage+'%)';
		},
        fontColor: '#000',
        position: 'outside',
        segment: true,
		// arc: true
      },
    };

var ctx0 = document.getElementById("chart_0").getContext("2d");
new Chart(ctx0, {type: 'pie', data: chart_0_data, options:chart_0_options});

<?php 
/* CHART 1*/
$chart_1_labels = '';
$chart_1_data = '';
$chart_1_color = '';
foreach($chart_1 as $key=>$row){
	if($key!=0)
	{
		$chart_1_labels .= ',';
		$chart_1_data 	.= ',';
		$chart_1_color 	.= ',';
	}
	$chart_1_labels .= '"'.$row['caption'].'"';
	$chart_1_data 	.= $row['value'];
	$chart_1_color 	.= '"'.$row['color'].'"';
}?>
    var chart_1_data = {
        labels: [<?=$chart_1_labels?>],
        datasets: [{
            data: [<?=$chart_1_data?>],
            backgroundColor: [<?=$chart_1_color?>]
        }]
    } ;


    var chart_1_options = {
		legend: {
			display : false
		},
        responsive: true,
		tooltips: {
		  callbacks: {
				label: function(tooltipItem, data) {
				var dataset = data.datasets[tooltipItem.datasetIndex];
				var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
						return previousValue + currentValue;
					});
				var currentValue = dataset.data[tooltipItem.index];
				var percentage = Math.floor(((currentValue/total) * 100)+0.5);      
				var label = data.labels[tooltipItem.index];
				var value = data.datasets[0].data[tooltipItem.index];
				console.log(label);
				value = value.toString();
				value = value.split(/(?=(?:...)*$)/);
				value = value.join(',');
				return label+' : '+value+' ('+percentage+'%)';
				}
		  } // end callbacks:
		}, //end tooltips
      pieceLabel: {
        render: function (args) {
			return args.label+' ('+args.percentage+'%)';
		},
        fontColor: '#000',
        position: 'outside',
        segment: true
      },
    };

var ctx1 = document.getElementById("chart_1").getContext("2d");
new Chart(ctx1, {type: 'pie', data: chart_1_data, options:chart_1_options});

<?php 
/* CHART 2*/
$chart_2_labels = '';
$chart_2_data = '';
$chart_2_color = '';
foreach($chart_2 as $key=>$row){
	if($key!=0)
	{
		$chart_2_labels .= ',';
		$chart_2_data 	.= ',';
		$chart_2_color 	.= ',';
	}
	$chart_2_labels .= '"'.$row['caption'].'"';
	$chart_2_data 	.= $row['value'];
	$chart_2_color 	.= '"'.$row['color'].'"';
}?>
    var chart_2_data = {
        labels: [<?=$chart_2_labels?>],
        datasets: [{
            data: [<?=$chart_2_data?>],
            backgroundColor: [<?=$chart_2_color?>]
        }]
    } ;


    var chart_2_options = {
		legend: {
			display : false
		},
        responsive: true,
		tooltips: {
		  callbacks: {
				label: function(tooltipItem, data) {
				var dataset = data.datasets[tooltipItem.datasetIndex];
				var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
						return previousValue + currentValue;
					});
				var currentValue = dataset.data[tooltipItem.index];
				var percentage = Math.floor(((currentValue/total) * 100)+0.5);      
				var label = data.labels[tooltipItem.index];
				var value = data.datasets[0].data[tooltipItem.index];
				console.log(label);
				value = value.toString();
				value = value.split(/(?=(?:...)*$)/);
				value = value.join(',');
				return label+' : '+value+' ('+percentage+'%)';
				}
		  } // end callbacks:
		}, //end tooltips
      pieceLabel: {
        render: function (args) {
			return args.label+' ('+args.percentage+'%)';
		},
        fontColor: '#000',
        position: 'outside',
        segment: true
      },
    };

var ctx2 = document.getElementById("chart_2").getContext("2d");
new Chart(ctx2, {type: 'pie', data: chart_2_data, options:chart_2_options});

<?php 
/* CHART 3*/
$chart_3_labels = '';
$chart_3_data = '';
$chart_3_color = '';
foreach($chart_3 as $key=>$row){
	if($key!=0)
	{
		$chart_3_labels .= ',';
		$chart_3_data 	.= ',';
		$chart_3_color 	.= ',';
	}
	$chart_3_labels .= '"'.$row['caption'].'"';
	$chart_3_data 	.= $row['value'];
	$chart_3_color 	.= '"'.$row['color'].'"';
}?>
    var chart_3_data = {
        labels: [<?=$chart_3_labels?>],
        datasets: [{
            data: [<?=$chart_3_data?>],
            backgroundColor: [<?=$chart_3_color?>]
        }]
    } ;


    var chart_3_options = {
		legend: {
			display : false
		},
        responsive: true,
		tooltips: {
		  callbacks: {
				label: function(tooltipItem, data) {
				var dataset = data.datasets[tooltipItem.datasetIndex];
				var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
						return previousValue + currentValue;
					});
				var currentValue = dataset.data[tooltipItem.index];
				var percentage = Math.floor(((currentValue/total) * 100)+0.5);      
				var label = data.labels[tooltipItem.index];
				var value = data.datasets[0].data[tooltipItem.index];
				console.log(label);
				value = value.toString();
				value = value.split(/(?=(?:...)*$)/);
				value = value.join(',');
				return label+' : '+value+' ('+percentage+'%)';
				}
		  } // end callbacks:
		}, //end tooltips
      pieceLabel: {
        render: function (args) {
			return args.label+' ('+args.percentage+'%)';
		},
        fontColor: '#000',
        position: 'outside',
        segment: true
      },
    };

var ctx3 = document.getElementById("chart_3").getContext("2d");
new Chart(ctx3, {type: 'pie', data: chart_3_data, options:chart_3_options});

<?php 
/* CHART 4*/
$chart_4_labels = '';
$chart_4_data = '';
$chart_4_color = '';
foreach($chart_4 as $key=>$row){
	if($key!=0)
	{
		$chart_4_labels .= ',';
		$chart_4_data 	.= ',';
		$chart_4_color 	.= ',';
	}
	$chart_4_labels .= '"'.$row['caption'].'"';
	$chart_4_data 	.= $row['value'];
	$chart_4_color 	.= '"'.$row['color'].'"';
}?>
    var chart_4_data = {
        labels: [<?=$chart_4_labels?>],
        datasets: [{
            data: [<?=$chart_4_data?>],
            backgroundColor: [<?=$chart_4_color?>]
        }]
    } ;


    var chart_4_options = {
		legend: {
			display : false
		},
        responsive: true,
		tooltips: {
		  callbacks: {
				label: function(tooltipItem, data) {
				var dataset = data.datasets[tooltipItem.datasetIndex];
				var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
						return previousValue + currentValue;
					});
				var currentValue = dataset.data[tooltipItem.index];
				var percentage = Math.floor(((currentValue/total) * 100)+0.5);      
				var label = data.labels[tooltipItem.index];
				var value = data.datasets[0].data[tooltipItem.index];
				console.log(label);
				value = value.toString();
				value = value.split(/(?=(?:...)*$)/);
				value = value.join(',');
				return label+' : '+value+' ('+percentage+'%)';
				}
		  } // end callbacks:
		}, //end tooltips
      pieceLabel: {
        render: function (args) {
			return args.label+' ('+args.percentage+'%)';
		},
        fontColor: '#000',
        position: 'outside',
        segment: true
      },
    };

var ctx4 = document.getElementById("chart_4").getContext("2d");
new Chart(ctx4, {type: 'pie', data: chart_4_data, options:chart_4_options});

function addCommas(nStr)
{
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}

</script>
<script src="<?=base_url()?>assets/js/plugins/chartJs/Chart.min.js"></script>