<script src="<?php echo base_url();?>/assets/plugins/chart-js/Chart.min.js"></script>
<script src="<?php echo base_url();?>/assets/plugins/gritter/js/jquery.gritter.js"></script>
<script src="<?php echo base_url();?>/assets/js/page-index-v3.demo.min.js"></script>

<div class="panel panel-lime">
<div class="panel no-rounded-corner bg-default text-white wrapper m-b-0">
<div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
<div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
<div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0">
</div></div><div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:200%;height:200%;left:0; top:0"></div></div></div>
                            <!-- end btn-group -->
                            <!-- begin title -->
                            <h4 class=" m-t-0 m-b-10">
                                <i class="fa fa-snowflake-o text-success-light"></i> Grafik Data Jenis Layanan
                                <small class="text-muted m-l-5"><?php echo date('Y'); ?></small>
                            </h4>
                            <!-- end title -->
                            <!-- begin chart -->
                            <canvas id="bar-chart" style="display: block; width: 500px; height: 166px;" height="166" width="500"></canvas>
                        </div>
</div>


<div class="panel panel-lime">
<div class="panel no-rounded-corner bg-default text-white wrapper m-b-0">
<div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
<div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
<div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0">
</div></div><div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:200%;height:200%;left:0; top:0"></div></div></div>
                            <!-- end btn-group -->
                            <!-- begin title -->
                            <h4 class=" m-t-0 m-b-10">
                                <i class="fa fa-snowflake-o text-success-light"></i> Grafik Data PAD
                                <small class="text-muted m-l-5">Per Bulan di tahun <?php echo date('Y'); ?></small>
                            </h4>
                            <!-- end title -->
                            <!-- begin chart -->
                            <canvas id="bar-chart2" style="display: block; width: 500px; height: 166px;" height="166" width="500"></canvas>
                        </div>
</div>


<div class="panel panel-lime">
<div class="panel no-rounded-corner bg-default text-white wrapper m-b-0">
<div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
<div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
<div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0">
</div></div><div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:200%;height:200%;left:0; top:0"></div></div></div>
                            <!-- end btn-group -->
                            <!-- begin title -->
                            <h4 class=" m-t-0 m-b-10">
                                <i class="fa fa-snowflake-o text-success-light"></i> Grafik Data Analisis
                                <small class="text-muted m-l-5">Per Bulan di tahun <?php echo date('Y'); ?></small>
                            </h4>
                            <!-- end title -->
                            <!-- begin chart -->
                            <canvas id="bar-chart3" style="display: block; width: 500px; height: 166px;" height="166" width="500"></canvas>
                        </div>
</div>


<div class="panel panel-lime">
<div class="panel no-rounded-corner bg-default text-white wrapper m-b-0">
<div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
<div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
<div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0">
</div></div><div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:200%;height:200%;left:0; top:0"></div></div></div>
                            <!-- end btn-group -->
                            <!-- begin title -->
                            <h4 class=" m-t-0 m-b-10">
                                <i class="fa fa-snowflake-o text-success-light"></i> Grafik Total Pengujian
                                <small class="text-muted m-l-5"><?php echo date('Y'); ?></small>
                            </h4>
                            <!-- end title -->
                            <!-- begin chart -->
                        <canvas id="line-chart" style="display: block; width: 500px; height: 166px;" height="166" width="500"></canvas>

                        </div>
</div>
<?php //echo count($grafik_jl) ?>
<?Php //print("<pre>".print_r($grafik_jenis_pengujian, true)."</pre>"); ?>
<script>
// Bar chart
new Chart(document.getElementById("bar-chart"), {
    type: 'bar',
    data: {
      <?php
        $bulan = array(1=>"Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember");
        $tb = (int) date('m');
        $cb = intval($tb-5+1);
      ?>
      labels: [<?php for($i=$cb;$i<=$tb;$i++){echo '"'.$bulan[(int)date('m', strtotime('+'.$i.' months',date('m')))].'",';} ?>],
      datasets: [
        <?php foreach($grafik_jl as $r){ ?>
        {
          label: "<?php echo $r['nama_layanan'] ?>",
          backgroundColor: [
            <?php for($i=1; $i<=12;$i++){echo '"#'.$r['color'].'",';} ?>
          ],
          data: [
            <?php $x=1; foreach($r['data_jl'] as $j){ ?>
              <?php echo $j.',' ?>
          <?php } ?>
          ]
		    },
        <?php $x++; } ?>
      ]
    },
    options: {
      legend: { display: true },
      title: {
        display: true,
        // text: 'Predicted world population (millions) in 2050'
      },
      scales: {
                xAxes: [{
                    ticks: {
                        autoSkip: false,
                        //maxRotation: 90
                    },
					display: true,
					scaleLabel: {
							display: true,
							labelString: 'Bulan'
					}
                }],
                yAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'Jumlah Permintaan Uji'
						},
						ticks: {
							min: 0,
							max: 50,

							// forces step size to be 5 units
							stepSize: 5
						}
					}]
      }
    }

});
</script>

<script>
// Bar chart
new Chart(document.getElementById("bar-chart3"), {
    type: 'bar',
    data: {
      <?php
        $bulan = array(1=>"Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember");
        $tb = (int) date('m');
        $cb = intval($tb-5+1);
      ?>
      labels: [<?php for($i=$cb;$i<=$tb;$i++){echo '"'.$bulan[(int)date('m', strtotime('+'.$i.' months',date('m')))].'",';} ?>],
      datasets: [
        <?php foreach($grafik_jenis_pengujian as $r){ ?>
        {
          label: "<?php echo $r['nama_parameter'] ?>",
          backgroundColor: [
            <?php for($i=1; $i<=12;$i++){echo '"#'.$r['color'].'",';} ?>
          ],
          data: [
            <?php $x=1; foreach($r['data_jl'] as $j){ ?>
              <?php echo $j.',' ?>
          <?php } ?>
          ]
		    },
        <?php $x++; } ?>
      ]
    },
    options: {
      legend: { display: true },
      title: {
        display: true,
        // text: 'Predicted world population (millions) in 2050'
      },
      scales: {
                xAxes: [{
                    ticks: {
                        autoSkip: false,
                        //maxRotation: 90
                    },
					display: true,
					scaleLabel: {
							display: true,
							labelString: 'Bulan'
					}
                }],
                yAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'Jumlah Sampel'
						},
						ticks: {
							min: 0,
							max: 50,

							// forces step size to be 5 units
							stepSize: 5
						}
					}]
      }
    }
});
</script>

<script>
// Bar chart
new Chart(document.getElementById("bar-chart2"), {
    type: 'bar',
    data: {
      labels: ["Januari","Pebruari","Maret","April","Mei","Juni", "Juli", "Agustus", "September", "Oktober","Nopember","Desember"],
      datasets: [
        {
          label: "PAD",
          backgroundColor: [<?php for($i=1;$i<=12;$i++){echo '"#3e95cd",';} ?>],
          data: [<?php foreach($grafik_pad as $r){echo $r['total_nominal'].',';} ?>]
		}
	  ]
    },
    options: {
      legend: { display: false },
      title: {
        display: true,
        // text: 'Predicted world population (millions) in 2050'
      },
      scales: {
                xAxes: [{
                    ticks: {
                        autoSkip: false,
                        //maxRotation: 90
                    },
					display: true,
					scaleLabel: {
							display: true,
							labelString: 'Bulan'
					}
                }],
                yAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'Total PAD'
						},
						ticks: {
							min: 0,
							max: 300000000,

							// forces step size to be 5 units
							stepSize: 50000000
						}
					}]
      }
    }
});
</script>

<script>
new Chart(document.getElementById("line-chart"), {
  type: 'line',
  data: {
    labels: ["Januari","Pebruari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","Nopember","Desember"],
    datasets: [{
        data: [<?php foreach($grafik_uji_sampel as $r){echo $r['total_uji'].',';} ?>],
        label: "Data Uji Sampel",
		borderColor: "#00e6e6",
        fill: true
      }
    ]
  },
  options: {
	legend: { display: false },
    title: {
      display: false,
    //   text: 'World population per region (in millions)'
    },
    scales: {
                xAxes: [{
                    ticks: {
                        autoSkip: false,
                        //maxRotation: 90
                    },
					display: true,
					scaleLabel: {
							display: true,
							labelString: 'Bulan'
					}
                }],
                yAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'Jumlah Sampel'
						},
						ticks: {
							min: 0,
							max: 50,

							// forces step size to be 5 units
							stepSize: 5
						}
					}]
      }
  }
});
</script>
