<script src="<?php echo base_url();?>resources/js/hichart/highcharts.js"></script>
<script src="<?php echo base_url();?>resources/js/hichart/modules/data.js"></script>
<script src="<?php echo base_url();?>resources/js/hichart/modules/exporting.js"></script>
<script src="<?php echo base_url();?>resources/js/hichart/themes/sand-signika.js"></script>

<div align="left" style="height:100%; width: 100%">
    <div id="grafik_mediasi" style="width:95%;min-width: 310px; height: 80%; margin: 5% auto"></div>
</div>

<br/>
<div class="cssTable">
        <table id="statistik_mediasi">
                <col  width="40%" />
                <col  width="15%" />
                <col  width="15%" />
                <col  width="15%" />
                <col  width="15%" />
                <tbody>
                        <tr>
                                <td>Bulan</td>
                                <td>Jumlah Perkara Diterima</td>                                
                                <td>Jumlah Perkara Mediasi</td>                                


                        </tr>
                        <?php
                        if($rekap->num_rows>0){
                                foreach ($rekap->result() as $row) {
                                        echo "<tr>";
												echo "<td style ='text-align:center'>".$row->bulan_nama."</td>";
												echo "<td style ='text-align:center'>".$row->perkara_diterima."</td>";												
												echo "<td style ='text-align:center'>".$row->perkara_mediasi."</td>";												


                                        echo "</tr>";
                                }
                        }
                        ?>
                </tbody>
        </table>
      
</div>
<script>
$('#statistik_mediasi').hide();

    $('#grafik_mediasi').highcharts({
        data: {
            table: document.getElementById('statistik_mediasi')
        },
        chart: {
            type: 'column'

        },
        plotOptions: {
        column: {
        stacking: 'normal',
        dataLabels: {
            enabled: true,
			color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
            }
            }
        },
        title: {
            text: 'Grafik Jumlah Perkara Diterima dan Mediasi'
        },
        yAxis: {
            allowDecimals: false,
            reversedStacks: false,
            title: {
                text: 'Jumlah'
            }
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+
                    this.point.y +' '+ this.point.name.toLowerCase();
            }
        }
    });

</script>

