<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"><?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>
<?php //echo print_r($data);?>
<script type="text/javascript">
var chart = AmCharts.makeChart("chart", {
    "type": "serial",
    "theme": "none",
    "marginRight": 40,
    "marginLeft": 40,
    "autoMarginOffset": 20,
    "mouseWheelZoomEnabled":true,
    "dataDateFormat": "YYYY-MM",
    "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>"
    }],
    "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": false
    },
    "dataProvider": [
      
        <?php
            $str = explode("&", $data);
            for($i = 0; $i < count($str); $i++){
            	$val = explode("|", $str[$i]);
            	?>
            	    {
                        "date": "<?php echo intVal($val[1])."-".intVal($val[0]); ?>",
                        "value": <?php echo floatval($val[2]); ?>
                    },
            	<?php
            }
        ?>
    ]
});
chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
    chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}

/*
// ===== KUNJUNGAN IRJA HARI INI =====
var chart = AmCharts.makeChart( "chart", {
    "theme": "light",
    "type": "serial",
    "startDuration": 2,
    "dataProvider": [
      <?php //foreach ($data as $content): ?>
        {
            "country": "<?php //echo $content->bln; ?>",
            "visits": <?php //echo $content->jml; ?>,
            "color": "<?php //printf( "#%06X", mt_rand( 0, 0xFFFFFF )); ?>"
        },
        <?php //endforeach; ?>
        ],
    "valueAxes": [{
        "position": "left",
        "axisAlpha":0,
        "gridAlpha":0
    }],
    "graphs": [{
        "balloonText": "[[category]]: <b>[[value]]</b>",
        "colorField": "color",
        "labelText": "[[value]]",
        "fillAlphas": 0.85,
        "lineAlpha": 0.1,
        "type": "column",
        "topRadius":1,
        "valueField": "visits"
    }],
    "depth3D": 40,
  "angle": 30,
    "chartCursor": {
        "categoryBalloonEnabled": false,
        "cursorAlpha": 0,
        "zoomable": false
    },
    "categoryField": "country",
    "categoryAxis": {
        "gridPosition": "start",
        "axisAlpha":0,
        "gridAlpha":0

    },
    "export": {
      "enabled": true
     }

}, 0);
*/
</script>