<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="code/modules/data.js"></script>
<script src="code/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/animate.css/3.5.1/animate.min.css">

	<div id="chartkab" style="height:300px; background:#FFF; width:100%; border:1px solid rgba(0,0,0,.125);"></div>
    <script type="text/javascript">
  $(function () {
            
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
    return {
        radialGradient: {
            cx: 0.5,
            cy: 0.3,
            r: 0.7
        },
        stops: [
            [0, color],
            [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
        ]
    };
});


       
  });
</script>
<script type="text/javascript">
  function chartkabu(filter, nil){
		
				var filter = filter;
				var nil = nil;
				//alert("filete"+filter);
				

              $.ajax({
                    dataType : "json",
                    contentType: "application/json; charset=utf-8",
                    type: 'get',
                    url: "jsonchartkab.php?filter="+ filter +"&nil="+ nil,
					data: {filter: filter ,nil: nil},
                    success: function (data) {
                      Highcharts.setOptions({
						 	colors: ['#FF9900', '#FF00FF', '#00FFFF', '#CC6633', '#64E572', '#FF9655', '#FFF263',      '#6AF9C4'],
						});
					  Highcharts.chart('chartkab', {
                        chart: {
                            type: 'column'
                        },
                        title: {
                            text: 'Grafik Perbandingan Perkecamatan',
							style: {'fontSize': '14px'}
                        },
                        

                        yAxis: {
                            title: {
                                 text: 'Jumlah Kepala Keluarga'
                            }
                        },
						
						exporting: { 
							enabled: false 
						},
                        plotOptions: {
                            column: {
                                pointPadding: 0.2,
                                borderWidth: 0
                            }
                        },
                        series: data
                    });                          
            }
        });
  };
</script>
