Menampilkan data kedalam grafik AMChart dengan PHP dan MySQL
Wednesday 20 September 2017
Edit
Menampilkan data yang ada didatabase ke dalam grafik tentu sangat memudahkan user dalam membaca kondisi yang ada pada data, contoh pada suatu perusahaan manufactur akan lebih mudah melihat stock barang, penjualan dan PO dengan melihat grafik.
Pada kesempatan kali ini saya akan memberikan tutorial Menampilkan data kedalam grafik AMChart dengan PHP dan MySQL dengan mudah bagaimana caranya.? yuk di simak.
Untuk menampilkan data kedalam grafik dengan plugin AMchart anda perlu memparsing data dari array PHP ke dalam JSON dengan begitu data yang ada di databse bisa ditampilkan ke dalam grafik AMchart.
- Langkah pertama adalah mendownload AMchart di websitenya https://www.amcharts.com kemudian buat sebuat folder dengan nama grafik lalu simpan di path folder C:/xampp/htdocs/grafik
- selanjutnya membuat database dengan nama test, kemudian silahkan copas SQL dumping di bawah ini ke PHPmyadmin.
-- phpMyAdmin SQL Dump
-- version 4.5.1
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: Sep 20, 2017 at 09:45 AM
-- Server version: 10.1.16-MariaDB
-- PHP Version: 5.5.38
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
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: `test`
--
-- --------------------------------------------------------
--
-- Table structure for table `my_chart_data`
--
CREATE TABLE `my_chart_data` (
`category` date NOT NULL,
`value1` int(11) NOT NULL,
`value2` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `my_chart_data`
--
INSERT INTO `my_chart_data` (`category`, `value1`, `value2`) VALUES
('2013-08-24', 417, 127),
('2013-08-25', 417, 356),
('2013-08-26', 531, 585),
('2013-08-27', 333, 910),
('2013-08-28', 552, 30),
('2013-08-29', 492, 371),
('2013-08-30', 379, 781),
('2013-08-31', 767, 494),
('2013-09-01', 169, 364),
('2013-09-02', 314, 476),
('2013-09-03', 437, 759);
/*!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 Selanjutnya silahkan copy dan paste kode di bawah ini kemudian simpan dengan nama data.php ke direktori C:/xampp/htdocs/grafik, kode di bawah ini memparsing array data dari PHP ke JSON data JSON inilah yang digunakan untuk menampilkan grafik, pastikan juga nama databse dan tabel yang di panggil sesuai.
<?php
// we need this so that PHP does not complain about deprectaed functions
error_reporting( 0 );
// Connect to MySQL
$db_host = "localhost";
$db_user = "root";
$db_pass = "";
$db_name = "test";
$koneksi = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
if(mysqli_connect_errno()){
echo 'Gagal melakukan koneksi ke Database : '.mysqli_connect_error();
}
// Fetch the data
$query = "
SELECT *
FROM my_chart_data
ORDER BY category ASC";
$result = mysqli_query($koneksi, $query );
// All good?
if ( !$result ) {
// Nope
$message = 'Invalid query: ' . mysqli_error() . "\n";
$message .= 'Whole query: ' . $query;
die( $message );
}
// Print out rows
$prefix = '';
echo "[\n";
while ( $row = mysqli_fetch_assoc( $result ) ) {
echo $prefix . " {\n";
echo ' "category": "' . $row['category'] . '",' . "\n";
echo ' "value1": ' . $row['value1'] . ',' . "\n";
echo ' "value2": ' . $row['value2'] . '' . "\n";
echo " }";
$prefix = ",\n";
}
echo "\n]";
// Close the connection
mysqli_close( $link );
?>
- Langkah selanjutnya adalah menampilkan data JSON ke grafik, silahkan copas kode di bawah ini dan simpan dengan nama index.php ke dalam direktori C:/xampp/htdocs/grafik
<html>
<head>
<title>Data Grafik PHP & MySQL</title>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 310px;"></div>
<!-- Custom scripts required by this view -->
<script src="amcharts/amcharts.js"></script>
<script src="amcharts/serial.js"></script>
<script src="amcharts/dataloader.min.js"></script>
<script>
var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"dataLoader": {
"url": "data.php"
},
"pathToImages": "http://www.amcharts.com/lib/images/",
"categoryField": "category",
"dataDateFormat": "YYYY-MM-DD",
"startDuration": 1,
"categoryAxis": {
"parseDates": true
},
"graphs": [ {
"valueField": "value1",
"bullet": "round",
"bulletBorderColor": "#FFFFFF",
"bulletBorderThickness": 2,
"lineThickness ": 2,
"lineAlpha": 0.5
}, {
"valueField": "value2",
"bullet": "round",
"bulletBorderColor": "#FFFFFF",
"bulletBorderThickness": 2,
"lineThickness ": 2,
"lineAlpha": 0.5
} ]
} );
</script>
</body>
</html>
Silahkan jalankan di browser anda dengan mengtikan URL localhost/grafik jika berhasil maka akan muncul tampilan grafik seperti di bawah ini
DOWNLOAD
Tutorial sudah saya berikan dan link download juga sudah saya berikan, tinggal kemauan anda untuk belajar yang perlu dilakukan, semoga tutorial singkat ini bisa bermanfaat dan berguna bagi anda yang membutuhkannya.
Happy Coding & Programming