Multi Grafik Pada Aplikasi

<?php
$tanggal=WKT(date("Y-m-d"));
$pro="simpan";
$gambar0="avatar.jpg";
$status="Aktif";
//$PATH="ypathcss";
?>
<link type="text/css" href="<?php echo "$PATH/base/";?>ui.all.css" rel="stylesheet" /> 
<script type="text/javascript" src="<?php echo "$PATH/";?>jquery-1.3.2.js"></script>
<script type="text/javascript" src="<?php echo "$PATH/";?>ui/ui.core.js"></script>
<script type="text/javascript" src="<?php echo "$PATH/";?>ui/ui.datepicker.js"></script>
<script type="text/javascript" src="<?php echo "$PATH/";?>ui/i18n/ui.datepicker-id.js"></script>
   
  <script type="text/javascript">
      $(document).ready(function(){
        $("#tanggal").datepicker({
dateFormat  : "dd MM yy",       
          changeMonth : true,
          changeYear  : true
        });
      });
    </script>   

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

<script type="text/javascript">
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>

<div id="accordion">
<?php 
  $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"];
$kategori=$d["kategori"];
$gambar=$d["gambar"];
$gambar0=$d["gambar"];
                $status=$d["status"];
$keterangan=$d["keterangan"];
$harga=RP($d["harga"]);
$color="#F8F8FF";

echo"<h3>$no. Data Barang $nama_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: $kategori<br>
Harga: $harga
</div>";
$nom=0;
$mydata="";
  $sql="select sum(`jumlah`) as `total` from `$tbpenjualandetail` where id_barang='$id_barang' order by `id` asc";
  $d=getField($conn,$sql);
  $in=$d["total"];
  $mydata.="[$nom,$in],";
for($i=1;$i<20;$i++){
$nom=$i+1;
$mydata.="[$nom,".rand(1,10)."],";
}


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

     <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', 'Penjualan');
 
      data.addRows([<?php echo $mydata;?>]);

      var options = {
        chart: {
          title: 'Grafik Perbandingan Data Forecasting',
          subtitle: 'Pemasukan Barang - Pengeluaran Barang'
        },
        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 "</td></tr>";
echo"</table><br>";
echo"</div>";
$no++;
}//foreach
?>
</div>