ribbon iwa

Membuat Grafik AnyChart Dengan Php MySQL

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

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

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

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

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

 -- phpMyAdmin SQL Dump
-- version 4.8.3
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Nov 11, 2018 at 04:22 PM
-- Server version: 10.1.36-MariaDB
-- PHP Version: 7.2.10

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


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

--
-- Database: `anychart`
--

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

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

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

--
-- Dumping data for table `tblcomplaints`
--

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

--
-- Indexes for dumped tables
--

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

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tblcomplaints`
--
ALTER TABLE `tblcomplaints`
  MODIFY `complaintNumber` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=68;
COMMIT;

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

Kedua buat file dengan nama config.php file ini berfungsi untuk menghubungkan kedalam databse.

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

Terakhir buat file dengan nama index.php, file ini berisi script sebagai form untuk menampilkan AnyChart dari database di atas.

 <?php session_start();
include('config.php');
?>
<!DOCTYPE html>
<html>
<head>
 <title>AnyCharts</title>
 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
 <script src="bootstrap/js/bootstrap.min.js"></script>
 
 <!--code install AnyCharts-->
 <script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.4.1/themes/dark_earth.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
  <link rel="stylesheet" href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" />
  <link rel="stylesheet" href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" />
  <style>
  #container {
    width: 100%;
    height: 500px;
    margin: 0;
    padding: 0;
  }
</style>

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

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


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


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


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


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


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


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


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


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


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

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


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

?>

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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


SUBSCRIBE TO OUR NEWSLETTER

close