Jumat, 11 Desember 2020

Grafik Multi Line Multi Category


   <script type="text/javascript"> 

     var itr=1;

    </script>  

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">

  </script>

  

  

<?php

//http://localhost/____2021/heru/DrinkSalePrediction/index.php?mnu=grafik

 

 $sqlq="select distinct(tanggal) from `$tbinvoice` order by `id_invoice` asc limit 0,40";

$arrq=getData($conn,$sqlq);

$arTgl=array();$i=0;

foreach($arrq as $dq) {

$tanggal=$dq["tanggal"];

$arTgl[$i]=$tanggal;

$i++;

}

$jt=$i;

$itr=0;

 $sqlv="select distinct(`kategori`) from `$tbproduk` order by `kategori` asc ";

$arrv=getData($conn,$sqlv);

foreach($arrv as $dvv) {

$kategori=$dvv["kategori"];

$itr++;

 $sql="select * from `$tbproduk` where `kategori`='$kategori' order by `nama_produk` asc ";

$arr=getData($conn,$sql);

$no=0;

foreach($arr as $d) {

$id_produk=$d["id_produk"];

$nama_produk=$d["nama_produk"];

$kategori=$d["kategori"];

$arP[$no]=$nama_produk;

$arI[$no]=$id_produk;

$arK[$no]=$kategori;

$no++;

}

$jb=$no;

$gab="";

for($jj=0;$jj<$jt;$jj++){

$tanggal=$arTgl[$jj];

$no=$jj+1;

$gab.="[$no,";

for($i=0;$i<$jb;$i++){

$id_produk=$arI[$i];

$sqlq="select `id_invoice` from `$tbinvoice` where `id_produk`='$id_produk' and `tanggal`='$tanggal'";

$jumq=rand(10,200);//getJum($conn,$sqlq)+0;

$no++;

$gab.="$jumq,";

}//$i

//$gab.=substr($gab,0,strlen($gab)-1);

$gab.="],";

}//j

$gab=substr($gab,0,strlen($gab)-1);

$gab=str_replace(",]","]",$gab);

//echo $gab;

?>




    <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', 'Produk');

  <?php

  for ($i=0;$i<$jb;$i++){

  $NP=$arP[$i];

  ?>

      data.addColumn('number', '<?php echo $NP;?>');

<?php

  }

  ?>

      data.addRows([<?php echo $gab;?>]);


  

      var options = {

        chart: {

          title: 'Box Office Earnings in First Two Weeks of Opening',

          subtitle: 'in millions of dollars (USD)'

        },

        width: 1200,

        height: 500,

        axes: {

          x: {

            0: {side: 'top'}

          }

        }

      };


      var chart = new google.charts.Line(document.getElementById('line_top_x'+itr.toString()));

 


      chart.draw(data, google.charts.Line.convertOptions(options));

  itr=itr+1;

  alert(itr);

    }

  </script>


  <div id="line_top_x<?php echo $itr;?>"></div>


<hr>

<?php

}

?>

</html>


SBB adalah Sumber aslinya:

<html>

<head>

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <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', 'Day');

      data.addColumn('number', 'Guardians of the Galaxy');

      data.addColumn('number', 'The Avengers');

      data.addColumn('number', 'Transformers: Age of Extinction');


      data.addRows([

        [1,  37.8, 80.8, 41.8],

        [2,  30.9, 69.5, 32.4],

        [3,  25.4,   57, 25.7],

        [4,  11.7, 18.8, 10.5],

        [5,  11.9, 17.6, 10.4],

        [6,   8.8, 13.6,  7.7],

        [7,   7.6, 12.3,  9.6],

        [8,  12.3, 29.2, 10.6],

        [9,  16.9, 42.9, 14.8],

        [10, 12.8, 30.9, 11.6],

        [11,  5.3,  7.9,  4.7],

        [12,  6.6,  8.4,  5.2],

        [13,  4.8,  6.3,  3.6],

        [14,  4.2,  6.2,  3.4]

      ]);


      var options = {

        chart: {

          title: 'Box Office Earnings in First Two Weeks of Opening',

          subtitle: 'in millions of dollars (USD)'

        },

        width: 900,

        height: 500,

        axes: {

          x: {

            0: {side: 'top'}

          }

        }

      };


      var chart = new google.charts.Line(document.getElementById('line_top_x'));


      chart.draw(data, google.charts.Line.convertOptions(options));

    }

  </script>

</head>

<body>

  <div id="line_top_x"></div>

</body>

</html>






Tidak ada komentar:

Posting Komentar

global_priv WARNING Selalu

 Jika muncul pesan kesalahan: Warning in .\libraries\classes\Dbal\DbiMysqli.php#209  mysqli::query(): (HY000/1034): Index for table 'glo...