Membuat Chart Pie dengan Highcharts dan Mysql di PHP

by portgastea · July 14, 2015

Hai All ketemu lagi bersama saya portgastea pria tampan asli sunda hehe, tutorial kali ini adalah Membuat Chart Pie dengan Highcharts dan Mysql di PHP. Grafik atau chart yang support PHP itu banyak tapi yang cukup bagus itu Highcharts (http://www.highcharts.com/).

Ok Langsung saja kita buat database & tabel mysql seperti dibawah ini

Source code

-- phpMyAdmin SQL Dump
-- version 4.2.7.1
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: 14 Jul 2015 pada 17.55
-- Versi Server: 5.6.20
-- PHP Version: 5.5.15
 
51&q=SET&lr=lang_en">SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
51&q=SET&lr=lang_en">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 utf8 */;
 
--
-- Database: `tutorial`
--
 
-- --------------------------------------------------------
 
--
-- Struktur dari tabel `evenement`
--
 
51&q=CREATE&lr=lang_en">CREATE 51&q=TABLE&lr=lang_en">TABLE 51&q=IF%20NOT%20EXISTS&lr=lang_en">IF 5.1/en/non-typed-operators.html">NOT EXISTS `evenement` (
`id` 51&q=INT&lr=lang_en">int(11) 5.1/en/non-typed-operators.html">NOT 51&q=NULL&lr=lang_en">NULL,
  `title` 51&q=VARCHAR&lr=lang_en">varchar(255) 5.1/en/non-typed-operators.html">COLLATE utf8_bin 5.1/en/non-typed-operators.html">NOT 51&q=NULL&lr=lang_en">NULL,
  `start` 51&q=DATETIME&lr=lang_en">datetime 5.1/en/non-typed-operators.html">NOT 51&q=NULL&lr=lang_en">NULL,
  `end` 51&q=DATETIME&lr=lang_en">datetime 51&q=DEFAULT&lr=lang_en">DEFAULT 51&q=NULL&lr=lang_en">NULL,
  `url` 51&q=VARCHAR&lr=lang_en">varchar(255) 5.1/en/non-typed-operators.html">COLLATE utf8_bin 5.1/en/non-typed-operators.html">NOT 51&q=NULL&lr=lang_en">NULL,
  `allDay` 51&q=VARCHAR&lr=lang_en">varchar(255) 5.1/en/non-typed-operators.html">COLLATE utf8_bin 5.1/en/non-typed-operators.html">NOT 51&q=NULL&lr=lang_en">NULL 51&q=DEFAULT&lr=lang_en">DEFAULT 'false'
) 51&q=ENGINE&lr=lang_en">ENGINE=51&q=INNODB&lr=lang_en">InnoDB 51&q=DEFAULT&lr=lang_en">DEFAULT 51&q=CHARSET&lr=lang_en">CHARSET=utf8 5.1/en/non-typed-operators.html">COLLATE=utf8_bin 51&q=AUTO_INCREMENT&lr=lang_en">AUTO_INCREMENT=1 ;
 
-- --------------------------------------------------------
 
--
-- Struktur dari tabel `images`
--
 
 
-- Struktur dari tabel `master`
--
 
51&q=CREATE&lr=lang_en">CREATE 51&q=TABLE&lr=lang_en">TABLE 51&q=IF%20NOT%20EXISTS&lr=lang_en">IF 5.1/en/non-typed-operators.html">NOT EXISTS `master` (
`id_daftar` 51&q=INT&lr=lang_en">int(5) 5.1/en/non-typed-operators.html">NOT 51&q=NULL&lr=lang_en">NULL,
  `s_nama` 51&q=VARCHAR&lr=lang_en">varchar(150) 5.1/en/non-typed-operators.html">NOT 51&q=NULL&lr=lang_en">NULL,
  `s_jk` 51&q=INT&lr=lang_en">int(1) 5.1/en/non-typed-operators.html">NOT 51&q=NULL&lr=lang_en">NULL,
  `s_agama` 51&q=INT&lr=lang_en">int(1) 5.1/en/non-typed-operators.html">NOT 51&q=NULL&lr=lang_en">NULL,
  `s_tmp_lahir` 51&q=VARCHAR&lr=lang_en">varchar(100) 5.1/en/non-typed-operators.html">NOT 51&q=NULL&lr=lang_en">NULL,
  `s_tgl_lahir` 51&q=DATE&lr=lang_en">date 5.1/en/non-typed-operators.html">NOT 51&q=NULL&lr=lang_en">NULL,
  `jrsn_pil1` 51&q=INT&lr=lang_en">int(4) 5.1/en/non-typed-operators.html">NOT 51&q=NULL&lr=lang_en">NULL,
  `jrsn_pil2` 51&q=INT&lr=lang_en">int(4) 5.1/en/non-typed-operators.html">NOT 51&q=NULL&lr=lang_en">NULL,
  `tgl_daftar` 51&q=DATE&lr=lang_en">date 5.1/en/non-typed-operators.html">NOT 51&q=NULL&lr=lang_en">NULL,
  `nisn` 51&q=VARCHAR&lr=lang_en">varchar(15) 5.1/en/non-typed-operators.html">NOT 51&q=NULL&lr=lang_en">NULL,
  `noreg` 51&q=VARCHAR&lr=lang_en">varchar(10) 5.1/en/non-typed-operators.html">NOT 51&q=NULL&lr=lang_en">NULL,
  `Alamat` 51&q=TEXT&lr=lang_en">text 5.1/en/non-typed-operators.html">NOT 51&q=NULL&lr=lang_en">NULL
) 51&q=ENGINE&lr=lang_en">ENGINE=51&q=INNODB&lr=lang_en">InnoDB  51&q=DEFAULT&lr=lang_en">DEFAULT 51&q=CHARSET&lr=lang_en">CHARSET=latin1 51&q=AUTO_INCREMENT&lr=lang_en">AUTO_INCREMENT=172 ;
 
--
-- Dumping data untuk tabel `master`
--
 
51&q=INSERT&lr=lang_en">INSERT 51&q=INTO&lr=lang_en">INTO `master` (`id_daftar`, `s_nama`, `s_jk`, `s_agama`, `s_tmp_lahir`, `s_tgl_lahir`, `jrsn_pil1`, `jrsn_pil2`, `tgl_daftar`, `nisn`, `noreg`, `Alamat`) 51&q=VALUES&lr=lang_en">VALUES
(30, 'GUSTI SUMAINDRA', 1, 1, 'sadadad', '2009-03-01', 1103, 1254, '2015-04-08', '0001', '0001', ''),
(31, 'AFIF PRASETYA', 1, 0, '', '0000-00-00', 0, 0, '2015-04-08', '0002', '0002', ''),
(32, 'RIO RIVALDO', 1, 1, 'BEKASI', '1999-06-19', 1289, 1103, '2015-04-08', '9994256564', '0003', ''),
(33, 'MITA OKTAVIANI', 2, 1, 'JAKARTA', '2000-10-16', 2063, 1174, '2015-04-09', '0004', '0004', ''),
(34, 'MUHAMMAD NAJRI ALGHIFARI', 1, 0, '', '0000-00-00', 0, 0, '2015-04-11', '0005', '0005', ''),
(35, 'MUHAMAD YUSUP', 1, 1, 'JAKARTA', '2000-04-01', 1254, 1289, '2015-04-13', '0006', '0006', ''),
(39, 'RIZKI RAHMAN', 1, 1, 'Jakarta', '2000-01-06', 1289, 1254, '2015-04-14', '0008', '0008', ''),
(40, 'MIZAM FADHLAN ANANDA', 1, 1, 'Jakarta', '2000-08-24', 2063, 1289, '2015-04-15', '0009', '0009', ''),
(41, 'AZKIYAI FAIZIN', 1, 1, 'JAKARTA', '1999-12-29', 2063, 1289, '2015-04-15', '0010', '0010', ''),
(42, 'ANDIKA FEBRIANA', 1, 1, '04', '2000-02-04', 2063, 1174, '2015-04-15', '0011', '0011', ''),
(43, 'ANAK ANUNG ANINDITO', 1, 1, 'JAKARTA', '2000-06-04', 2063, 1174, '2015-04-15', '0012', '0012', ''),
(44, 'RIZKY APRIANTO', 1, 1, 'Bekasi', '2000-04-15', 2063, 1174, '2015-04-15', '0013', '0013', ''),
(45, 'AVREDHO OZA YAMADHA', 1, 1, 'ngawi', '2000-03-25', 1289, 1103, '2015-04-15', '0014', '0014', ''),
(46, 'SAYYID MUHAMMAD', 1, 1, 'BEKASI', '2000-08-25', 1289, 1174, '2015-04-16', '0015', '0015', ''),
(47, 'ABDUL WAHAB', 1, 0, '', '0000-00-00', 0, 0, '2015-04-17', '0016', '0016', ''),
(48, 'ADE AGIL BUDI PRASETYO', 1, 1, 'BEKASI', '2000-05-12', 1289, 2063, '2015-04-18', '0018', '0018', ''),
(49, 'MUHAMMAD RIAN HASANI', 1, 0, '', '0000-00-00', 0, 0, '2015-04-18', '0019', '0019', ''),
(50, 'FATURRAHMAN', 1, 1, 'jakarta', '2000-09-18', 1289, 1103, '2015-04-18', '0020', '0020', ''),
(51, 'M. YUSUF EKO PRASETYO', 1, 1, 'SEMARANG', '2000-11-06', 1289, 2063, '2015-04-20', '0021', '0021', ''),
(52, 'M. DINA FRIZA', 1, 0, '', '0000-00-00', 0, 0, '2015-04-20', '0022', '0022', ''),
(53, 'M. FAHRI', 1, 1, 'jakarta', '2000-01-18', 1254, 1174, '2015-04-20', '0023', '0023', ''),
(54, 'AHMAD LATHOIFUL AWARIF', 1, 1, 'bekasi', '2000-09-07', 1254, 1174, '2015-04-20', '0024', '0024', ''),
(55, 'MUHAMMAD FAJAR', 1, 1, 'jakarta', '2001-01-01', 1289, 1174, '2015-04-20', '0011312741', '0025', ''),
(57, 'DAFIN NOUVAL ARIEF', 1, 1, 'bekasi', '2000-05-08', 1289, 2063, '2015-04-20', '0007', '0007', ''),
(58, 'RIFALDI PRATAMA', 1, 1, 'bekasi', '2000-07-05', 1289, 1254, '2015-04-20', '0026', '0026', ''),
(59, 'RISKY ANTONIO', 1, 0, '', '0000-00-00', 0, 0, '2015-04-21', '0028', '0028', ''),
(60, 'AGUS SETIAWAN', 1, 1, 'JAKARTA', '2000-08-02', 1289, 1254, '2015-04-21', '0029', '0029', ''),
(61, 'MUHAMMAD KHARRIS AMBIEYA', 1, 1, 'Jakarta', '2000-03-03', 1289, 1103, '2015-04-21', '0030', '0030', ''),
(62, 'DIMAS ARYA PRASETYO', 1, 1, 'jakarta', '2000-06-23', 1289, 1103, '2015-04-21', '0031', '0031', ''),
(64, 'MUHAMMAD JOUNAIDI K', 1, 1, 'JAKARTA', '2000-06-07', 1254, 2063, '2015-04-22', '0032', '0032', ''),
(65, 'FIRMAN MAULANA', 1, 1, 'JAKARTA', '2000-12-29', 1289, 2063, '2015-04-22', '0017', '0017', ''),
(66, 'ASEP HERMANSYAH', 1, 1, 'jakarta', '2000-05-26', 1103, 2063, '2015-04-22', '0027', '0027', ''),
(67, 'SETYO ADJIE WIBOWO', 1, 1, 'Kebumen', '1999-10-25', 1254, 1289, '2015-04-22', '0033', '0033', ''),
(68, 'ACHMAD RIZAL NOVRIANTO', 1, 1, 'jakarta', '1999-11-16', 1254, 1289, '2015-04-22', '9995637039', '0034', ''),
(71, 'NAFIS NURPAUZAN', 1, 1, 'Jakarta', '2000-06-30', 1103, 1289, '2015-04-22', '0035', '0035', ''),
(72, 'M.JANUAR SN', 1, 1, 'BEKASI', '2000-01-28', 1289, 1254, '2015-04-22', '0036', '0036', ''),
(76, 'M. SYAIPUL ROZAK NOER', 1, 0, '', '0000-00-00', 0, 0, '2015-04-23', '0037', '0037', ''),
(77, 'TRY SEPTYAN S', 1, 1, 'BEKASI', '2000-09-29', 1103, 1254, '2015-04-23', '0038', '0038', ''),
(78, 'AFIF NANDA RIZKILLAH', 1, 1, 'JAKARTA', '2000-03-09', 1289, 1254, '2015-04-24', '0039', '0039', ''),
(79, 'RACHMAT WAHYU RIFAI', 1, 1, 'JAKARTA', '2000-07-17', 1103, 1289, '2015-04-24', '0040', '0040', ''),
(80, 'SADAM BILAGUNA', 1, 1, 'Jakarta', '2000-02-20', 1289, 1103, '2015-04-25', '0041', '0041', ''),
(81, 'MUHAMMAD RIAN AZHIM', 1, 1, 'BEKASI', '2000-05-14', 1289, 1103, '2015-04-25', '0007014806', '0042', ''),
(82, 'DWI PRAYUDI', 1, 1, 'magelang ', '2000-07-11', 1289, 1254, '2015-04-27', '0043', '0043', ''),
(83, 'MUHAMMAD AKROM FAHMI', 1, 1, 'JAKARTA', '2001-02-04', 2063, 1289, '2015-04-27', '0044', '0044', ''),
(84, 'ACHMAD FAOZI', 1, 1, 'Brebes', '2000-03-29', 1103, 1289, '2015-04-27', '0045', '0045', ''),
(85, 'MUHAMMAD RIESKY PUTRA', 1, 1, 'Jakarta', '2000-06-08', 1103, 1289, '2015-04-27', '0046', '0046', ''),
(86, 'RIZKI MAULANA', 1, 1, 'JAKARTA', '1999-08-21', 1103, 1289, '2015-04-27', '0047', '0047', ''),
(87, 'IRFAN MULYANA', 1, 1, 'pandeglang', '2000-06-14', 1289, 1103, '2015-04-28', '0048', '0048', ''),
(88, 'MOHAMAD BAHRUDIN', 1, 1, 'JAKARTA', '2000-07-24', 2063, 1174, '2015-04-28', '0049', '0049', ''),
(89, 'RAIHANSYAH', 1, 1, 'jakrta ', '1999-08-25', 1289, 1174, '2015-04-28', '0050', '0050', ''),
(90, 'HERMAWAN', 1, 1, 'JAKARTA', '2000-01-10', 2063, 1103, '2015-04-28', '0051', '0051', ''),
(91, 'RUDI SALAM', 1, 1, 'JAKARTA', '2000-07-03', 1174, 2063, '2015-04-29', '0052', '0052', ''),
(92, 'KUAT FEBRIYANTO', 1, 1, 'JAKARTA', '2000-02-21', 1289, 1103, '2015-04-30', '0053', '0053', ''),
(93, 'LUTFI LUPIK HIDAY', 1, 1, 'PURWORJO', '2000-02-21', 1289, 1254, '2015-04-30', '0054', '0054', ''),
(94, 'FACHMI TRI PRASOJO', 1, 1, 'JAKARTA', '2000-02-22', 1254, 1289, '2015-04-30', '0055', '0055', ''),
(95, 'OKY SAPUTRA', 1, 1, 'JAKARTA', '1999-10-04', 1254, 1289, '2015-04-30', '0056', '0056', ''),
(96, 'NIKELSON', 1, 3, 'SUMATERA UTARA', '2000-05-20', 2063, 1289, '2015-04-30', '0057', '0057', ''),
(97, 'ALDI TAUFIQURRAHMAN', 1, 1, 'JAKARTA', '2000-03-29', 2063, 1289, '2015-04-30', '0058', '0058', ''),
(99, 'RIYADI ANDY SAPUTRA', 1, 1, 'PURWOREJO', '2000-01-08', 2063, 1174, '2015-04-30', '0059', '0059', ''),
(101, 'REZA RIZKI ISHIKAWA', 1, 1, 'JAKARTA', '1998-08-12', 1103, 1289, '2015-04-30', '9980907262', '0060', ''),
(102, 'MUHAMMAD RIZKI SETIAWAN', 1, 1, 'sragen', '2000-03-09', 1289, 2063, '2015-05-02', '0061', '0061', ''),
(103, 'MUHAMMAD DAVID FEBRIANSYAH JIBRAN', 1, 1, 'Jakarta', '2001-02-02', 1289, 2063, '2015-05-02', '0062', '0062', ''),
(104, 'PRAMUDYA CHANDRA UMBARAN', 1, 1, 'JAKARTA', '2000-07-07', 1289, 1103, '2015-05-02', '0063', '0063', ''),
(105, 'AHMAD BAGUS SATRIO', 1, 1, 'JAKARTA', '2000-07-14', 2063, 1174, '2015-05-02', '0064', '0064', ''),
(106, 'MUHAMMAD HAEDAR', 1, 1, 'BEKASI', '1999-04-02', 1254, 1289, '2015-05-02', '0065', '0065', ''),
(107, 'PAJAR BAHARI', 1, 1, 'JAKARTA', '1998-10-21', 1289, 1254, '2015-05-04', '0066', '0066', ''),
(108, 'EKANTO PRASETYO ADI', 1, 1, 'JAKARTA', '2000-05-04', 1289, 1254, '2015-05-04', '0067', '0067', ''),
(109, 'TEGUH PRAYOGA', 1, 1, 'KEBUMEN', '1999-06-05', 1289, 1254, '2015-05-04', '0068', '0068', ''),
(110, 'MUHAMMAD DZAKY FADILLAH YAHYA', 1, 1, 'JAKARTA', '2000-03-26', 2063, 1289, '2015-05-04', '0069', '0069', ''),
(111, 'AJI PAMUNGKAS', 1, 0, '', '0000-00-00', 0, 0, '2015-05-05', '0070', '0070', ''),
(112, 'GALIH MAULANA', 1, 1, 'BEKASI', '2000-06-09', 1289, 1254, '2015-05-05', '0071', '0071', ''),
(113, 'HILMI YAHYA', 1, 1, 'Garut', '2000-05-15', 1289, 1174, '2015-05-05', '0072', '0072', ''),
(114, 'AKMAL HAFIDH', 1, 0, '', '0000-00-00', 0, 0, '2015-05-05', '0073', '0073', ''),
(115, 'MUHAMMAD RAFLIANA', 1, 1, 'jakrta', '2000-05-26', 1289, 1103, '2015-05-06', '0074', '0074', ''),
(116, 'TIO LUTFI HAMBALI', 1, 1, 'BEKASI', '1999-10-30', 2063, 1254, '2015-05-06', '0075', '0075', ''),
(117, 'MUHAMMAD ANDI LALA', 1, 0, '', '0000-00-00', 0, 0, '2015-05-06', '0076', '0076', ''),
(118, 'DWI YULIANTO WIBOWO', 1, 1, 'Jakarta', '2000-03-27', 1254, 1103, '2015-05-07', '0078', '0078', ''),
(119, 'M. RIZKY', 1, 1, 'jakarta', '2000-06-16', 1289, 2063, '2015-05-07', '0002291391', '0077', ''),
(120, 'KUSNO HENDRAWAN S', 1, 1, 'JAKARTA', '1999-12-12', 2063, 1289, '2015-05-07', '0079', '0079', ''),
(121, 'EKO SAPTO PUTRA', 1, 1, 'jakarta', '1998-04-08', 1289, 2063, '2015-05-07', '0080', '0080', ''),
(122, 'WISNU SAPUTRA', 1, 1, 'JAKARTA', '1999-11-17', 1289, 1254, '2015-05-08', '0081', '0081', ''),
(123, 'M. NUR ZULFIANDA', 1, 1, 'JAKARTA', '2000-03-31', 1289, 1254, '2015-05-08', '0082', '0082', ''),
(124, 'INDRA PURNOMO', 1, 1, 'JAKARTA', '1999-12-05', 1289, 1254, '2015-05-08', '0083', '0083', ''),
(125, 'UZZI MUZHOFFAR', 1, 1, 'JAKARTA', '2000-03-11', 1254, 2063, '2015-05-08', '0084', '0084', ''),
(126, 'DAVIT SAN HAM', 1, 1, 'JAKARTA', '2000-06-12', 1103, 2063, '2015-05-08', '0085', '0085', ''),
(127, 'BAHRUL HAYAT', 1, 1, 'purwakarta', '2000-11-18', 2063, 1289, '2015-05-08', '0086', '0086', ''),
(128, 'ACHMAD AMRI', 1, 0, '', '0000-00-00', 0, 0, '2015-05-08', '0087', '0087', ''),
(129, 'FAJRUL FALAH', 1, 0, '', '0000-00-00', 0, 0, '2015-05-09', '0088', '0088', ''),
(130, 'ACHMAD FAUZI', 1, 1, 'JAKARTA', '2000-01-29', 1254, 1289, '2015-05-09', '0089', '0089', ''),
(131, 'ANNISA TULJANNAH', 2, 1, 'Jakarta', '1999-08-02', 2063, 1174, '2015-05-09', '0090', '0090', ''),
(132, 'DIKI MAULANA YUSUF', 1, 1, 'JAKARTA', '1999-07-23', 2063, 1103, '2015-05-09', '0091', '0091', ''),
(133, 'MUHAMAD DJIO NOVI YANTO', 1, 1, 'Jakarta', '1999-11-29', 1289, 1174, '2015-05-09', '0092', '0092', ''),
(134, 'MUHAMMAD ADI SYAHPUTRO', 1, 1, 'BOYOLALI', '1999-03-21', 1289, 1174, '2015-05-09', '0093', '0093', ''),
(135, 'DICKY AGUS SETIAWAN', 1, 1, 'KEBUMEN', '1999-08-13', 1289, 1174, '2015-05-09', '0094', '0094', ''),
(136, 'SURYA NANDA IBRAHIM', 1, 1, 'JAKARTA', '2000-06-24', 1289, 1254, '2015-05-09', '0095', '0095', ''),
(137, 'AGUNG PANGESTU', 1, 1, 'JAKARTA', '1999-06-24', 1103, 1289, '2015-05-09', '0096', '0096', ''),
(138, 'FAJAR SURYANA', 1, 1, 'jakarta', '2000-06-11', 1289, 1103, '2015-05-09', '0097', '0097', ''),
(139, 'RIZKI DWI HAMZAH', 1, 1, 'JAKARTA', '1999-11-03', 1289, 1254, '2015-05-09', '0098', '0098', ''),
(140, 'MUHAMMAD FAKHRIF', 1, 1, 'Jakarta', '2000-02-19', 1254, 1289, '2015-05-11', '0099', '0099', ''),
(141, 'ADITYAPERMANA', 1, 1, 'JAKARTA', '2000-08-08', 2063, 1103, '2015-05-11', '0100', '0100', ''),
(142, 'NUR ARIFFIN', 1, 1, 'BEKASI', '1999-11-13', 1254, 1103, '2015-05-11', '0101', '0101', ''),
(143, 'IQWANUL HAKIKI', 1, 1, 'jakarta ', '2000-08-21', 1254, 1103, '2015-05-11', '0102', '0102', ''),
(144, 'MAULANA BAGUS FEBRIYANTO', 1, 1, 'tegal', '2000-02-06', 1289, 1254, '2015-05-11', '0103', '0103', ''),
(145, 'ADITYA KUSUMA ROWI', 1, 1, 'JAKARTA', '1999-04-19', 1289, 1254, '2015-05-11', '0104', '0104', ''),
(147, 'ALDINUGROHO', 1, 0, '', '0000-00-00', 0, 0, '2015-05-11', '0105', '0105', ''),
(148, 'JEFRY PRASETYO', 1, 0, '', '0000-00-00', 0, 0, '2015-05-11', '0106', '0106', ''),
(149, 'MUHAMMAD ARMAN FIRDAUS', 1, 1, 'JAKARTA', '2000-04-05', 1254, 2063, '2015-05-11', '0107', '0107', ''),
(150, 'ROLIN YUSTRIA', 1, 1, 'JAKARTA', '2000-07-27', 1254, 1174, '2015-05-11', '0108', '0108', ''),
(151, 'NAUFAL MUHAMMAD T', 1, 1, 'KLATEN', '2000-04-22', 1289, 2063, '2015-05-11', '0109', '0109', ''),
(152, 'MUHAMMAD FATHUL', 1, 1, 'JAKARTA', '2000-03-25', 1289, 1254, '2015-05-11', '0110', '0110', ''),
(153, 'RENDI MAULANA', 1, 1, 'JAKARTA', '2000-02-20', 2063, 1289, '2015-05-11', '0111', '0111', ''),
(154, 'RIZKI ARDIANSYAH PUTRA', 1, 1, 'jakarta timur', '1999-10-13', 2063, 1289, '2015-05-11', '0112', '0112', ''),
(155, 'ARIF SETIAWAN', 1, 1, 'JAKARTA', '2000-03-07', 1289, 1254, '2015-05-11', '0113', '0113', ''),
(156, 'RIDWAN ARDIANSYAH', 1, 1, 'JAKARTA', '2000-08-07', 2063, 1254, '2015-05-11', '0114', '0114', ''),
(157, 'YULISTIYANA', 2, 1, 'JAKARTA', '1999-04-26', 1174, 2063, '2015-05-11', '0115', '0115', ''),
(158, 'YOSEF YONANDA', 1, 1, 'indramayu', '1999-11-27', 1254, 1289, '2015-05-11', '0116', '0116', ''),
(159, 'MUHAMMAD DWI CAHYO', 1, 1, 'JAKARTA', '2000-06-10', 1289, 1103, '2015-05-11', '0117', '0117', ''),
(160, 'AGUNG HENDRAWAN', 1, 1, 'magelang', '2000-03-13', 1254, 1174, '2015-05-11', '0118', '0118', ''),
(161, 'RIZKINUGROHO', 1, 1, 'JAKARTA', '1999-12-18', 1289, 1103, '2015-05-12', '0', '0119', ''),
(162, 'FAUZAN ALFIANSYAH', 1, 1, 'JAKARTA', '1999-11-07', 1254, 1289, '2015-05-12', '0120', '0120', ''),
(163, 'AHMAD JAIS', 1, 0, '', '0000-00-00', 0, 0, '2015-05-12', '0121', '0121', ''),
(164, 'HAROM', 1, 1, 'JAKARTA', '2000-03-12', 1289, 1103, '2015-05-12', '0122', '0122', ''),
(165, 'PUTRA TRI PRASTYO', 1, 1, 'BEKASI', '2000-07-16', 1103, 1174, '2015-05-12', '0123', '0123', ''),
(166, 'ABDUL AZIZ', 1, 1, 'JAKARTA', '1999-05-07', 1289, 1103, '2015-05-12', '0124', '0124', ''),
(168, 'MUHAMAD FACHRI SYAHPUTRA', 1, 0, '', '0000-00-00', 0, 0, '2015-05-12', '0126', '0126', ''),
(169, 'RIZQY DANENDRA', 1, 1, 'JAKARTA', '2001-02-08', 1254, 1174, '2015-05-12', '0011173783', '0127', ''),
(170, 'EGI ROHMAN', 1, 0, '', '0000-00-00', 0, 0, '2015-05-12', '0128', '0128', ''),
(171, 'tes', 0, 0, 'sdad', '0000-00-00', 0, 0, '0000-00-00', '', '09090', 'sdsadsad');
 
-- --------------------------------------------------------
 
--
-- Struktur dari tabel `multiupload`
--
 
51&q=CREATE&lr=lang_en">CREATE 51&q=TABLE&lr=lang_en">TABLE 51&q=IF%20NOT%20EXISTS&lr=lang_en">IF 5.1/en/non-typed-operators.html">NOT EXISTS `multiupload` (
`id` 51&q=INT&lr=lang_en">int(11) 5.1/en/non-typed-operators.html">NOT 51&q=NULL&lr=lang_en">NULL,
  `nama` 51&q=VARCHAR&lr=lang_en">varchar(100) 5.1/en/non-typed-operators.html">NOT 51&q=NULL&lr=lang_en">NULL,
  `size` 51&q=VARCHAR&lr=lang_en">varchar(100) 5.1/en/non-typed-operators.html">NOT 51&q=NULL&lr=lang_en">NULL,
  `type` 51&q=VARCHAR&lr=lang_en">varchar(100) 5.1/en/non-typed-operators.html">NOT 51&q=NULL&lr=lang_en">NULL,
  `dir` 51&q=TEXT&lr=lang_en">text 5.1/en/non-typed-operators.html">NOT 51&q=NULL&lr=lang_en">NULL
) 51&q=ENGINE&lr=lang_en">ENGINE=51&q=INNODB&lr=lang_en">InnoDB  51&q=DEFAULT&lr=lang_en">DEFAULT 51&q=CHARSET&lr=lang_en">CHARSET=latin1 51&q=AUTO_INCREMENT&lr=lang_en">AUTO_INCREMENT=6 ;
 
--
-- Dumping data untuk tabel `multiupload`
--
 
51&q=INSERT&lr=lang_en">INSERT 51&q=INTO&lr=lang_en">INTO `multiupload` (`id`, `nama`, `size`, `type`, `dir`) 51&q=VALUES&lr=lang_en">VALUES
(1, '2015-05-21 13.16.08.jpg', '293566', 'image/jpeg', 'upload/2015-05-21 13.16.08.jpg'),
(2, '2015-05-21 13.22.11.jpg', '326486', 'image/jpeg', 'upload/2015-05-21 13.22.11.jpg'),
(3, '11188473_690890801034110_552921107037786929_n.jpg', '19935', 'image/jpeg', 'upload/11188473_690890801034110_552921107037786929_n.jpg'),
(4, 'alldebrid30_3.png', '145640', 'image/png', 'upload/alldebrid30_3.png'),
(5, 'aska.jpg', '141976', 'image/jpeg', 'upload/aska.jpg');
 
-- --------------------------------------------------------
 
--
 
--
-- Struktur dari tabel `tbl_user`
--
 
--
-- Struktur dari tabel `t_jurusan`
--
 
51&q=CREATE&lr=lang_en">CREATE 51&q=TABLE&lr=lang_en">TABLE 51&q=IF%20NOT%20EXISTS&lr=lang_en">IF 5.1/en/non-typed-operators.html">NOT EXISTS `t_jurusan` (
`id_jur` 51&q=INT&lr=lang_en">int(5) 5.1/en/non-typed-operators.html">NOT 51&q=NULL&lr=lang_en">NULL,
  `jurusan` 51&q=VARCHAR&lr=lang_en">varchar(30) 5.1/en/non-typed-operators.html">NOT 51&q=NULL&lr=lang_en">NULL,
  `jur_ket` 51&q=VARCHAR&lr=lang_en">varchar(10) 5.1/en/non-typed-operators.html">NOT 51&q=NULL&lr=lang_en">NULL,
  `kdjur` 51&q=VARCHAR&lr=lang_en">varchar(10) 5.1/en/non-typed-operators.html">NOT 51&q=NULL&lr=lang_en">NULL,
  `quota` 51&q=VARCHAR&lr=lang_en">varchar(5) 5.1/en/non-typed-operators.html">NOT 51&q=NULL&lr=lang_en">NULL,
  `kelas` 51&q=VARCHAR&lr=lang_en">varchar(5) 5.1/en/non-typed-operators.html">NOT 51&q=NULL&lr=lang_en">NULL,
  `bayar` 51&q=VARCHAR&lr=lang_en">varchar(20) 5.1/en/non-typed-operators.html">NOT 51&q=NULL&lr=lang_en">NULL
) 51&q=ENGINE&lr=lang_en">ENGINE=51&q=INNODB&lr=lang_en">InnoDB  51&q=DEFAULT&lr=lang_en">DEFAULT 51&q=CHARSET&lr=lang_en">CHARSET=latin1 51&q=AUTO_INCREMENT&lr=lang_en">AUTO_INCREMENT=2064 ;
 
--
-- Dumping data untuk tabel `t_jurusan`
--
 
51&q=INSERT&lr=lang_en">INSERT 51&q=INTO&lr=lang_en">INTO `t_jurusan` (`id_jur`, `jurusan`, `jur_ket`, `kdjur`, `quota`, `kelas`, `bayar`) 51&q=VALUES&lr=lang_en">VALUES
(0, 'Kosong', '', '', '', '', ''),
(1103, 'TITL', '', '', '160', '4', '3400000'),
(1174, 'TAV', '', '', '120', '2', '3400000'),
(1254, 'TP', '', '', '160', '4', '3400000'),
(1289, 'TKR', '', '', '160', '4', '3400000'),
(2063, 'TKJ', '', '', '160', '4', '4045000');
 
--
-- Indexes for dumped tables
--
 
--
-- Indexes for table `evenement`
--
 
 
--
-- Indexes for table `master`
--
51&q=ALTER&lr=lang_en">ALTER 51&q=TABLE&lr=lang_en">TABLE `master`
 51&q=ADD&lr=lang_en">ADD 51&q=PRIMARY%20KEY&lr=lang_en">PRIMARY KEY (`id_daftar`);
 
--
-- Indexes for table `multiupload`
--
 
51&q=ALTER&lr=lang_en">ALTER 51&q=TABLE&lr=lang_en">TABLE `t_jurusan`
 51&q=ADD&lr=lang_en">ADD 51&q=PRIMARY%20KEY&lr=lang_en">PRIMARY KEY (`id_jur`);
 
--
-- AUTO_INCREMENT for dumped tables
--
 
--
-- AUTO_INCREMENT for table `evenement`
--
--
-- AUTO_INCREMENT for table `master`
--
51&q=ALTER&lr=lang_en">ALTER 51&q=TABLE&lr=lang_en">TABLE `master`
51&q=MODIFY&lr=lang_en">MODIFY `id_daftar` 51&q=INT&lr=lang_en">int(5) 5.1/en/non-typed-operators.html">NOT 51&q=NULL&lr=lang_en">NULL 51&q=AUTO_INCREMENT&lr=lang_en">AUTO_INCREMENT,51&q=AUTO_INCREMENT&lr=lang_en">AUTO_INCREMENT=172;
 
51&q=ALTER&lr=lang_en">ALTER 51&q=TABLE&lr=lang_en">TABLE `t_jurusan`
51&q=MODIFY&lr=lang_en">MODIFY `id_jur` 51&q=INT&lr=lang_en">int(5) 5.1/en/non-typed-operators.html">NOT 51&q=NULL&lr=lang_en">NULL 51&q=AUTO_INCREMENT&lr=lang_en">AUTO_INCREMENT,51&q=AUTO_INCREMENT&lr=lang_en">AUTO_INCREMENT=2064;
/*!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 */;

Disini saya mengunakan 2 Tabel yaitu tabel master & t_jurusan dimana nantinya untuk mengambil rekap data setiap jurusan, setelah selesai dengan database & tabel seperti diatas sekarang kita buat file data.php untuk mengambil data nya dengan JSON

Source code

<?php
$con = mysql_connect("localhost","root","");
 
if (!$con) {
  die('Could not connect: ' . mysql_error());
}
 
mysql_select_db("tutorial", $con);
 
$result = mysql_query("SELECT * FROM t_jurusan");
 
$rows = array();
while($r = mysql_fetch_array($result)) {
 
 
	$kode= $r[0];
	$row[0] = $r[1];
 
	$hasil2 = mysql_query("SELECT count(*) as jum FROM master WHERE jrsn_pil1 = '$kode'");
    $data2 = mysql_fetch_row($hasil2);
    $row[1] = $data2[0];
 
 
	array_push($rows,$row);
}
 
print json_encode($rows, JSON_NUMERIC_CHECK);
 
mysql_close($con);
?>

Untuk Set up Chart nya seperti ini

Source code

var options = {
    chart: {
        renderTo: 'container',
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
    },
    title: {
        text: 'Web Sales & Marketing Efforts'
    },
    tooltip: {
        formatter: function() {
            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
        }
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                color: '#000000',
                connectorColor: '#000000',
                formatter: function() {
                    return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                }
            }
        }
    },
    series: [{
        type: 'pie',
        name: 'Browser share',
        data: []
    }]
}

Sekarang kita ambil data Json seperti dibawah ini

Source code

$.getJSON("data.php", function(json) {
    options.series[0].data = json;
    chart = new Highcharts.Chart(options);
});

Script lengkap seperti dibawah ini :

Source code

<!DOCTYPE HTML>
<html>
	<head>
 
    <title>Membuat Chart Pie dengan Highcharts dan Mysql di PHP</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
	<link href="assets/css/bootstrap.css" rel="stylesheet" media="screen">
	<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
 
		<script type="text/javascript" src="assets/js/jquery.2.1.1.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function() {
			var options = {
				chart: {
	                renderTo: 'container',
	                plotBackgroundColor: null,
	                plotBorderWidth: null,
	                plotShadow: false
	            },
	            title: {
	                text: 'Statistik Pendaftar Berdasarkan Jurusan'
	            },
	            tooltip: {
	                formatter: function() {
	                    return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
	                }
	            },
	            plotOptions: {
	                pie: {
	                    allowPointSelect: true,
	                    cursor: 'pointer',
	                    dataLabels: {
	                        enabled: true,
	                        color: '#000000',
	                        connectorColor: '#000000',
	                        formatter: function() {
	                            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
	                        }
	                    }
	                }
	            },
	            series: [{
	                type: 'pie',
	                name: 'Browser share',
	                data: []
	            }]
	        }
 
	        $.getJSON("data.php", function(json) {
				options.series[0].data = json;
	        	chart = new Highcharts.Chart(options);
	        });
 
 
 
      	});   
		</script>
		<script src="assets/js/highcharts.js"></script>
        <script src="assets/js/exporting.js"></script>
	</head>
	<body>
		<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="http://andeznet.com">AndezNet</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="media.php">Back To Home</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div> 
  </div>
 
		<div class="row-fluid">
			<div class="span12">
			  <div class="row-fluid">
				<div class="alert alert-info">
					<a name="contact"></a>
 
				</div><!--/span-->
			  </div><!--/row-->
			</div><!--/span-->
	</div><!--/row-->	
 
 
		<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
 
 
	<div class="row-fluid">
			<div class="span12">
			  <div class="row-fluid">
				<div class="alert alert-info">
					<a name="contact"></a>
				  <h2>www.andeznet.com</h2>
				  <p class="text-info">Gudang Teknologi & Informasi</p>
				  <p>&copy; <a href="http://andeznet.com">www.andeznet.com</a>&nbsp<?php echo date("Y");?></p>
				</div><!--/span-->
			  </div><!--/row-->
			</div><!--/span-->
	</div><!--/row-->	
 
	</body>
</html>

Nah, jika sudah berhasil maka akan muncul seperti gambar dibawah ini

Mudah bukan?? hehe sekian tutorial kali ini mudah-mudahan bermanfaat “HAPPY CODING & PROGRAMING”

Untuk source code lengkap bisa download DISINI

Membuat Chart Pie dengan Highcharts dan Mysql di PHP

You may also like...

Leave a Reply Cancel reply

Artikel Terbaru

Categories

Archives

Membuat Chart Pie dengan Highcharts dan Mysql di PHP

You may also like...

Membuat Searching Sorting Pagging Mengunakan JqueryDataTables Php Bootstrap Mysqli

Membuat Polling menggunakan Ajax JQuery dan PHP

AngularJS Itu Apa sih???

Leave a Reply Cancel reply

Post Popular

Artikel Terbaru

Categories

Archives