Categories
PHP

Membuat PHP Chart Dengan amCharts

php chart

Pada kesempatan kali ini kami akan share bagaimana membuat PHP Chart menggunakan amCharts, chart penting dalam sebuah system dimana pemilik system bisa melihat progress atau persentase sebuah data melalui sebuah chart yang terdapat dalam system.

Langsung saja mari kit amasuk kedalam pembahasan inti.

1. 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 */;

2. Buat file dengan nama config.php, file ini berfungsi sebagai koneksi kedatabase.

<?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();
}
?>

3. Berikutnya buat file dengan nama index.php, file ini sebagai form untuk menampilkan data database kedalam bentuk chart.

<?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://jasawebsite.ooo">jasawebsite</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>

Kalian bisa mendownlaod filenya langsung pada link button dibawah ini.

Sekian share kali ini semoga apa yang kami share bermanfaat bagi anda, tinggalkan komentar dan mulai berdiskusi dengan kami.

Leave a Reply

Your email address will not be published. Required fields are marked *