Grafik Group Laporan Bulanan

 
<script type="text/javascript">
var index=1;
function PRINT(){
win=window.open('user/print.php','win','width=1000, height=400, menubar=0, scrollbars=1, resizable=0, location=0, toolbar=0, status=0'); }
</script>
<script language="JavaScript">
function buka(url) {window.open(url, 'window_baru', 'width=800,height=600,left=320,top=100,resizable=1,scrollbars=1');}
</script>
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

  <link rel="stylesheet" href="jsacordeon/jquery-ui.css">
  <link rel="stylesheet" href="resources/demos/style.css">
<script src="jsacordeon/jquery-1.12.4.js"></script>
  <script src="jsacordeon/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#accordion" ).accordion({
      collapsible: true
    });
  } );
  </script>


<div id="accordion">
<?php 

$sql="select `tanggal` from `$tbpengeluaranbarang` order by `tanggal` asc";
$d=getField($conn,$sql);
$tanggal1=$d["tanggal"];
$sql="select `tanggal` from `$tbpengeluaranbarang` order by `tanggal` desc";
$d=getField($conn,$sql);
$tanggal2=$d["tanggal"];
$ar1=explode("-",$tanggal1);
$thn1=$ar1[0];
$bln1=$ar1[1];

$ar2=explode("-",$tanggal2);
$thn2=$ar2[0];
$bln2=$ar2[1];

$timeStart = strtotime($tanggal1);$timeEnd = strtotime($tanggal2);$sel = 1 + (date("Y",$timeEnd)-date("Y",$timeStart))*12;

//echo "$tanggal1 $tanggal2=$sel<hr>";


$tahun=$thn1;
$bulan=$bln1;
for($i=0;$i<$sel;$i++){
$bulan=$bulan+0;
if($bulan>12){$tahun=$tahun+1;$bulan=1;}
if($bulan<10){$bulan="0".$bulan;}

$bln="Januari";
if($bulan==1){$bln="Januari";}
else if($bulan==2){$bln="Februari";}
else if($bulan==3){$bln="Maret";}
else if($bulan==4){$bln="April";}
else if($bulan==5){$bln="Mei";}
else if($bulan==6){$bln="Juni";}
else if($bulan==7){$bln="Juli";}
else if($bulan==8){$bln="Agustus";}
else if($bulan==9){$bln="September";}
else if($bulan==10){$bln="Oktober";}
else if($bulan==11){$bln="November";}
else if($bulan==12){$bln="Desember";}

$ARR1[$i]="$tahun-$bulan-01";
$ARR2[$i]="$tahun-$bulan-31";
$ARR3[$i]="$bln $tahun";

echo $i."#".$ARR1[$i]." - ".$ARR2[$i]."<br>";
$bulan=$bulan+1;

}
  $sql="select * from `$tbbarang` order by `id_barang` asc";
  $jum=getJum($conn,$sql);
if($jum <1){
echo"Maaf Data Belum Tersedia....";
}
$no=1;
$arr=getData($conn,$sql);
foreach($arr as $d) {
$id_barang=$d["id_barang"];
$nama_barang=$d["nama_barang"];
$deskripsi=$d["deskripsi"];
$gambar=$d["gambar"];
$gambar0=$d["gambar"];
                $status=$d["status"];
$keteranganbrg=$d["keterangan"];
$color="#F8F8FF";

echo"<h3>$no. Data Barang $nama_barang |$id_barang</h3><div>";
echo"<b>$nama_barang</b>";
echo"<table width='100%'>";
echo"<tr><td width='30%' valign='top'>
<div align='center'>";
echo"<a href='#' onclick='buka(\"barang/zoom.php?id=$id_barang\")'>
<img src='$YPATH/$gambar' width='120' height='120' title='date ke $no'/></a>
<br>
ID Barang: $id_barang<br>
Kategori: $keteranganbrg<br>
</div>";
$nom=0;
$mydata="";
$tab="<table width='60%' border='1'><tr bgcolor='#cccccc'><th>No<th>Periode<th>Jumlah</tr>";
for($i=0;$i<$sel;$i++){
$w1=$ARR1[$i];
$w2=$ARR2[$i];
$w3=$ARR3[$i];

  $nom=$i+1;
   $sql="select sum(`$tbpengeluarandetail`.`jumlah`) as `total`
   from `$tbpengeluarandetail`,`$tbpengeluaranbarang` where
   `$tbpengeluarandetail`.`id_barang`='$id_barang' and
   `$tbpengeluarandetail`.`id_pengeluaran`=`$tbpengeluaranbarang`.`id_pengeluaran` and
    `$tbpengeluaranbarang`.`tanggal` between '$w1' and '$w2'
   ";
  $d=getField($conn,$sql);
  $in=$d["total"]+0;
  $mydata.="[$nom,$in],";
$tab.="<tr><td>$nom<td>$w3<td>$in</tr>";
}
$tab.="</table>";

$mydata=substr($mydata,0,strlen($mydata)-1);
echo"<td valign='top'>";

?>

     <script type="text/javascript">
      google.charts.load('current', {'packages':['line']});
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Periode');
      data.addColumn('number', 'Pengeluaran Barang');
 
      data.addRows([<?php echo $mydata;?>]);

      var options = {
        chart: {
          title: 'Grafik Pengeluaran Barang',
          subtitle: 'TOKO PAKAIAN XYZ JAKARTA'
        },
        width: 400,
        height: 300
      };

      var chart = new google.charts.Line(document.getElementById("curve_chart"+index));
chart.draw(data, google.charts.Line.convertOptions(options));
index=index+1;
}

   </script>
    <div id="curve_chart<?php echo $no;?>" style="width: 400px; height: 300px"></div>
<?php
echo $tab;
echo "</td></tr>";
echo"</table><br>";
echo"</div>";
$no++;
}//foreach
?>
</div>