ribbon iwa

Membuat Grafik Unik Dengan amCharts Menggunakan PHP MySQL

Kembali lagi dengan kami, kali ini kami akan share bagaimana membuat grafik unik dengan amchart menggunakan Php MySQL.

Tetapi sebelum melangkah terlalu jauh kalian harus mengetahui sejarah dan apa itu amCharts.

amCharts adalah perusahaan yang berbasis di Vilnius, Lithuania. Awal amCharts dan amMap adalah pada tahun 2004 ketika versi pertama dari amMap telah dibuat. Antanas Marcelionis bekerja sebagai manajer di perusahaan pengembangan web dan, sebagai penggemar peta dan perjalanan, ingin memiliki alat untuk bekerja seperti pin-map untuknya. Jadi dia membuat alat ini di waktu luangnya. Pada tahun 2006 Antanas meninggalkan pekerjaannya tanpa tahu apa yang akan dia lakukan selanjutnya. Dengan bantuan beberapa teman ia memperdalam pengetahuan pemrogramannya (pemrograman hanya hobi karena ia tahu Dasar pada Sinclair ZX Spectrum yang legendaris), dan suatu hari ia memutuskan untuk membuat diagram lingkaran. Butuh beberapa bulan untuk merilis versi pertama bagan pai.

amCharts merupakan salah satu grafik yang kami sangat rekomendasikan, salah satunya karena amCharts 100% responsive dan kita bisa dengan mudah mengedit style, layout, warna dan animasi.

amCharts menyediakan  jenis chart atau  grafik :

1. JavaScript Charts
2. JavaScript Stock Chart
3. JavaScript Maps

Semua jenis chart di atas mudah digunakan. Tetapi di antara tiga chart di atas disini kami menggunakan JavaScript Charts. Kami ingin mengatakan bahwa setelah kami membuka dan melihat demo dari amCharts di atas kami melihat ada salah satu chart yang sangat unik yaitu column chart yang mempunyai gambar di atasnya, untuk lebih dekatnya lihat gambar chart dibawah ini.



Langsung saja kita langsung menuju ke tutorialnya, pertama buat database dengan nama amchart, kemudian masukkan struktur database dibawah ini.

 -- phpMyAdmin SQL Dump
-- version 4.8.3
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Waktu pembuatan: 16 Nov 2018 pada 06.55
-- Versi server: 10.1.36-MariaDB
-- Versi PHP: 7.2.10

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `anychart`
--

-- --------------------------------------------------------

--
-- Struktur dari tabel `tblcomplaints`
--

CREATE TABLE `tblcomplaints` (
  `complaintNumber` int(11) NOT NULL,
  `facilityName` varchar(50) NOT NULL,
  `buildingName` varchar(50) NOT NULL,
  `regDate` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `status` varchar(25) DEFAULT NULL,
  `lastUpdationDate` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00' ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data untuk tabel `tblcomplaints`
--

INSERT INTO `tblcomplaints` (`complaintNumber`, `facilityName`, `buildingName`, `regDate`, `status`, `lastUpdationDate`) VALUES
(3, 'Platform', 'Campus Building', '2018-01-21 04:41:41', 'closed', '2018-05-24 04:43:28'),
(4, 'Platform', 'Campus Building', '2018-01-21 04:41:41', 'in process', '2018-05-24 16:01:23'),
(5, 'Platform', 'Campus Building', '2018-01-21 04:41:41', 'in process', '2018-06-10 10:55:37'),
(6, 'Platform', 'Campus Building', '2018-01-21 04:41:41', NULL, '0000-00-00 00:00:00'),
(7, 'Platform', 'Campus Building', '2018-01-21 04:41:41', 'in process', '2018-05-23 05:25:17'),
(8, 'Platform', 'Campus Building', '2018-01-21 04:41:41', NULL, '0000-00-00 00:00:00'),
(9, 'Platform', 'Campus Building', '2018-01-21 04:41:41', NULL, '0000-00-00 00:00:00'),
(10, 'Platform', 'Campus Building', '2018-01-21 04:41:41', NULL, '0000-00-00 00:00:00'),
(11, 'Platform', 'Campus Building', '2018-02-21 04:41:41', NULL, '0000-00-00 00:00:00'),
(12, 'Platform', 'Campus Building', '2018-02-21 04:41:41', 'in process', '2018-05-23 05:26:05'),
(13, 'Platform', 'Campus Building', '2018-02-21 04:41:41', 'in process', '2018-05-24 04:49:34'),
(14, 'Platform', 'Campus Building', '2018-02-21 04:41:41', NULL, '0000-00-00 00:00:00'),
(15, 'Platform', 'Campus Building', '2018-02-21 04:41:41', NULL, '0000-00-00 00:00:00'),
(16, 'Platform', 'Campus Building', '2018-02-21 04:41:41', 'in process', '2018-06-04 20:28:52'),
(17, 'Platform', 'Campus Building', '2018-02-21 04:41:41', NULL, '0000-00-00 00:00:00'),
(18, 'Platform', 'Campus Building', '2018-02-21 04:41:41', 'in process', '2018-06-10 01:27:33'),
(19, 'Platform', 'Campus Building', '2018-02-21 04:41:41', NULL, '0000-00-00 00:00:00'),
(20, 'Platform', 'Campus Building', '2018-02-21 04:41:41', 'closed', '2018-06-10 10:56:37'),
(21, 'Platform', 'Campus Building', '2018-03-21 04:41:41', NULL, '0000-00-00 00:00:00'),
(22, 'Platform', 'Campus Building', '2018-03-21 04:41:41', NULL, '0000-00-00 00:00:00'),
(24, 'Platform', 'Campus Building', '2018-03-21 04:41:41', NULL, '0000-00-00 00:00:00'),
(25, 'Platform', 'Campus Building', '2018-03-21 04:41:41', NULL, '0000-00-00 00:00:00'),
(26, 'Platform', 'Campus Building', '2018-03-21 04:41:41', NULL, '0000-00-00 00:00:00'),
(27, 'Platform', 'Campus Building', '2018-03-21 04:41:41', NULL, '0000-00-00 00:00:00'),
(28, 'Platform', 'Campus Building', '2018-03-21 04:41:41', NULL, '0000-00-00 00:00:00'),
(29, 'Platform', 'Campus Building', '2018-03-21 04:41:41', NULL, '0000-00-00 00:00:00'),
(30, 'Platform', 'Campus Building', '2018-03-21 04:41:41', NULL, '0000-00-00 00:00:00'),
(31, 'Platform', 'Campus Building', '2018-04-10 04:41:41', NULL, '0000-00-00 00:00:00'),
(32, 'Platform', 'Campus Building', '2018-04-10 04:41:41', NULL, '0000-00-00 00:00:00'),
(33, 'Platform', 'Campus Building', '2018-04-10 04:41:41', 'in process', '2018-05-24 04:50:26'),
(34, 'Platform', 'Campus Building', '2018-04-10 04:41:41', NULL, '0000-00-00 00:00:00'),
(35, 'Platform', 'Campus Building', '2018-04-10 04:41:41', NULL, '0000-00-00 00:00:00'),
(36, 'Platform', 'Campus Building', '2018-04-10 04:41:41', NULL, '0000-00-00 00:00:00'),
(37, 'Platform', 'Campus Building', '2018-04-10 04:41:41', NULL, '0000-00-00 00:00:00'),
(38, 'Platform', 'Campus Building', '2018-04-10 04:41:41', NULL, '0000-00-00 00:00:00'),
(39, 'Platform', 'Campus Building', '2018-04-10 04:41:41', NULL, '0000-00-00 00:00:00'),
(40, 'Platform', 'Campus Building', '2018-04-10 04:41:41', NULL, '0000-00-00 00:00:00'),
(41, 'Platform', 'Campus Building', '2018-04-10 04:41:41', NULL, '0000-00-00 00:00:00'),
(42, 'Platform', 'Campus Building', '2018-04-10 04:41:41', NULL, '0000-00-00 00:00:00'),
(43, 'Platform', 'Campus Building', '2018-04-10 04:41:41', NULL, '0000-00-00 00:00:00'),
(44, 'Platform', 'Campus Building', '2018-04-10 04:41:41', NULL, '0000-00-00 00:00:00'),
(45, 'Platform', 'Campus Building', '2018-04-10 04:41:41', NULL, '0000-00-00 00:00:00'),
(46, 'Platform', 'Campus Building', '2018-04-10 04:41:41', NULL, '0000-00-00 00:00:00'),
(47, 'Platform', 'Campus Building', '2018-05-20 04:41:41', NULL, '0000-00-00 00:00:00'),
(48, 'Platform', 'Campus Building', '2018-05-20 04:41:41', NULL, '0000-00-00 00:00:00'),
(49, 'Platform', 'Campus Building', '2018-05-20 04:41:41', 'in process', '2018-05-24 04:50:52'),
(50, 'Platform', 'Campus Building', '2018-05-20 04:41:41', NULL, '0000-00-00 00:00:00'),
(51, 'Platform', 'Campus Building', '2018-05-20 04:41:41', NULL, '0000-00-00 00:00:00'),
(52, 'Platform', 'Campus Building', '2018-05-20 04:41:41', NULL, '0000-00-00 00:00:00'),
(53, 'Platform', 'Campus Building', '2018-05-20 04:41:41', NULL, '0000-00-00 00:00:00'),
(54, 'Platform', 'Campus Building', '2018-05-20 04:41:41', 'in process', '2018-07-03 13:32:25'),
(55, 'Platform', 'Campus Building', '2018-05-20 04:41:41', NULL, '0000-00-00 00:00:00'),
(56, 'Platform', 'Campus Building', '2018-05-20 04:41:41', NULL, '0000-00-00 00:00:00'),
(57, 'Platform', 'Campus Building', '2018-05-20 04:41:41', NULL, '0000-00-00 00:00:00'),
(58, 'Platform', 'Campus Building', '2018-05-20 04:41:41', NULL, '0000-00-00 00:00:00'),
(59, 'Platform', 'Campus Building', '2018-05-20 04:41:41', NULL, '0000-00-00 00:00:00'),
(60, 'Platform', 'Campus Building', '2018-05-20 04:41:41', NULL, '0000-00-00 00:00:00'),
(61, 'Platform', 'Campus Building', '2018-05-20 04:41:41', NULL, '0000-00-00 00:00:00'),
(62, 'Platform', 'Campus Building', '2018-05-20 04:41:41', NULL, '0000-00-00 00:00:00'),
(63, 'Window', 'Campus Building', '2018-05-24 04:52:08', NULL, '0000-00-00 00:00:00'),
(64, 'Window', 'Campus Building', '2018-05-26 17:09:55', NULL, '0000-00-00 00:00:00'),
(65, 'Window', 'Rectorat Building', '2018-05-26 17:27:34', NULL, '0000-00-00 00:00:00'),
(66, 'Proyektor', 'Campus Building', '2018-05-26 17:27:55', NULL, '0000-00-00 00:00:00'),
(67, 'Platform', 'Campus Building', '2018-05-31 21:41:41', NULL, '0000-00-00 00:00:00'),
(68, 'Platform', 'Campus Building', '2018-05-31 21:41:41', NULL, '0000-00-00 00:00:00'),
(69, 'Platform', 'Campus Building', '2018-05-31 21:41:41', NULL, '0000-00-00 00:00:00'),
(70, 'Platform', 'Campus Building', '2018-06-01 21:41:41', NULL, '0000-00-00 00:00:00'),
(71, 'Platform', 'Campus Building', '2018-06-01 21:41:41', NULL, '0000-00-00 00:00:00'),
(72, 'Platform', 'Campus Building', '2018-09-19 21:41:41', 'in process', '2018-11-16 05:51:42'),
(73, 'Platform', 'Campus Building', '2018-06-01 21:41:41', NULL, '0000-00-00 00:00:00'),
(74, 'Platform', 'Campus Building', '2018-06-01 21:41:41', NULL, '0000-00-00 00:00:00'),
(75, 'Platform', 'Campus Building', '2018-06-01 21:41:41', NULL, '0000-00-00 00:00:00'),
(76, 'Platform', 'Campus Building', '2018-06-01 21:41:41', NULL, '0000-00-00 00:00:00'),
(77, 'Platform', 'Campus Building', '2018-06-01 21:41:41', NULL, '0000-00-00 00:00:00'),
(78, 'Platform', 'Campus Building', '2018-06-01 21:41:41', NULL, '0000-00-00 00:00:00'),
(79, 'Platform', 'Campus Building', '2018-06-01 21:41:41', NULL, '0000-00-00 00:00:00'),
(80, 'Platform', 'Campus Building', '2018-06-01 21:41:41', NULL, '0000-00-00 00:00:00'),
(81, 'Platform', 'Campus Building', '2018-06-01 21:41:41', NULL, '0000-00-00 00:00:00'),
(82, 'Platform', 'Campus Building', '2018-06-01 21:41:41', NULL, '0000-00-00 00:00:00'),
(83, 'Platform', 'Campus Building', '2018-09-11 21:41:41', NULL, '2018-11-16 05:51:12'),
(84, 'Platform', 'Campus Building', '2018-06-01 21:41:41', NULL, '0000-00-00 00:00:00'),
(85, 'Platform', 'Campus Building', '2018-06-01 21:41:41', NULL, '0000-00-00 00:00:00'),
(86, 'Window', 'Campus Building', '2018-06-02 21:52:08', NULL, '0000-00-00 00:00:00'),
(87, 'Window', 'Campus Building', '2018-06-04 10:09:55', NULL, '0000-00-00 00:00:00'),
(88, 'Window', 'Rectorat Building', '2018-06-26 10:27:05', NULL, '0000-00-00 00:00:00'),
(89, 'Proyektor', 'Campus Building', '2018-06-05 10:27:55', NULL, '0000-00-00 00:00:00'),
(91, 'Platform', 'Campus Building', '2018-06-13 02:13:13', NULL, '0000-00-00 00:00:00'),
(92, 'Window', 'Campus Building', '2018-06-13 03:11:12', NULL, '0000-00-00 00:00:00'),
(93, 'Select Facility Name', 'Select Building Name', '2018-06-13 03:11:23', NULL, '0000-00-00 00:00:00'),
(94, 'Amplifier', 'Campus Building', '2018-06-13 03:11:34', NULL, '0000-00-00 00:00:00'),
(95, 'Proyektor', 'Rectorat Building', '2018-06-13 03:13:30', NULL, '0000-00-00 00:00:00'),
(96, 'Proyektor', 'Rectorat Building', '2018-06-13 03:17:07', NULL, '0000-00-00 00:00:00'),
(97, 'Window', 'Campus Building', '2018-06-20 14:52:08', NULL, '0000-00-00 00:00:00'),
(98, 'Window', 'Campus Building', '2018-06-21 03:09:55', NULL, '0000-00-00 00:00:00'),
(99, 'Window', 'Rectorat Building', '2018-11-02 03:27:05', NULL, '2018-11-16 05:53:02'),
(100, 'Proyektor', 'Campus Building', '2018-11-12 03:27:55', NULL, '2018-11-16 05:53:02'),
(101, 'Platform', 'Campus Building', '2018-11-04 19:13:13', NULL, '2018-11-16 05:53:02'),
(102, 'Window', 'Campus Building', '2018-06-24 20:11:12', NULL, '0000-00-00 00:00:00'),
(103, 'Select Facility Name', 'Select Building Name', '2018-06-24 20:11:23', NULL, '0000-00-00 00:00:00'),
(104, 'Amplifier', 'Campus Building', '2018-06-24 20:11:34', NULL, '0000-00-00 00:00:00'),
(105, 'Proyektor', 'Rectorat Building', '2018-06-25 20:13:30', NULL, '0000-00-00 00:00:00'),
(106, 'Proyektor', 'Rectorat Building', '2018-06-25 20:17:07', NULL, '0000-00-00 00:00:00'),
(107, 'Window', 'Campus Building', '2018-06-20 14:52:08', NULL, '0000-00-00 00:00:00'),
(108, 'Window', 'Campus Building', '2018-06-21 03:09:55', NULL, '0000-00-00 00:00:00'),
(109, 'Window', 'Rectorat Building', '2018-06-22 03:27:05', NULL, '0000-00-00 00:00:00'),
(110, 'Proyektor', 'Campus Building', '2018-06-23 03:27:55', NULL, '0000-00-00 00:00:00'),
(111, 'Platform', 'Campus Building', '2018-06-23 19:13:13', NULL, '0000-00-00 00:00:00'),
(112, 'Window', 'Campus Building', '2018-09-04 20:11:12', NULL, '2018-11-16 05:50:43'),
(113, 'Select Facility Name', 'Select Building Name', '2018-06-24 20:11:23', NULL, '0000-00-00 00:00:00'),
(114, 'Amplifier', 'Campus Building', '2018-06-24 20:11:34', NULL, '0000-00-00 00:00:00'),
(115, 'Proyektor', 'Rectorat Building', '2018-06-25 20:13:30', NULL, '0000-00-00 00:00:00'),
(116, 'Proyektor', 'Rectorat Building', '2018-08-31 20:17:07', NULL, '2018-11-16 05:50:13'),
(117, 'Platform', 'Campus Building', '2018-07-01 14:41:41', 'in process', '2018-07-23 14:50:52'),
(118, 'Platform', 'Campus Building', '2018-07-01 14:41:41', 'in process', '2018-07-23 14:50:52'),
(119, 'Platform', 'Campus Building', '2018-07-01 14:41:41', 'in process', '2018-07-23 14:50:52'),
(120, 'Platform', 'Campus Building', '2018-07-01 14:41:41', 'in process', '2018-07-23 14:50:52'),
(121, 'Platform', 'Campus Building', '2018-07-01 14:41:41', 'in process', '2018-07-23 14:50:52'),
(122, 'Platform', 'Campus Building', '2018-08-01 14:41:41', 'closed', '2018-08-23 14:50:52'),
(123, 'Platform', 'Campus Building', '2018-08-01 14:41:41', 'closed', '2018-08-23 14:50:52'),
(124, 'Platform', 'Campus Building', '2018-08-01 14:41:41', 'closed', '2018-08-23 14:50:52'),
(125, 'Platform', 'Campus Building', '2018-08-01 14:41:41', 'closed', '2018-08-23 14:50:52'),
(126, 'Platform', 'Campus Building', '2018-08-01 14:41:41', 'closed', '2018-08-23 14:50:52'),
(127, 'Platform', 'Campus Building', '2018-10-01 14:41:41', 'closed', '2018-10-23 14:50:52'),
(128, 'Platform', 'Campus Building', '2018-10-01 14:41:41', 'closed', '2018-10-23 14:50:52'),
(129, 'Platform', 'Campus Building', '2018-10-01 14:41:41', 'closed', '2018-10-23 14:50:52'),
(130, 'Platform', 'Campus Building', '2018-10-01 14:41:41', 'closed', '2018-10-23 14:50:52'),
(131, 'Platform', 'Campus Building', '2018-10-01 14:41:41', 'closed', '2018-10-23 14:50:52');

--
-- Indexes for dumped tables
--

--
-- Indeks untuk tabel `tblcomplaints`
--
ALTER TABLE `tblcomplaints`
  ADD PRIMARY KEY (`complaintNumber`);

--
-- AUTO_INCREMENT untuk tabel yang dibuang
--

--
-- AUTO_INCREMENT untuk tabel `tblcomplaints`
--
ALTER TABLE `tblcomplaints`
  MODIFY `complaintNumber` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=132;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
 

Kedua buat file dengan nama config.php file ini berisi script untuk koneksi kedalam databse.

 <?php
// conection
define('DB_SERVER','localhost');
define('DB_USER','root');
define('DB_PASS' ,'');
define('DB_NAME', 'amchart');
$con = mysqli_connect(DB_SERVER,DB_USER,DB_PASS,DB_NAME);
// Check connection
if (mysqli_connect_errno())
{
 echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
?> 

Ketiga dan terakhir buat file dengan index.php file ini berfungsi sebagai form untuk menampilkan chart dari databse di atas.

 <?php session_start();
include('config.php');
?>
<!DOCTYPE html>
<html>
<head>
 <title>AnyCharts</title>
 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
 <script src="bootstrap/js/bootstrap.min.js"></script>
 
<!-- Resources -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<!-- Styles -->
<style>
#chartdiv {
  width : 100%;
  height  : 500px;
}               
</style>

<?php
$tahun=date("Y");
$total = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints where YEAR(regDate)='$tahun'");
$data = mysqli_fetch_row($total);
$totalall = $data[0];

$hasil1 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='01' and YEAR(regDate)='$tahun'");
$data1 = mysqli_fetch_row($hasil1);
$jumlah1 = $data1[0];


$hasil2 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='02' and YEAR(regDate)='$tahun'");
$data2 = mysqli_fetch_row($hasil2);
$jumlah2 = $data2[0];


$hasil3 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='03' and YEAR(regDate)='$tahun'");
$data3 = mysqli_fetch_row($hasil3);
$jumlah3 = $data3[0];


$hasil4 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='04' and YEAR(regDate)='$tahun'");
$data4 = mysqli_fetch_row($hasil4);
$jumlah4 = $data4[0];


$hasil5 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='05' and YEAR(regDate)='$tahun'");
$data5 = mysqli_fetch_row($hasil5);
$jumlah5 = $data5[0];


$hasil6 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='06' and YEAR(regDate)='$tahun'");
$data6 = mysqli_fetch_row($hasil6);
$jumlah6 = $data6[0];


$hasil7 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='07' and YEAR(regDate)='$tahun'");
$data7 = mysqli_fetch_row($hasil7);
$jumlah7 = $data7[0];


$hasil8 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='08' and YEAR(regDate)='$tahun'");
$data8 = mysqli_fetch_row($hasil8);
$jumlah8 = $data8[0];


$hasil9 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='09' and YEAR(regDate)='$tahun'");
$data9 = mysqli_fetch_row($hasil9);
$jumlah9 = $data9[0];


$hasil10 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='10' and YEAR(regDate)='$tahun'");
$data10 = mysqli_fetch_row($hasil10);
$jumlah10 = $data10[0];

$hasil11 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='11' and YEAR(regDate)='$tahun'");
$data11 = mysqli_fetch_row($hasil11);
$jumlah11 = $data11[0];


$hasil12 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='12' and YEAR(regDate)='$tahun'");
$data12 = mysqli_fetch_row($hasil12);
$jumlah12 = $data12[0];

?>

</head>
<body>
 <nav class="navbar navbar-default navbar-static-top">
  <div class="container-fluid">
   <div class="navbar-header">
    <a class="navbar-brand" href="https://www.tutorialswb.com/">TutorialsWB</a>
    <ul class="nav navbar-nav">
     <li class="active"><a href="index.html">Home</a></li>
    </ul>
   </div>
  </div>
 </nav>
 <div class="container">
  <div class="row">
      <div id="chartdiv"></div>

    </div>
  </div>



<!-- Chart code -->
<script>
var chart = AmCharts.makeChart("chartdiv",
{
    "type": "serial",
    "theme": "light",
    "dataProvider": [{
        "name": "JANUARI",
        "points": <?php echo $jumlah1 = $data1[0]; ?>,
        "color": "#AF601A",
        "bullet": "https://www.amcharts.com/lib/images/faces/A04.png"
    }, {
        "name": "FEBRUARI",
        "points": <?php echo $jumlah2 = $data2[0]; ?>,
        "color": "#FADBD8",
        "bullet": "https://www.amcharts.com/lib/images/faces/C02.png"
    }, {
        "name": "MARET",
        "points": <?php echo $jumlah3 = $data3[0]; ?>,
        "color": "#D2B4DE",
        "bullet": "https://www.amcharts.com/lib/images/faces/D02.png"
    }, {
        "name": "APRIL",
        "points": <?php echo $jumlah4 = $data4[0]; ?>,
        "color": "#BB8FCE",
        "bullet": "https://www.amcharts.com/lib/images/faces/D02.png"
    }, {
        "name": "MEI",
        "points": <?php echo $jumlah5 = $data5[0]; ?>,
        "color": "#BA4A00",
        "bullet": "https://www.amcharts.com/lib/images/faces/D02.png"
    }, {
        "name": "JUNI",
        "points": <?php echo $jumlah6 = $data6[0]; ?>,
        "color": "#3498DB",
        "bullet": "https://www.amcharts.com/lib/images/faces/D02.png"
    }, {
        "name": "JULI",
        "points": <?php echo $jumlah7 = $data7[0]; ?>,
        "color": "#17A589",
        "bullet": "https://www.amcharts.com/lib/images/faces/D02.png"
    }, {
        "name": "AGUSTUS",
        "points": <?php echo $jumlah8 = $data8[0]; ?>,
        "color": "#117A65",
        "bullet": "https://www.amcharts.com/lib/images/faces/D02.png"
    }, {
        "name": "SEPTEMBER",
        "points": <?php echo $jumlah9 = $data9[0]; ?>,
        "color": "#196F3D",
        "bullet": "https://www.amcharts.com/lib/images/faces/D02.png"
    }, {
        "name": "OKTOBER",
        "points": <?php echo $jumlah10 = $data10[0]; ?>,
        "color": "#186A3B",
        "bullet": "https://www.amcharts.com/lib/images/faces/D02.png"
    }, {
        "name": "NOVEMBER",
        "points": <?php echo $jumlah11 = $data11[0]; ?>,
        "color": "#7D6608",
        "bullet": "https://www.amcharts.com/lib/images/faces/D02.png"
    }, {
        "name": "DECEMBER",
        "points": <?php echo $jumlah12 = $data12[0]; ?>,
        "color": "#9C640C",
        "bullet": "https://www.amcharts.com/lib/images/faces/E01.png"
    }],
    "valueAxes": [{
        "maximum": 60,
        "minimum": 0,
        "axisAlpha": 0,
        "dashLength": 4,
        "position": "left"
    }],
    "startDuration": 1,
    "graphs": [{
        "balloonText": "<span style='font-size:13px;'>[[category]]: <b>[[value]]</b></span>",
        "bulletOffset": 10,
        "bulletSize": 52,
        "colorField": "color",
        "cornerRadiusTop": 8,
        "customBulletField": "bullet",
        "fillAlphas": 0.8,
        "lineAlpha": 0,
        "type": "column",
        "valueField": "points"
    }],
    "marginTop": 0,
    "marginRight": 0,
    "marginLeft": 0,
    "marginBottom": 0,
    "autoMargins": false,
    "categoryField": "name",
    "categoryAxis": {
        "axisAlpha": 0,
        "gridAlpha": 0,
        "inside": true,
        "tickLength": 0
    },
    "export": {
      "enabled": true
     }
});
</script>

</body>
</html> 

Sekian share kali ini semoga apa yang kami share bermanfaat bagi anda, kalian bisa langsung mendownload filenya dibawah ini.


Jika kalian belum paham dengan tutorial di atas silahkan tinggalkan komentar dibawah kami akan selalu membantu anda.


SUBSCRIBE TO OUR NEWSLETTER

close