sourcecode

<?php
$server = "localhost";
$username = "root";
$password = "";
$database = "jual";
mysql_connect($server,$username,$password) or die("Koneksi gagal");
mysql_select_db($database) or die("Database tidak bisa dibuka");


$tahun2016      = mysql_query("SELECT JUMLAH from tahun16 WHERE ID='0004'");
$tahun2017      = mysql_query("SELECT JUMLAH from tahun17 WHERE ID='0004'");
$tahun2018      = mysql_query("SELECT JUMLAH from tahun18 WHERE ID='0004'");

 ?>

<html>
  <head>
    <meta charset="utf-8">
    <title>Demo Grafik Garis</title>


    <script src="js/Chart.js"></script>
    <style type="text/css">
            .container {
                width: 50%;
                margin: 15px auto;
            }
    </style>
  </head>
  <body>

    <div class="container">
            <canvas id="demobar" width="100" height="100"></canvas>
    </div>

      	<script  type="text/javascript">

    	  var ctx = document.getElementById("demobar").getContext("2d");
    	  var data = {

			  <?

			  ?>
    	            labels: ["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember" ],
    	            datasets: [
    	            //kuning
					{
    	              label: "Tahun 2016",
                    fill: false,
                    lineTension: 0.1,
                    backgroundColor: "rgba(255,0,0, 1)",
                    borderColor: "rgba(255,0,0, 1)",
                    pointHoverBackgroundColor: "rgba(255,0,0, 1)",
						        pointHoverBorderColor: "rgba(255,0,0, 1)",
    	              data: [<?php while ($p = mysql_fetch_array($tahun2016)) { echo '"' . $p['JUMLAH'] . '",';}?>]
    	            },

					//*hijauuu
                  {
    	              label: "Tahun 2017",
                    fill: false,
                    lineTension: 0.1,
                    backgroundColor: "rgba(0,255,0, 1.0)",
                    borderColor: "rgba(0,255,0, 1.0)",
                    pointHoverBackgroundColor: "rgba(0,255,0, 1.0)",
						        pointHoverBorderColor: "rgba(0,255,0, 1.0)",
    	              data: [<?php while ($p = mysql_fetch_array($tahun2017)) { echo '"' . $p['JUMLAH'] . '",';}?>]
    	            },

					//biruu
					{
    	              label: "Tahun 2018",
                    fill: false,
                    lineTension: 0.1,
                    backgroundColor: "rgba(59, 100, 222, 1)",
                    borderColor: "rgba(59, 100, 222, 1)",
                    pointHoverBackgroundColor: "rgba(59, 100, 222, 1)",
						        pointHoverBorderColor: "rgba(59, 100, 222, 1)",
    	              data: [<?php while ($p = mysql_fetch_array($tahun2018)) { echo '"' . $p['JUMLAH'] . '",';}?>]
    	            },
    	            ]
    	            };

    	  var myBarChart = new Chart(ctx, {
    	            type: 'line',
    	            data: data,
    	            options: {
    	            barValueSpacing: 20,
    	            scales: {
    	              yAxes: [{
    	                  ticks: {
    	                      min: 0,
    	                  }
    	              }],
    	              xAxes: [{
    	                          gridLines: {
    	                              color: "rgba(0, 0, 0, 0)",
    	                          }
    	                      }]
    	              }
    	          }
    	        });
    	</script>

  </body>
</html>