Grafik pie chart adalah salah satu jenis grafik yang digunakan untuk membandingkan statistik. Diagram lingkaran atau pie chart disebut demikian karena bentuknya adalah lingkaran dengan potongan - potongan yang menyerupai kue pie. biasanya di gunakan untuk menyampikan informasi kuantitas suatu kategori tertentu.
Download Sebuah javascript chart grafik
Buat Sebuah Database.
Open xampp.
Open News Sublime text.
- grafik_penjualan_pie.php
- konfigurasi.php
Masukan Script Dibawah ini :
- <?php
- //defined('ROOT') or die('');
- define('db_host','localhost');
- define('db_user','root');
- define('db_pass','');
- define('db_name','penjualan');
- mysql_connect(db_host,db_user,db_pass);
- mysql_select_db(db_name);
- ?>
kemudian simpan dengan nama konfigurasi.php
- <?php
- include('konfigurasi.php');
- $jumlah = mysql_query( "SELECT jumlah FROM tbl_barang order by id asc");
- $nama_barang = mysql_query( "SELECT nama_barang FROM tbl_barang order by id asc");
- ?>
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>Grafik Penjualan (Doughnut)</title>
- <script src="js/Chart.js"></script>
- <style type="text/css">
- .container {
- width: 40%;
- margin: 15px auto;
- }
- </style>
- </head>
- <body>
- <div class="container">
- <canvas id="doughnutchart" width="100" height="100"></canvas>
- </div>
- </body>
- </html>
- <script type="text/javascript">
- var ctx = document.getElementById("doughnutchart").getContext("2d");
- var data = {
- labels: [<?php while ($p = mysql_fetch_array($nama_barang)) { echo '"' . $p['nama_barang'] . '",';}?>],
- datasets: [
- {
- label: "Penjualan Barang",
- data: [<?php while ($p = mysql_fetch_array($jumlah)) { echo '"' . $p['jumlah'] . '",';}?>],
- backgroundColor: [
- '#29B0D0',
- '#2A516E',
- '#F07124',
- '#CBE0E3',
- '#979193'
- ]
- }
- ]
- };
- var mydoughnutchart = new Chart(ctx, {
- type: 'doughnut',
- data: data,
- options: {
- responsive: true
- }
- });
- </script>
