<link rel="stylesheet" href="<?php echo base_url() ?>datatables/dataTables.bootstrap.css"/>
<script src="<?php echo base_url()?>datatables/jquery.dataTables.js"></script>
<script src="<?php echo base_url()?>datatables/dataTables.bootstrap.js"></script>
<script>
var chart;

var chartData = [
	<?php echo $data['data_chart'];?>
];

AmCharts.ready(function () {
	chart = new AmCharts.AmSerialChart();
	chart.dataProvider = chartData;
	chart.categoryField = "nama_kelurahan";
	chart.plotAreaBorderAlpha = 0.2;
	chart.rotate = true;

	var categoryAxis = chart.categoryAxis;
	categoryAxis.gridAlpha = 0.1;
	categoryAxis.axisAlpha = 0;
	categoryAxis.gridPosition = "start";

	var valueAxis = new AmCharts.ValueAxis();
	valueAxis.stackType = "regular";
	valueAxis.gridAlpha = 0.1;
	valueAxis.axisAlpha = 0;
	chart.addValueAxis(valueAxis);

<?php $no=0;foreach($data['data_field'] as $k=>$v){?>
	var graph = new AmCharts.AmGraph();
	graph.title = "<?php echo $v;?>";
	graph.labelText = "[[value]]";
	graph.valueField = "<?php echo $k;?>";
	graph.type = "column";
	graph.lineAlpha = 0;
	graph.fillAlphas = 1;
	graph.lineColor = "<?php echo $data['warna'][$no];?>";
	graph.balloonText = "<b><span style='color:<?php echo $data['warna'][$no];?>'>[[title]]</b></span><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>";
	graph.labelPosition = "middle";
	chart.addGraph(graph);
<?php $no++;} ?>

	var legend = new AmCharts.AmLegend();
	legend.position = "right";
	legend.borderAlpha = 0.3;
	legend.horizontalGap = 10;
	legend.switchType = "v";
	chart.addLegend(legend);

	chart.creditsPosition = "top-right";
	chart.depth3D = 20;
	chart.angle = 30;
	chart.write("chartdiv");
});

</script>
<style>
#scroll{
	width: 100%;
    overflow-x: auto;
    white-space: nowrap;
}
.nav-tabs > li > a {
    color: #ffffff;
    background-color: #315372;
}
</style>
<div>
	<h4 align="center"><b><?php echo $judul;?></b></h4>
  <br>
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#data_table" aria-controls="data_table" role="tab" data-toggle="tab" id="tab_data_table">Data Table</a></li>
    <li role="presentation"><a href="#data_chart" aria-controls="data_chart" role="tab" data-toggle="tab" id="tab_data_chart">Data Chart</a></li>
  </ul>

  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="data_table">
		<div id="scroll">
			<table class="table table-bordered table-hover" id="mytable">
				<thead>
					<?php echo $data['thead'];?>
				</thead>
					<?php echo $data['tbody'];?>
			</table>
		</div>
	</div>
    <div role="tabpanel" class="tab-pane" id="data_chart">
		<div id="chartdiv" style="width: 100%; height: <?php echo $data['jum_data']*23;?>px;"></div>
	</div>
  </div>

</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
    </div>
  </div>
</div>
<script type="text/javascript">
	$("#scroll").show();
	$("#chartdiv").hide();

	$(document).ready(function() {
		//$(".amcharts-legend-div").removeAttr("style")

		$("#tab_data_table").click(function(){
			setTimeout(function(){$('#myModal').modal('hide');},2000);
			$("#scroll").show();
			$("#chartdiv").hide();
		});
		$("#tab_data_chart").click(function(){
			$("#chartdiv").show();
			$('#myModal').modal('show');
			setTimeout(function(){$('#myModal').modal('hide');},2000);
			$("#scroll").hide();
			$("#chartdiv").show();
			$(".amChartsLegend").css({ "top":"10px"});
		});
		
		$('#mytable').DataTable();
    });
</script>