<div class="row">
    <div class="col-md-12">
        <a name="bulan"></a>
        <div class="box">
            <div class="box-header with-border">
                <h3 class="box-title">Indikator RS - <?php echo $title; ?></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">
                  <div id="chart" 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">
var chart = AmCharts.makeChart("chart", {
    "type": "serial",
    "theme": "light",
    "titles": [{
        "text": "Bulan <?php echo date('F'); ?>",
        "size": 15
    }],
    "legend": {
        "align": "center",
        "equalWidths": false,
        "periodValueText": "total: [[value.sum]]",
        "valueAlign": "left",
        "valueText": "[[value]] ([[percents]]%)",
        "valueWidth": 100
    },
    "dataProvider": [
        <?php foreach ($data as $content){ ?>
        {
            "tgl": "<?php echo $content->tgl; ?>",
            "telp": <?php echo $content->telp; ?>,
            "sms": <?php echo $content->sms; ?>,
            "web": <?php echo $content->web; ?>,
            "kemenkes": <?php echo $content->kemkes; ?>
        },
        <?php } ?>
    ],
    "valueAxes": [{
        "stackType": "100%",
        "gridAlpha": 0.07,
        "position": "left",
        "title": "percent"
    }],
    "graphs": [
        {
            "balloonText": "<i class='fa fa-phone fa-2x' style='color: #AFAFAF;'></i>&nbsp;<span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
            "fillAlphas": 0.5,
            "lineAlpha": 0.5,
            "title": "Telephone",
            "valueField": "telp"
        }, {
            "balloonText": "<i class='fa fa-envelope-o fa-2x' style='color: #AFAFAF;'></i>&nbsp;<span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
            "fillAlphas": 0.5,
            "lineAlpha": 0.5,
            "title": "SMS",
            "valueField": "sms"
        }, {
            "balloonText": "<i class='fa fa-globe fa-2x' style='color: #AFAFAF;'></i>&nbsp;<span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
            "fillAlphas": 0.5,
            "lineAlpha": 0.5,
            "title": "Website",
            "valueField": "web"
        }, {
            "balloonText": "<i class='fa fa-building-o fa-2x' style='color: #AFAFAF;'></i>&nbsp;<span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
            "fillAlphas": 0.5,
            "lineAlpha": 0.5,
            "title": "Kemenkes",
            "valueField": "kemenkes"
        }
    ],
    "plotAreaBorderAlpha": 0,
    "marginLeft": 0,
    "marginBottom": 0,
    "chartCursor": {
        "cursorAlpha": 0,
        "zoomable": false
    },
    "categoryField": "tgl",
    "categoryAxis": {
        "startOnAxis": true,
        "axisColor": "#DADADA",
        "gridAlpha": 0.07
    },
    "export": {
        "enabled": true
     }
});
</script>