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.

//lh3.googleusercontent.com/-K5UKWzgJhmU/AAAAAAAAAAI/AAAAAAAACdI/CN3nwiBZsGE/s512-c/photo.jpg

8 Pustaka Grafik JavaScript Terbaik Untuk Aplikasi Anda

Selamat pagi bagaimana kabar anda hari ini, kali ini kami akan share 8 library grafik JavaScript terbaik dan sangat recommended untuk digunakan pada aplikasi anda. Kami mengkategorikan terbaik dengan kemudahan menggunakan dan mengimplementasikan grafik ini dalam peoject anda.

Di antaranya librray grafik yang akan kita bahas, kami telah menggunakan dan mengimplementasikannya kedalam project kami. Grafik yang kmai telah gunakan adalah :


Di antaranya grafik yang telah kami coba implementasikan dalam project kami semuanya mudah digunakan, mudah dimodifikasi dan tentunya responsive pada project anda.

Berikut 8 grafik chart yang telah kami pilih dan yang terbaik di antara banyak grafik (chart) yang ada, tentunya kami sangat merekomendasikan anda untuk menggunakannya.

1. Google chart
2. Highcharts
3. AnyChart
4. ApexCharts
5. Chart.js
6. Chartist
7. Fusionchart
8. Amcharts


Kami akan menjelaskan satu per satu dan akan menampilkan demo satu per satu dari library grafik di atas.


Google Charts menyediakan cara sempurna untuk memvisualisasikan data di situs web Anda. Dari bagan garis sederhana hingga peta hierarki pohon yang rumit, galeri bagan menyediakan banyak jenis bagan siap digunakan.

Cara paling umum untuk menggunakan Google Charts adalah dengan JavaScript sederhana yang Anda tanamkan di halaman web Anda. Anda memuat beberapa pustaka Google Chart, daftar data yang akan dipetakan, pilih opsi untuk menyesuaikan bagan Anda, dan akhirnya buat objek bagan dengan id yang Anda pilih. Kemudian, kemudian di halaman web, Anda membuat <div> dengan id tersebut untuk menampilkan Google Chart.

Contoh - LineCharts

See the Pen Google charts by arman (@armanbasir) on CodePen.



- HighCharts

Highcharts adalah pustaka grafik JavaScript yang didasarkan pada SVG, dengan fallback ke VML dan kanvas untuk peramban lama. Paket ini juga berisi Highstock, paket charting keuangan, dan Highmap untuk peta geo.

Contoh - Group Column


See the Pen HighCharts by arman (@armanbasir) on CodePen.


- AnyChart

AnyChart adalah solusi berbasis JavaScript (HTML5) fleksibel yang memungkinkan pengembang untuk menanamkan diagram dan dasbor yang interaktif dan hebat ke dalam proyek web, mandiri atau seluler. Apakah Anda perlu meningkatkan situs web Anda dengan pelaporan yang lebih baik, menanamkan dasbor ke sistem lokal dan SaaS Anda, atau membangun keseluruhan produk baru, AnyChart mencakup semua kebutuhan visualisasi data Anda.

Contoh - Column Chart


See the Pen Any Charts by arman (@armanbasir) on CodePen.


- ApexCharts

ApexCharts adalah pustaka grafik modern open-source yang membantu pengembang untuk membuat visualisasi interaktif untuk halaman web.

Disini kami akan memberikan contoh dan demo column charts. Column JavaScript, sama seperti grafik batang lainnya menggunakan batang vertikal untuk menampilkan data dan digunakan untuk membandingkan nilai di seluruh kategori. Kategori (atau besarnya) data diwakili oleh kolom dan dapat diberi label di bawah setiap kolom. Tidak seperti histogram, diagram kolom dibuat dengan spasi di antara kolom. Dengan ApexCharts, menjadi layak untuk memiliki label dan anotasi yang diputar pada bagan kolom.

Contoh - Column Charts

See the Pen ApexCharts by arman (@armanbasir) on CodePen.


- Chart.js

Chart.js adalah pustaka JavaScript yang memungkinkan Anda menggambar berbagai jenis bagan dengan menggunakan elemen kanvas HTML5. Karena menggunakan kanvas, Anda harus menyertakan polyfill untuk mendukung browser yang lebih lama.

Contoh - LineChart

See the Pen ChartJS by arman (@armanbasir) on CodePen.


- Chartist

Chartist.js adalah produk dari komunitas yang kecewa dengan kemampuan yang disediakan oleh pustaka grafik lainnya.

Contoh - Bar Column

See the Pen Chartist by arman (@armanbasir) on CodePen.


- FusionCharts

FusionCharts adalah pustaka grafik JavaScript yang menyediakan 95+ bagan dan 1,400+ peta untuk aplikasi web dan seluler Anda. Semua visualisasi bersifat interaktif dan animasi, yang diberikan dalam SVG dan VML (untuk IE 6/7/8).

Paket ini juga berisi FusionWidgets (alat pengukur, grafik real-time), PowerCharts (grafik statistik dan lanjutan), dan FusionMaps (peta geografi choropleth).

Contoh - Column dan BarCharts

See the Pen FusionCharts by arman (@armanbasir) on CodePen.


- 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. Dan kemudian semuanya terjadi hampir seperti di komik strip Dilbert ini.

Grafik pertama ditampilkan dalam beberapa artikel, dan orang mulai menggunakannya. Setelah beberapa bulan, garis & grafik area diperkenalkan. Kolom & bar chart diikuti. amCharts mulai mendapatkan popularitas dan pengakuan. Segera, produk amCharts memasuki jajaran yang paling populer di pasar. Perusahaan terkemuka mulai mengenali amCharts sebagai solusi charting terbaik.

Contoh - Column Chart dengan Gambar

See the Pen Amcharts by arman (@armanbasir) on CodePen.

Sekian share kali ini semoga apa yang kami share bermanfaat bagi anda, jika anda mempunyai chart dan sering anda pakai atau pernah anda gunakan yang belum saya tuliskan di atas silahkan tinggalkan komentar dibawah dan kami akan mengupdate postingan ini.

//lh3.googleusercontent.com/-K5UKWzgJhmU/AAAAAAAAAAI/AAAAAAAACdI/CN3nwiBZsGE/s512-c/photo.jpg

Tutorial Grafik AnyChart Dengan Data Banyak Menggunakan PHP MySQL

Kembali lagi dengan kami, setelah beberapa hari kami kemudian masih membahas mengenai anychart, tetapi kali ini bagaimana menggunakan AnyChart dengan data yang banyak dan beberapa kondisi menggunkaan PHP MySQL.



dfdrTetap sebelum itu kami ingin menjelaskan spesifikasi chart yang akan kami buat dibawah, Berikut spesifikasi sistem yang kami maksud.

Read More:

  1. Membuat Grafik Highcharts Dengan Php MyAdmin Menggunakan Ajax Bootsrap
  2. Cara Menggunakan Google Chart (Line Chart) Pada PHP Part 1
  3. Cara Singkat Menggunakan AnyCharts Pada Website Anda
  4. Membuat Grafik AnyChart Dengan Php MySQL


""Aplikasi yang akan buat dibawah adalah aplikasi dimana kami mempunyia banyak data yang kami simpan kedalam database. Data databse yang kami miliki terdiri dari data dari bulan Januari sampai bulan 10. Pada database terdapat data atau kami menyebutnya data komplaint yang terdiri dari tiga status, yang pertama Not Process Complaint , Inprocess Complaint dan Close Complaint. Nah data yang akan kami panggil kedalam grafik highchart ini adalah data setiap bulannya, dimana setiap satu batang highchart bisa mendeteksi berapa total komplaint yang ada pada bulan tersebut, berapa komplain yang statusnya Not Process Complaint, In Process Complaint dan Closed Complaint, disamping highcharts ini bisa menghitung secara otomatis presentase data disetiap bulannya"".

Langsung saja yang pertama buat databse terlebih dahulu, disini kami membuat database dengan nama anychart kemudian masukan struktur database dibawah ini.

 -- phpMyAdmin SQL Dump
-- version 4.8.3
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Waktu pembuatan: 13 Nov 2018 pada 14.21
-- 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-06-01 21:41:41', 'in process', '2018-05-23 21:50:52'),
(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-06-01 21:41:41', NULL, '0000-00-00 00:00:00'),
(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-06-22 03:27:05', NULL, '0000-00-00 00:00:00'),
(100, 'Proyektor', 'Campus Building', '2018-06-23 03:27:55', NULL, '0000-00-00 00:00:00'),
(101, 'Platform', 'Campus Building', '2018-06-23 19:13:13', NULL, '0000-00-00 00:00:00'),
(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-06-24 20:11:12', NULL, '0000-00-00 00:00:00'),
(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-06-25 20:17:07', NULL, '0000-00-00 00:00:00'),
(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 fil ini berfungsi sebagai koneksi kedalam database.

 <?php
// conection
define('DB_SERVER','localhost');
define('DB_USER','root');
define('DB_PASS' ,'');
define('DB_NAME', 'anychart');
$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 Buat perintah untuk memanggil database, disini kami membuat perintah untuk memanggil jumlah data database per bulannya. kemudian kami membuat perintah untuk memanggil komplaint dengan status not process complaint, in process complaint dan closed complaint.

 <?php
    $status="";
    $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];
    $percent1= $jumlah1 * $totalall /100 ;


    $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];
    $percent2= $jumlah2 * $totalall /100 ;


    $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];
    $percent3= $jumlah3 * $totalall /100 ;


    $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];
    $percent4= $jumlah4 * $totalall /100 ;


    $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];
    $percent5= $jumlah5 * $totalall /100 ;


    $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];
    $percent6= $jumlah6 * $totalall /100 ;


    $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];
    $percent7= $jumlah7 * $totalall /100 ;


    $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];
    $percent8= $jumlah8 * $totalall /100 ;


    $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];
    $percent9= $jumlah9 * $totalall /100 ;


    $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];
    $percent10= $jumlah10 * $totalall /100 ;


    $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];
    $percent11= $jumlah11 * $totalall /100 ;


    $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];
    $percent12= $jumlah12 * $totalall /100 ;

    ?>



    <!--Mulai-->

    <?php
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='01' and YEAR(regDate)='$tahun' and status is null");
    $num0 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="in process"; 
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='01' and YEAR(regDate)='$tahun' and status='$status'");
    $num2 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="closed";                   
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='01' and YEAR(regDate)='$tahun' and status='$status'");
    $num3 = mysqli_num_rows($rt);
    {?>
    <?php } ?>

    <!--End--> 


    <!--Mulai-->

    <?php
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='02' and YEAR(regDate)='$tahun' and status is null");
    $num4 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="in process"; 
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='02' and YEAR(regDate)='$tahun' and status='$status'");
    $num5 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="closed";                   
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='02' and YEAR(regDate)='$tahun' and status='$status'");
    $num6 = mysqli_num_rows($rt);
    {?>
    <?php } ?>

    <!--End--> 


    <!--Mulai-->

    <?php
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='03' and YEAR(regDate)='$tahun' and status is null");
    $num7 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="in process"; 
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='03' and YEAR(regDate)='$tahun' and status='$status'");
    $num8 = mysqli_num_rows($rt);
    {?>
    <?php } ?>



    <?php
    $status="closed";                   
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='03' and YEAR(regDate)='$tahun' and status='$status'");
    $num9 = mysqli_num_rows($rt);
    {?>
    <?php } ?>

    <!--End-->


    <!--Mulai-->

    <?php
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='04' and YEAR(regDate)='$tahun' and status is null");
    $num10 = mysqli_num_rows($rt);
    {?>
    <?php } ?>



    <?php
    $status="in process"; 
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='04' and YEAR(regDate)='$tahun' and status='$status'");
    $num11 = mysqli_num_rows($rt);
    {?>
    <?php } ?>



    <?php
    $status="closed";                   
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='04' and YEAR(regDate)='$tahun' and status='$status'");
    $num12 = mysqli_num_rows($rt);
    {?>
    <?php } ?>

    <!--End-->


    <!--Mulai-->

    <?php
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='05' and YEAR(regDate)='$tahun' and status is null");
    $num13 = mysqli_num_rows($rt);
    {?>
    <?php } ?>



    <?php
    $status="in process"; 
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='05' and YEAR(regDate)='$tahun' and status='$status'");
    $num14 = mysqli_num_rows($rt);
    {?>
    <?php } ?>



    <?php
    $status="closed";                   
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='05' and YEAR(regDate)='$tahun' and status='$status'");
    $num15 = mysqli_num_rows($rt);
    {?>
    <?php } ?>

    <!--End-->



    <!--Mulai-->
    <?php
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='06' and YEAR(regDate)='$tahun' and status is null");
    $num16 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="in process"; 
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='06' and YEAR(regDate)='$tahun' and status='$status'");
    $num17 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="closed";                   
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='06' and YEAR(regDate)='$tahun' and status='$status'");
    $num18 = mysqli_num_rows($rt);
    {?>
    <?php } ?>

    <!--End-->


    <!--Mulai-->

    <?php
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='07' and YEAR(regDate)='$tahun' and status is null");
    $num19 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="in process"; 
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='07' and YEAR(regDate)='$tahun' and status='$status'");
    $num20 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="closed";                   
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='07' and YEAR(regDate)='$tahun' and status='$status'");
    $num21 = mysqli_num_rows($rt);
    {?>
    <?php } ?>

    <!--End-->



    <!--Mulai-->

    <?php
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='08' and YEAR(regDate)='$tahun' and status is null");
    $num22 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="in process"; 
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='08' and YEAR(regDate)='$tahun' and status='$status'");
    $num23 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="closed";                   
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='08' and YEAR(regDate)='$tahun' and status='$status'");
    $num24 = mysqli_num_rows($rt);
    {?>
    <?php } ?>

    <!--End-->



    <!--Mulai-->

    <?php
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='09' and YEAR(regDate)='$tahun' and status is null");
    $num25 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="in process"; 
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='09' and YEAR(regDate)='$tahun' and status='$status'");
    $num26 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="closed";                   
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='09' and YEAR(regDate)='$tahun' and status='$status'");
    $num27 = mysqli_num_rows($rt);
    {?>
    <?php } ?>

    <!--End-->


    <!--Mulai-->

    <?php
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='10' and YEAR(regDate)='$tahun' and status is null");
    $num28 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="in process"; 
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='10' and YEAR(regDate)='$tahun' and status='$status'");
    $num29 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="closed";                   
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='10' and YEAR(regDate)='$tahun' and status='$status'");
    $num30 = mysqli_num_rows($rt);
    {?>
    <?php } ?>

    <!--End-->


    <!--Mulai-->

    <?php
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='11' and YEAR(regDate)='$tahun' and status is null");
    $num31 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="in process"; 
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='11' and YEAR(regDate)='$tahun' and status='$status'");
    $num32 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="closed";                   
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='11' and YEAR(regDate)='$tahun' and status='$status'");
    $num33 = mysqli_num_rows($rt);
    {?>
    <?php } ?>

    <!--End-->


    <!--Mulai-->

    <?php
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='12' and YEAR(regDate)='$tahun' and status is null");
    $num34 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="in process"; 
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='12' and YEAR(regDate)='$tahun' and status='$status'");
    $num35 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="closed";                   
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='12' and YEAR(regDate)='$tahun' and status='$status'");
    $num36 = mysqli_num_rows($rt);
    {?>
    <?php } ?>

    <!--End--> 

Keempat konfigurasi AnyChart dengan PHP, JavaScript untuk memanggil total komplain dan status kompliant.

 <script type="text/javascript">
anychart.onDocumentReady(function() {
  // create data set on our data
  var dataSet = anychart.data.set(getData());

  // map data for the first series
  var seriesData_1 = dataSet.mapAs({
    'x': 0,
    'value': 1
  });

  // map data for the second series
  var seriesData_2 = dataSet.mapAs({
    'x': 0,
    'value': 2
  });

  // map data for the second series
  var seriesData_3 = dataSet.mapAs({
    'x': 0,
    'value': 3
  });

  // map data for the second series
  var seriesData_4 = dataSet.mapAs({
    'x': 0,
    'value': 4
  });

  // create line chart
  var chart = anychart.column();

  // turn on chart animation
  chart.animation(true);

  chart.padding(10);

  // disable Y axis
  chart.yAxis(false);

  // set X axis title
  chart.xAxis()
    .title('Month')
    .stroke('black', 2);

  chart.xAxis().ticks()
    .enabled(false);

  // force chart to stack values by Y scale
  chart.yScale().stackMode('value');

  // set chart title
  chart.title('Total Dan Status Komplaint Selama Setahun (2018)');


  // create data-area and set background settings
  chart.dataArea()
    .background()
    .enabled(true)
    .fill('#456')
    .corners(25, 25, 0, 0);

  // set grid settings
  chart.xGrid()
    .stroke('#fff .1')
    .isMinor(true)
    .drawFirstLine(false)
    .drawLastLine(false);

  chart.yGrid()
    .stroke('#fff .1')
    .isMinor(true)
    .drawFirstLine(false)
    .drawLastLine(false);



  // create first series with mapped data
  var series_1 = chart.column(seriesData_1);
  series_1.name('Total');

  // create second series with mapped data
  var series_2 = chart.column(seriesData_2);
  series_2.name('Not Process');

  // create second series with mapped data
  var series_3 = chart.column(seriesData_3);
  series_3.name('In Process');


  // create second series with mapped data
  var series_4 = chart.column(seriesData_4);
  series_4.name('Closed');

  // turn the legend on
  chart.legend()
    .enabled(true)
    .fontSize(13)
    .fontColor('white')
    .positionMode('inside')
    .margin({
      top: 15
    });

  // set container id for the chart
  chart.container('container');

  // initiate chart drawing
  chart.draw();
});

function getData() {
  return [
    ['Janurai', <?php echo $jumlah1 = $data1[0]; ?>, <?php echo htmlentities($num0); ?>, <?php echo htmlentities($num2); ?>, <?php echo htmlentities($num3); ?>],
    ['Februari', <?php echo $jumlah2 = $data2[0]; ?>, <?php echo htmlentities($num4); ?>, <?php echo htmlentities($num5); ?>, <?php echo htmlentities($num6); ?>],
    ['Maret', <?php echo $jumlah3 = $data3[0]; ?>, <?php echo htmlentities($num7); ?>, <?php echo htmlentities($num8); ?>, <?php echo htmlentities($num9); ?>],
    ['April', <?php echo $jumlah4 = $data4[0]; ?>, <?php echo htmlentities($num10); ?>, <?php echo htmlentities($num11); ?>, <?php echo htmlentities($num12); ?>],
    ['Mei', <?php echo $jumlah5 = $data5[0]; ?>, <?php echo htmlentities($num13); ?>, <?php echo htmlentities($num14); ?>, <?php echo htmlentities($num15); ?>],
    ['Juni', <?php echo $jumlah6 = $data6[0]; ?>, <?php echo htmlentities($num16); ?>, <?php echo htmlentities($num17); ?>, <?php echo htmlentities($num18); ?>],
    ['Juli', <?php echo $jumlah7 = $data7[0]; ?>, <?php echo htmlentities($num19); ?>, <?php echo htmlentities($num20); ?>, <?php echo htmlentities($num21); ?>],
    ['Agustus', <?php echo $jumlah8 = $data8[0]; ?>, <?php echo htmlentities($num22); ?>, <?php echo htmlentities($num23); ?>, <?php echo htmlentities($num24); ?>],
    ['September', <?php echo $jumlah9 = $data9[0]; ?>, <?php echo htmlentities($num25); ?>, <?php echo htmlentities($num26); ?>, <?php echo htmlentities($num27); ?>],
    ['Oktober', <?php echo $jumlah10 = $data10[0]; ?>, <?php echo htmlentities($num28); ?>, <?php echo htmlentities($num29); ?>, <?php echo htmlentities($num30); ?>],
    ['November', <?php echo $jumlah11 = $data11[0]; ?>, <?php echo htmlentities($num31); ?>, <?php echo htmlentities($num32); ?>, <?php echo htmlentities($num33); ?>],
    ['Desember', <?php echo $jumlah12 = $data12[0]; ?>, <?php echo htmlentities($num34); ?>, <?php echo htmlentities($num33); ?>, <?php echo htmlentities($num36); ?>]
  ]
}
    </script> 

Kelima buat file dengan nama index.php, ini merupakan tahap terakhir untuk membuat AnyChart yang bagus dan menampilkan data database dengan kondisi tertentu. File ini index.php ini berfungsi sebagai form untuk menampilkan grafik AnyChart dan penggabungan source code dari semua source code 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>
 
 <!--code install AnyCharts-->
 <script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-stock.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>
  <link rel="stylesheet" href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" />
  <link rel="stylesheet" href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" />
  <style>
  #container {
    width: 100%;
    height: 500px;
    margin: 0;
    padding: 0;
  }
</style>

<?php
    $status="";
    $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];
    $percent1= $jumlah1 * $totalall /100 ;


    $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];
    $percent2= $jumlah2 * $totalall /100 ;


    $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];
    $percent3= $jumlah3 * $totalall /100 ;


    $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];
    $percent4= $jumlah4 * $totalall /100 ;


    $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];
    $percent5= $jumlah5 * $totalall /100 ;


    $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];
    $percent6= $jumlah6 * $totalall /100 ;


    $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];
    $percent7= $jumlah7 * $totalall /100 ;


    $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];
    $percent8= $jumlah8 * $totalall /100 ;


    $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];
    $percent9= $jumlah9 * $totalall /100 ;


    $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];
    $percent10= $jumlah10 * $totalall /100 ;


    $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];
    $percent11= $jumlah11 * $totalall /100 ;


    $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];
    $percent12= $jumlah12 * $totalall /100 ;

    ?>



    <!--Mulai-->

    <?php
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='01' and YEAR(regDate)='$tahun' and status is null");
    $num0 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="in process"; 
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='01' and YEAR(regDate)='$tahun' and status='$status'");
    $num2 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="closed";                   
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='01' and YEAR(regDate)='$tahun' and status='$status'");
    $num3 = mysqli_num_rows($rt);
    {?>
    <?php } ?>

    <!--End--> 


    <!--Mulai-->

    <?php
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='02' and YEAR(regDate)='$tahun' and status is null");
    $num4 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="in process"; 
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='02' and YEAR(regDate)='$tahun' and status='$status'");
    $num5 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="closed";                   
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='02' and YEAR(regDate)='$tahun' and status='$status'");
    $num6 = mysqli_num_rows($rt);
    {?>
    <?php } ?>

    <!--End--> 


    <!--Mulai-->

    <?php
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='03' and YEAR(regDate)='$tahun' and status is null");
    $num7 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="in process"; 
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='03' and YEAR(regDate)='$tahun' and status='$status'");
    $num8 = mysqli_num_rows($rt);
    {?>
    <?php } ?>



    <?php
    $status="closed";                   
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='03' and YEAR(regDate)='$tahun' and status='$status'");
    $num9 = mysqli_num_rows($rt);
    {?>
    <?php } ?>

    <!--End-->


    <!--Mulai-->

    <?php
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='04' and YEAR(regDate)='$tahun' and status is null");
    $num10 = mysqli_num_rows($rt);
    {?>
    <?php } ?>



    <?php
    $status="in process"; 
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='04' and YEAR(regDate)='$tahun' and status='$status'");
    $num11 = mysqli_num_rows($rt);
    {?>
    <?php } ?>



    <?php
    $status="closed";                   
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='04' and YEAR(regDate)='$tahun' and status='$status'");
    $num12 = mysqli_num_rows($rt);
    {?>
    <?php } ?>

    <!--End-->


    <!--Mulai-->

    <?php
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='05' and YEAR(regDate)='$tahun' and status is null");
    $num13 = mysqli_num_rows($rt);
    {?>
    <?php } ?>



    <?php
    $status="in process"; 
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='05' and YEAR(regDate)='$tahun' and status='$status'");
    $num14 = mysqli_num_rows($rt);
    {?>
    <?php } ?>



    <?php
    $status="closed";                   
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='05' and YEAR(regDate)='$tahun' and status='$status'");
    $num15 = mysqli_num_rows($rt);
    {?>
    <?php } ?>

    <!--End-->



    <!--Mulai-->
    <?php
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='06' and YEAR(regDate)='$tahun' and status is null");
    $num16 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="in process"; 
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='06' and YEAR(regDate)='$tahun' and status='$status'");
    $num17 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="closed";                   
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='06' and YEAR(regDate)='$tahun' and status='$status'");
    $num18 = mysqli_num_rows($rt);
    {?>
    <?php } ?>

    <!--End-->


    <!--Mulai-->

    <?php
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='07' and YEAR(regDate)='$tahun' and status is null");
    $num19 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="in process"; 
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='07' and YEAR(regDate)='$tahun' and status='$status'");
    $num20 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="closed";                   
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='07' and YEAR(regDate)='$tahun' and status='$status'");
    $num21 = mysqli_num_rows($rt);
    {?>
    <?php } ?>

    <!--End-->



    <!--Mulai-->

    <?php
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='08' and YEAR(regDate)='$tahun' and status is null");
    $num22 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="in process"; 
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='08' and YEAR(regDate)='$tahun' and status='$status'");
    $num23 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="closed";                   
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='08' and YEAR(regDate)='$tahun' and status='$status'");
    $num24 = mysqli_num_rows($rt);
    {?>
    <?php } ?>

    <!--End-->



    <!--Mulai-->

    <?php
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='09' and YEAR(regDate)='$tahun' and status is null");
    $num25 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="in process"; 
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='09' and YEAR(regDate)='$tahun' and status='$status'");
    $num26 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="closed";                   
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='09' and YEAR(regDate)='$tahun' and status='$status'");
    $num27 = mysqli_num_rows($rt);
    {?>
    <?php } ?>

    <!--End-->


    <!--Mulai-->

    <?php
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='10' and YEAR(regDate)='$tahun' and status is null");
    $num28 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="in process"; 
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='10' and YEAR(regDate)='$tahun' and status='$status'");
    $num29 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="closed";                   
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='10' and YEAR(regDate)='$tahun' and status='$status'");
    $num30 = mysqli_num_rows($rt);
    {?>
    <?php } ?>

    <!--End-->


    <!--Mulai-->

    <?php
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='11' and YEAR(regDate)='$tahun' and status is null");
    $num31 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="in process"; 
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='11' and YEAR(regDate)='$tahun' and status='$status'");
    $num32 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="closed";                   
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='11' and YEAR(regDate)='$tahun' and status='$status'");
    $num33 = mysqli_num_rows($rt);
    {?>
    <?php } ?>

    <!--End-->


    <!--Mulai-->

    <?php
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='12' and YEAR(regDate)='$tahun' and status is null");
    $num34 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="in process"; 
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='12' and YEAR(regDate)='$tahun' and status='$status'");
    $num35 = mysqli_num_rows($rt);
    {?>
    <?php } ?>


    <?php
    $status="closed";                   
    $rt = mysqli_query($con,"SELECT * FROM tblcomplaints WHERE MONTH(regDate)='12' and YEAR(regDate)='$tahun' and status='$status'");
    $num36 = mysqli_num_rows($rt);
    {?>
    <?php } ?>

    <!--End-->

</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="container"></div>

    </div>
  </div>
  <script type="text/javascript">
anychart.onDocumentReady(function() {
  // create data set on our data
  var dataSet = anychart.data.set(getData());

  // map data for the first series
  var seriesData_1 = dataSet.mapAs({
    'x': 0,
    'value': 1
  });

  // map data for the second series
  var seriesData_2 = dataSet.mapAs({
    'x': 0,
    'value': 2
  });

  // map data for the second series
  var seriesData_3 = dataSet.mapAs({
    'x': 0,
    'value': 3
  });

  // map data for the second series
  var seriesData_4 = dataSet.mapAs({
    'x': 0,
    'value': 4
  });

  // create line chart
  var chart = anychart.column();

  // turn on chart animation
  chart.animation(true);

  chart.padding(10);

  // disable Y axis
  chart.yAxis(false);

  // set X axis title
  chart.xAxis()
    .title('Month')
    .stroke('black', 2);

  chart.xAxis().ticks()
    .enabled(false);

  // force chart to stack values by Y scale
  chart.yScale().stackMode('value');

  // set chart title
  chart.title('Total Dan Status Komplaint Selama Setahun (2018)');


  // create data-area and set background settings
  chart.dataArea()
    .background()
    .enabled(true)
    .fill('#456')
    .corners(25, 25, 0, 0);

  // set grid settings
  chart.xGrid()
    .stroke('#fff .1')
    .isMinor(true)
    .drawFirstLine(false)
    .drawLastLine(false);

  chart.yGrid()
    .stroke('#fff .1')
    .isMinor(true)
    .drawFirstLine(false)
    .drawLastLine(false);



  // create first series with mapped data
  var series_1 = chart.column(seriesData_1);
  series_1.name('Total');

  // create second series with mapped data
  var series_2 = chart.column(seriesData_2);
  series_2.name('Not Process');

  // create second series with mapped data
  var series_3 = chart.column(seriesData_3);
  series_3.name('In Process');


  // create second series with mapped data
  var series_4 = chart.column(seriesData_4);
  series_4.name('Closed');

  // turn the legend on
  chart.legend()
    .enabled(true)
    .fontSize(13)
    .fontColor('white')
    .positionMode('inside')
    .margin({
      top: 15
    });

  // set container id for the chart
  chart.container('container');

  // initiate chart drawing
  chart.draw();
});

function getData() {
  return [
    ['Janurai', <?php echo $jumlah1 = $data1[0]; ?>, <?php echo htmlentities($num0); ?>, <?php echo htmlentities($num2); ?>, <?php echo htmlentities($num3); ?>],
    ['Februari', <?php echo $jumlah2 = $data2[0]; ?>, <?php echo htmlentities($num4); ?>, <?php echo htmlentities($num5); ?>, <?php echo htmlentities($num6); ?>],
    ['Maret', <?php echo $jumlah3 = $data3[0]; ?>, <?php echo htmlentities($num7); ?>, <?php echo htmlentities($num8); ?>, <?php echo htmlentities($num9); ?>],
    ['April', <?php echo $jumlah4 = $data4[0]; ?>, <?php echo htmlentities($num10); ?>, <?php echo htmlentities($num11); ?>, <?php echo htmlentities($num12); ?>],
    ['Mei', <?php echo $jumlah5 = $data5[0]; ?>, <?php echo htmlentities($num13); ?>, <?php echo htmlentities($num14); ?>, <?php echo htmlentities($num15); ?>],
    ['Juni', <?php echo $jumlah6 = $data6[0]; ?>, <?php echo htmlentities($num16); ?>, <?php echo htmlentities($num17); ?>, <?php echo htmlentities($num18); ?>],
    ['Juli', <?php echo $jumlah7 = $data7[0]; ?>, <?php echo htmlentities($num19); ?>, <?php echo htmlentities($num20); ?>, <?php echo htmlentities($num21); ?>],
    ['Agustus', <?php echo $jumlah8 = $data8[0]; ?>, <?php echo htmlentities($num22); ?>, <?php echo htmlentities($num23); ?>, <?php echo htmlentities($num24); ?>],
    ['September', <?php echo $jumlah9 = $data9[0]; ?>, <?php echo htmlentities($num25); ?>, <?php echo htmlentities($num26); ?>, <?php echo htmlentities($num27); ?>],
    ['Oktober', <?php echo $jumlah10 = $data10[0]; ?>, <?php echo htmlentities($num28); ?>, <?php echo htmlentities($num29); ?>, <?php echo htmlentities($num30); ?>],
    ['November', <?php echo $jumlah11 = $data11[0]; ?>, <?php echo htmlentities($num31); ?>, <?php echo htmlentities($num32); ?>, <?php echo htmlentities($num33); ?>],
    ['Desember', <?php echo $jumlah12 = $data12[0]; ?>, <?php echo htmlentities($num34); ?>, <?php echo htmlentities($num33); ?>, <?php echo htmlentities($num36); ?>]
  ]
}
    </script>
</body>
</html> 

Kalian bisa melihat hasil dari AnyChart ini pada gambar di atas, Kalian juga bisa langsung download filenya dengan menekan button download dibawah ini.


jangan lupa share dan tinggalkan komentar dibawah ini jika kalian ingin bertanya dan mempunyai kendala berrati dalam mengikuti tutorials diatas.

//lh4.googleusercontent.com/-eAXyxy2JJKA/AAAAAAAAAAI/AAAAAAAAGS4/OHgzqHzCvtQ/s512-c/photo.jpg

Membuat Grafik AnyChart Dengan Php MySQL

Seperti yang telah kami katakan pada postingan sebelumnya bahwa kami akan membahas lebih jauh mengenai AnyChart ini dan kami menepati apa yang kami katakan itu. Pada postingan kali ini kami kembali mengatakan bahwa sekitar 3 atau 4 postingan berikutnya kami akan masih membahas mengenai AnyChart ini teteapi pembahasan yang lebih meluas.

Kali ini kami akan membahas bagaimana menghubungkan dan membuat anychart dengan Php MySQL.

Deskripsi: Aplikasi web base singkat dibawah menjelaskan bagaimana penggunaan AnyChart yang terhubung dengan database. Data pada AnyChart dibawah diambil dari database, dengan jumlah data komplain yang ada setiap bulannya, selama setahun.

Read More:
  1. Membuat Grafik Highcharts Dengan Php MyAdmin Menggunakan Ajax Bootsrap
  2. Cara Menggunakan Google Chart (Line Chart) Pada PHP Part 1
  3. Cara Singkat Menggunakan AnyCharts Pada Website Anda

Yang pertama buat database dengan nama anychart kemudian masukkan struktur databse dibawah ini. Database ini yang akan kami panggil kedalam anychart.

 -- phpMyAdmin SQL Dump
-- version 4.8.3
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Nov 11, 2018 at 04:22 PM
-- Server version: 10.1.36-MariaDB
-- PHP Version: 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`
--

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

--
-- Table structure for table `tblcomplaints`
--

CREATE TABLE `tblcomplaints` (
  `complaintNumber` int(11) NOT NULL,
  `userId` int(11) NOT NULL,
  `floor` int(11) NOT NULL,
  `room` varchar(50) NOT NULL,
  `facilityName` varchar(50) NOT NULL,
  `buildingName` varchar(50) NOT NULL,
  `typedamage` varchar(50) NOT NULL,
  `complaintDetails` mediumtext NOT NULL,
  `complaintFile` varchar(50) DEFAULT NULL,
  `regDate` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `remark` mediumtext NOT NULL,
  `techName` varchar(50) NOT NULL,
  `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 for table `tblcomplaints`
--

INSERT INTO `tblcomplaints` (`complaintNumber`, `userId`, `floor`, `room`, `facilityName`, `buildingName`, `typedamage`, `complaintDetails`, `complaintFile`, `regDate`, `remark`, `techName`, `status`, `lastUpdationDate`) VALUES
(1, 1, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-01-21 04:41:41', 'Sementara di proses pak ya', 'admin', 'in process', '2018-05-23 05:24:19'),
(2, 2, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-01-21 04:41:41', 'test', 'admin', 'in process', '2018-05-23 11:30:33'),
(3, 3, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-01-21 04:41:41', 'test', 'admin', 'in process', '2018-05-24 04:47:28'),
(4, 4, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-01-21 04:41:41', 'test ya', 'admin', 'closed', '2018-05-24 14:47:07'),
(5, 5, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-01-21 04:41:41', 'test', 'admin', 'in process', '2018-05-24 14:50:36'),
(6, 6, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-01-21 04:41:41', '', 'admin', 'in process', '2018-05-29 09:18:09'),
(7, 7, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-01-21 04:41:41', 'sementara di proses pak ya', 'admin', 'in process', '2018-05-23 05:25:17'),
(8, 8, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-01-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(9, 9, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-01-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(10, 10, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-01-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(11, 1, 1, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-02-21 04:41:41', '', 'admin', 'in process', '2018-05-24 15:30:21'),
(12, 2, 1, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-02-21 04:41:41', 'sementara jalan pak ya', 'admin', 'in process', '2018-05-23 05:26:05'),
(13, 3, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-02-21 04:41:41', '', 'admin', 'closed', '2018-05-24 04:48:13'),
(14, 4, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-02-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(15, 5, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-02-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(16, 6, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-02-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(17, 7, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-02-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(18, 8, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-02-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(19, 9, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-02-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(20, 10, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-02-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(21, 1, 1, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-03-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(22, 2, 1, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-03-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(23, 3, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-03-21 04:41:41', 'selesai pak', 'admin', 'closed', '2018-05-24 04:48:46'),
(24, 4, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-03-21 04:41:41', 'Di proses pak ya', 'admin', 'in process', '2018-05-24 15:20:39'),
(25, 5, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-03-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(26, 6, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-03-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(27, 7, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-03-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(28, 8, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-03-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(29, 9, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-03-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(30, 10, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-03-21 04:41:41', 'mantap', 'admin', 'in process', '2018-05-24 15:21:30'),
(31, 1, 1, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(32, 2, 1, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(33, 3, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(34, 4, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(35, 5, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(36, 6, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(37, 7, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', 'Selesai Pak ya', 'admin', 'closed', '2018-05-24 15:15:30'),
(38, 8, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(39, 9, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(40, 10, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(41, 5, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(42, 6, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', 'admin', 'in process', '2018-05-24 15:43:13'),
(43, 7, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(44, 8, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', 'sementara pak', 'admin', 'in process', '2018-05-24 15:14:57'),
(45, 9, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(46, 10, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(47, 1, 1, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(48, 2, 1, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(49, 3, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(50, 4, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(51, 5, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(52, 6, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(53, 7, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', 'admin', 'closed', '2018-05-24 15:30:10'),
(54, 8, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(55, 9, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', 'admin', 'in process', '2018-05-24 15:31:16'),
(56, 20, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(57, 5, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(58, 6, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(59, 7, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(60, 8, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(61, 9, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', 'admin', 'in process', '2018-05-24 15:29:55'),
(62, 20, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(63, 6, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-06-19 21:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(64, 7, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-06-19 21:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(65, 8, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-07-19 21:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(66, 9, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-08-19 21:41:41', '', 'admin', 'in process', '2018-07-24 08:29:55'),
(67, 20, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-09-19 21:41:41', '', '', NULL, '0000-00-00 00:00:00');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tblcomplaints`
--
ALTER TABLE `tblcomplaints`
  ADD PRIMARY KEY (`complaintNumber`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tblcomplaints`
--
ALTER TABLE `tblcomplaints`
  MODIFY `complaintNumber` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=68;
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 berfungsi untuk menghubungkan kedalam databse.

 <?php
// conection
define('DB_SERVER','localhost');
define('DB_USER','root');
define('DB_PASS' ,'');
define('DB_NAME', 'anychart');
$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();
}
?> 

Terakhir buat file dengan nama index.php, file ini berisi script sebagai form untuk menampilkan AnyChart dari database 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>
 
 <!--code install AnyCharts-->
 <script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.4.1/themes/dark_earth.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
  <link rel="stylesheet" href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" />
  <link rel="stylesheet" href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" />
  <style>
  #container {
    width: 100%;
    height: 500px;
    margin: 0;
    padding: 0;
  }
</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="container"></div>

    </div>
  </div>
  <script type="text/javascript">
    anychart.onDocumentReady(function() {
      anychart.theme('darkEarth');
  // create column chart
  var chart = anychart.column();

  // turn on chart animation
  chart.animation(true);

  // set chart title text settings
  chart.title('Total Komplaint Disetiap Bulannya Setiap Tahunnya');

  // create area series with passed data
  var series = chart.column([
    ['January', '<?php echo $jumlah1 = $data1[0]; ?>'],
    ['February', '<?php echo $jumlah2 = $data2[0]; ?>'],
    ['Maret', '<?php echo $jumlah3 = $data3[0]; ?>'],
    ['April', '<?php echo $jumlah4 = $data4[0]; ?>'],
    ['Mei', '<?php echo $jumlah5 = $data5[0]; ?>'],
    ['Juni', '<?php echo $jumlah6 = $data6[0]; ?>'],
    ['Juli', '<?php echo $jumlah7 = $data7[0]; ?>'],
    ['Agustus', '<?php echo $jumlah8 = $data8[0]; ?>'],
    ['September', '<?php echo $jumlah9 = $data9[0]; ?>'],
    ['Oktober', '<?php echo $jumlah10 = $data10[0]; ?>'],
    ['November', '<?php echo $jumlah11 = $data11[0]; ?>'],
    ['Desember', '<?php echo $jumlah12 = $data12[0]; ?>']
    ]);

  // set series tooltip settings
  series.tooltip().titleFormat('{%X}');

  series.tooltip()
  .position('center-top')
  .anchor('center-bottom')
  .offsetX(0)
  .offsetY(5)
  .format('{%Value}{groupsSeparator: }');

  // set scale minimum
  chart.yScale().minimum(0);

  // set yAxis labels formatter
  chart.yAxis().labels().format('{%Value}{groupsSeparator: }');

  // tooltips position and interactivity settings
  chart.tooltip().positionMode('point');
  chart.interactivity().hoverMode('by-x');

  // axes titles
  chart.xAxis().title('Total Complaint');
  chart.yAxis().title('Total Complaint');

  // set container id for the chart
  chart.container('container');

  // initiate chart drawing
  chart.draw();
});
</script>
</body>
</html> 

Sekian share kali ini semoga apa yang kami share bermanfaat bagi anda, kalian bisa mendownload dan mencobanya langsung, silahkan download pada link dibawah ini.


Jnagan berhenti untuk berkunjung ke website ini karena artikel berikutnya akan menjelaskan bagaimana menggunakan AnyChart dengan data database yang banyak.

//lh3.googleusercontent.com/-K5UKWzgJhmU/AAAAAAAAAAI/AAAAAAAACdI/CN3nwiBZsGE/s512-c/photo.jpg

SUBSCRIBE TO OUR NEWSLETTER

closed