Tutorial Menggunakan Grafik HighCharts Dengan PHP MySQL

//lh4.googleusercontent.com/-eAXyxy2JJKA/AAAAAAAAAAI/AAAAAAAAGS4/OHgzqHzCvtQ/s512-c/photo.jpg
October 30, 2018




Highchart dirilis pada tahun 2009. Highcharts adalah pustaka grafik yang ditulis dalam JavaScript murni, menawarkan cara mudah menambahkan bagan interaktif ke situs web atau aplikasi web Anda. Dirancang dari bawah ke atas dengan mempertimbangkan browser seluler, semuanya mulai dari zoom multitouch hingga tooltips yang ramah sentuhan memberikan respon yang baik di platform seluler.

Dalam grafik browser modern diberikan dalam SVG, dengan dukungan VML untuk browser lawas (misalnya Internet Explorer 6). Basis kode cepat, matang, dan modular Highcharts juga merupakan fondasi dari dua produk saudaranya, Highstock JS dan Highmaps JS. - highcharts.com/about

Disini kami akan mencoba menjelaskan secara details bagaimana menggunakan highcharts ini ketika kita menghubungkannya dengan database menggunakan php. Kami akan mencoba bagaimana menggunakan grafik highcharts Stacked and grouped column (Kolom bertumpuk dan dikelompokkan).

1. Bagaimana Menginstal Grafik Highcharts Pada aplikasi Anda?

Menginstal highcharts sangat mudah bagi siapapun itu walaupun anda adalah orang yang pertama kali menggunakannya, berikut cara menginstalnya pada aplikasi anda.

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 


2. Cara konfigurasi Sampel Grafik Highcharts (Memasukkan data kedalam Grafik)

Cara konfigurasi atau mengolah data dikelolah menggunakan JavaScript

 Highcharts.chart('container', {

  chart: {
    type: 'column'
  },

  title: {
    text: 'Total fruit consumtion, grouped by gender'
  },

  xAxis: {
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
  },

  yAxis: {
    allowDecimals: false,
    min: 0,
    title: {
      text: 'Number of fruits'
    }
  },

  tooltip: {
    formatter: function () {
      return '<b>' + this.x + '</b><br/>' +
        this.series.name + ': ' + this.y + '<br/>' +
        'Total: ' + this.point.stackTotal;
    }
  },

  plotOptions: {
    column: {
      stacking: 'normal'
    }
  },

  series: [{
    name: 'John',
    data: [5, 3, 4, 7, 2],
    stack: 'male'
  }, {
    name: 'Joe',
    data: [3, 4, 4, 2, 5],
    stack: 'male'
  }, {
    name: 'Jane',
    data: [2, 5, 6, 2, 1],
    stack: 'female'
  }, {
    name: 'Janet',
    data: [3, 0, 4, 4, 3],
    stack: 'female'
  }]
}); 




3. Bagaimana menghubungkan kedalam database dengan data yang banyak ?

Daripada kami terlalu banyak menjelaskan langsung saja meri kita langsung mempraktekkannya dengan cara menghubungkannya kedalam database menggunakan PHP. Tetapi sebelum itu kami akan menjelaskan spesifikasi tutorial aplikasi yang akan kami buat dibawah, supaay semuanya jelas dan kami tidak terllau banyak menjelaskannya lagi.
Spesifikasi Tutorial : 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.
Langkah 1

Buat database dengan nama tes_com kemudian masukkan struktur database dibawah ini.

 -- phpMyAdmin SQL Dump
-- version 4.8.3
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Oct 29, 2018 at 04:04 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: `tes_com`
--

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

--
-- Table structure for table `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 for table `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
--

--
-- 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=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 */;
 

Langkah 2

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--> 

Langkah 3

Buat file dengan nama config, file ini berfungsi untuk koneksi kedatabase.

 <?php
define('DB_HOST', 'localhost');
define('DB_USER','root');
define('DB_PASS' ,'');
define('DB_NAME', 'tes_com');
$con = mysqli_connect(DB_HOST,DB_USER,DB_PASS,DB_NAME);

// Check connection

if (mysqli_connect_errno())
{
 echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

?> 

Langkah 4

Konfigurasi HTML, JavaScript, dan PHP untuk memanggil total komplaint dan status kedalam JavaScript, berikut codenya.

 <script>
    Highcharts.chart('container', {
        chart: {
            type: 'column',
            backgroundColor:"#B0C4DE"
        },
        title: {
            text: 'The Complaint Chart'
        },
        subtitle: {
            text: 'Total Complaint, Not Process, In Process, and Closed Complaint, Periode: <?php $tgl=date('Y'); echo $tgl; ?>'
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec']
        },

        tooltip: {
         pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
         shared: true
     },


     plotOptions: {
        column: {
            stacking: 'normal'
        }
    },



    series: [{
        name: 'Total Complaint',
        data: [<?php echo $jumlah1 = $data1[0]; ?>, <?php echo $jumlah2 = $data2[0]; ?>, <?php echo $jumlah3 = $data3[0]; ?>, <?php echo $jumlah4 = $data4[0]; ?>, <?php echo $jumlah5 = $data5[0]; ?>, <?php echo $jumlah6 = $data6[0]; ?>, <?php echo $jumlah7 = $data7[0]; ?>, <?php echo $jumlah8 = $data8[0]; ?>, <?php echo $jumlah9 = $data9[0]; ?>, <?php echo $jumlah10 = $data10[0]; ?>, <?php echo $jumlah11 = $data11[0]; ?>, <?php echo $jumlah12 = $data12[0]; ?>],

    }, {
        name: 'Not Process Yet Complaint',
        data: [<?php echo htmlentities($num0); ?>, <?php echo htmlentities($num4); ?>, <?php echo htmlentities($num7); ?>, <?php echo htmlentities($num10); ?>, <?php echo htmlentities($num13); ?>, <?php echo htmlentities($num16); ?>, <?php echo htmlentities($num19); ?>, <?php echo htmlentities($num22); ?>, <?php echo htmlentities($num25); ?>, <?php echo htmlentities($num28); ?>, <?php echo htmlentities($num31); ?>, <?php echo htmlentities($num34); ?>],

    }, {
        name: 'In Process Complaint',
        data: [<?php echo htmlentities($num2); ?>, <?php echo htmlentities($num5); ?>, <?php echo htmlentities($num8); ?>, <?php echo htmlentities($num11); ?>, <?php echo htmlentities($num14); ?>, <?php echo htmlentities($num17); ?>, <?php echo htmlentities($num20); ?>, <?php echo htmlentities($num23); ?>, <?php echo htmlentities($num26); ?>, <?php echo htmlentities($num29); ?>, <?php echo htmlentities($num32); ?>, <?php echo htmlentities($num33); ?>],

    }, {
        name: 'Closed Complaint',
        data: [<?php echo htmlentities($num3); ?>, <?php echo htmlentities($num6); ?>, <?php echo htmlentities($num9); ?>, <?php echo htmlentities($num12); ?>, <?php echo htmlentities($num15); ?>, <?php echo htmlentities($num18); ?>, <?php echo htmlentities($num21); ?>, <?php echo htmlentities($num24); ?>, <?php echo htmlentities($num27); ?>, <?php echo htmlentities($num30); ?>, <?php echo htmlentities($num33); ?>, <?php echo htmlentities($num36); ?>],

    }]
});

</script> 

Langkah 5

Buat file dengan index.php file in berfungsi sebagai form untuk menampilkan data database yang ada di atas.

 <?php
session_start();
error_reporting(0);
include('config.php');

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="description" content="Vali is a responsive and free admin theme built with Bootstrap 4, SASS and PUG.js. It's fully customizable and modular.">

    <meta property="og:type" content="website">
    <meta property="og:site_name" content="Vali Admin">
    <meta property="og:title" content="Vali - Free Bootstrap 4 admin theme">
    <meta property="og:url" content="http://pratikborsadiya.in/blog/vali-admin">
    <meta property="og:image" content="http://pratikborsadiya.in/blog/vali-admin/hero-social.png">
    <meta property="og:description" content="Vali is a responsive and free admin theme built with Bootstrap 4, SASS and PUG.js. It's fully customizable and modular.">
    <title>HIGHCHARTS</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Main CSS-->
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <!-- Font-icon css-->

    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <!--Highcharts-->
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>

    

    <?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 class="app sidebar-mini rtl">
  <header class="app-header"><a class="app-header__logo" href="#">HIGHTCHARTS</a>
  </header>
  <div class="app-sidebar__overlay" data-toggle="sidebar"></div>
  <aside class="app-sidebar">
  </aside>
  <main class="app-content">
    <div class="row">
      <div class="col-md-4 col-lg-3">
          <a href="#">
            <div class="widget-small primary coloured-icon"><i class="icon fa fa-file"></i>
              <div class="info">
                <?php
                $rt = mysqli_query($con,"SELECT * FROM tblcomplaints where status is null");
                $num1 = mysqli_num_rows($rt);
                {?>
                  <h6>Not Process Yet Complaint</h6>
                  <p><b><?php echo htmlentities($num1);?><?php }?></b></p>
              </div>
          </div>
      </a>

  </div>



  <div class="col-md-4 col-lg-3">
      <a href="#">
          <div class="widget-small info coloured-icon"><i class="icon fa fa-pause"></i>
            <div class="info">
              <?php 
              $status="in Process";                   
              $rt = mysqli_query($con,"SELECT * FROM tblcomplaints where status='$status'");
              $num1 = mysqli_num_rows($rt);
              {?>
                <h6>In Process Complaint</h6>
                <p><b><?php echo htmlentities($num1);?><?php } ?></b></p>
            </div>
        </div>
    </a>
</div>



<div class="col-md-4 col-lg-3">
    <a href="#">
        <div class="widget-small warning coloured-icon"><i class="icon fa fa-check-square"></i>
          <div class="info">
            <?php 
            $status="closed";                   
            $rt = mysqli_query($con,"SELECT * FROM tblcomplaints where status='$status'");
            $num1 = mysqli_num_rows($rt);
            {?>
              <h6>Closed Complaint</h6>
              <p><b><?php echo htmlentities($num1); ?><?php } ?></b></p>
          </div>
      </div>
  </a>
</div>



<div class="col-md-6 col-lg-3">
    <a href="#">
      <div class="widget-small danger coloured-icon"><i class="icon fa fa-envelope"></i>
        <div class="info">
         <?php               
         $rt = mysqli_query($con,"SELECT * FROM tblcomplaints");
         $num1 = mysqli_num_rows($rt);
         {?>
            <h6>Total Complaint</h6>
            <p><b><?php echo htmlentities($num1); ?><?php } ?></b></p>
        </div>
    </div>
</a>
</div>
</div>



<div class="row">
  <div class="col-md-12">
    <div class="tile" style="background-color:lavender;">
      <div id="container" style="height: 400px"></div>
  </div>
</div>
</div>
</main>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
<script src="js/plugins/pace.min.js"></script>


<script>
    Highcharts.chart('container', {
        chart: {
            type: 'column',
            backgroundColor:"#B0C4DE"
        },
        title: {
            text: 'The Complaint Chart'
        },
        subtitle: {
            text: 'Total Complaint, Not Process, In Process, and Closed Complaint, Periode: <?php $tgl=date('Y'); echo $tgl; ?>'
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec']
        },

        tooltip: {
         pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
         shared: true
     },


     plotOptions: {
        column: {
            stacking: 'normal'
        }
    },



    series: [{
        name: 'Total Complaint',
        data: [<?php echo $jumlah1 = $data1[0]; ?>, <?php echo $jumlah2 = $data2[0]; ?>, <?php echo $jumlah3 = $data3[0]; ?>, <?php echo $jumlah4 = $data4[0]; ?>, <?php echo $jumlah5 = $data5[0]; ?>, <?php echo $jumlah6 = $data6[0]; ?>, <?php echo $jumlah7 = $data7[0]; ?>, <?php echo $jumlah8 = $data8[0]; ?>, <?php echo $jumlah9 = $data9[0]; ?>, <?php echo $jumlah10 = $data10[0]; ?>, <?php echo $jumlah11 = $data11[0]; ?>, <?php echo $jumlah12 = $data12[0]; ?>],

    }, {
        name: 'Not Process Yet Complaint',
        data: [<?php echo htmlentities($num0); ?>, <?php echo htmlentities($num4); ?>, <?php echo htmlentities($num7); ?>, <?php echo htmlentities($num10); ?>, <?php echo htmlentities($num13); ?>, <?php echo htmlentities($num16); ?>, <?php echo htmlentities($num19); ?>, <?php echo htmlentities($num22); ?>, <?php echo htmlentities($num25); ?>, <?php echo htmlentities($num28); ?>, <?php echo htmlentities($num31); ?>, <?php echo htmlentities($num34); ?>],

    }, {
        name: 'In Process Complaint',
        data: [<?php echo htmlentities($num2); ?>, <?php echo htmlentities($num5); ?>, <?php echo htmlentities($num8); ?>, <?php echo htmlentities($num11); ?>, <?php echo htmlentities($num14); ?>, <?php echo htmlentities($num17); ?>, <?php echo htmlentities($num20); ?>, <?php echo htmlentities($num23); ?>, <?php echo htmlentities($num26); ?>, <?php echo htmlentities($num29); ?>, <?php echo htmlentities($num32); ?>, <?php echo htmlentities($num33); ?>],

    }, {
        name: 'Closed Complaint',
        data: [<?php echo htmlentities($num3); ?>, <?php echo htmlentities($num6); ?>, <?php echo htmlentities($num9); ?>, <?php echo htmlentities($num12); ?>, <?php echo htmlentities($num15); ?>, <?php echo htmlentities($num18); ?>, <?php echo htmlentities($num21); ?>, <?php echo htmlentities($num24); ?>, <?php echo htmlentities($num27); ?>, <?php echo htmlentities($num30); ?>, <?php echo htmlentities($num33); ?>, <?php echo htmlentities($num36); ?>],

    }]
});

</script>
</body>
</html> 



Untuk untuk tampilan pada file index.php diatas kami menggunakan template vali admin yang kemudian kami modifikasi.

Kalian bisa mendownload semua source code di atas dengan menekan button download dibawah ini, kalian bisa memodifikasi sesuai dengan keinginan anda.


Sekian share kali ini, jika kami menjelaskannya kurang details sehingga membuat anda kurang memahami semua source code di atas silahkan tinggalkan komentar dibawah, kami akan sellau membalas semua pertanyaan anda.


Related Post

SUBSCRIBE TO OUR NEWSLETTER

closed