<div class="row">
    <div class="col-md-12">
        <div class="box">
            <div class="box-header with-border">
                <h3 class="box-title">Prosentase Capaian Kelengkapan Dokumen Rekam Medik Rawat Inap</h3>
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    <a href="<?php echo base_url('admin/home'); ?>" class="btn btn-box-tool"><i class="fa fa-times"></i></a>
                </div>
            </div>
            <div class="box-body">
                <a href="<?php echo base_url('admin/drm_ranap/bulan'); ?>" class="btn btn-info">Bulan Ini</a>
                <a href="<?php echo base_url('admin/drm_ranap/tahun'); ?>" class="btn btn-info">Tahun Ini</a>
                <div id="drm_ranap" class="chart"></div>
            </div>
            <div class="box-footer">
                <i class="fa fa-clock-o"></i> Data realtime
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
// ===== KELENGKAPAN DRM RAWAT INAP =====
var drm_ranap = AmCharts.makeChart("drm_ranap", {
    "type": "serial",
    "theme": "light",
    "marginRight": 40,
    "marginLeft": 40,
    "autoMarginOffset": 20,
    "mouseWheelZoomEnabled":true,
    "dataDateFormat": "YYYY-MM-DD",
    "valueAxes": [{
        "id": "v1",
        "axisAlpha": 0,
        "position": "left",
        "ignoreAxisWidth":true
    }],
    "balloon": {
        "borderThickness": 1,
        "shadowAlpha": 0
    },
    "graphs": [{
        "id": "g1",
        "balloon":{
          "drop":true,
          "adjustBorderColor":false,
          "color":"#ffffff"
        },
        "bullet": "round",
        "bulletBorderAlpha": 1,
        "bulletColor": "#FFFFFF",
        "bulletSize": 5,
        "hideBulletsCount": 50,
        "lineThickness": 2,
        "title": "red line",
        "useLineColorForBulletBorder": true,
        "valueField": "value",
        "balloonText": "<span style='font-size:18px;'>[[value]]</span>"
    }],
    "chartScrollbar": {
        "graph": "g1",
        "oppositeAxis":false,
        "offset":30,
        "scrollbarHeight": 80,
        "backgroundAlpha": 0,
        "selectedBackgroundAlpha": 0.1,
        "selectedBackgroundColor": "#888888",
        "graphFillAlpha": 0,
        "graphLineAlpha": 0.5,
        "selectedGraphFillAlpha": 0,
        "selectedGraphLineAlpha": 1,
        "autoGridCount":true,
        "color":"#AAAAAA"
    },
    "chartCursor": {
        "pan": true,
        "valueLineEnabled": true,
        "valueLineBalloonEnabled": true,
        "cursorAlpha":1,
        "cursorColor":"#258cbb",
        "limitToGraph":"g1",
        "valueLineAlpha":0.2,
        "valueZoomable":true
    },
    "valueScrollbar":{
      "oppositeAxis":false,
      "offset":50,
      "scrollbarHeight":10
    },
    "categoryField": "date",
    "categoryAxis": {
        "parseDates": true,
        "dashLength": 1,
        "minorGridEnabled": true
    },
    "export": {
        "enabled": true
    },
    "dataProvider": [
                <?php 
                  $jmlpasien = 0;
                  $jmlberkas = 0;
                  foreach ($data as $row) {
                        $jmlpasien = $row->jumlahPasien;
                        $jmlberkas = $row->hariPertama + $row->harikedua + $row->hariketiga + $row->lebih3hari;
                        $total = round(($jmlberkas/$jmlpasien)*100,2);
                        echo "{ 'date': '".$row->tahun."-".$row->bulan."-".$row->tanggal."',
                                'value': ".$total." },";
                  } ?>
    ]
});
</script>