Membuat grafik ,menggunakan Google carts secara mudah dengan php jquery

Secara umum proses analisa report dapat dilakukan dengan melihat suatu grafik , maka dapat di tarik suatu kesimpulan yang akan mengacu kepada pembuatan analisis tertentu misalnya keuangan , trafik website dll.di tengah kesibukan saya , saya coba untuk memberikan sedikit ilmu saya yang kurang berguna ini.

 

 Require tools (aplikasi yang di butuhkan):

  1.   Xampp 1.7.7
  2.  Php > 5.3
  3.  Text editor / sublime / npp dll
  4.  browser Mozilla , Chrome dan lain lain.

Langkah Pengerjaan.

  1. Siapkan kopi + rokok
  2. Otak yang tenang , sehingga gampang memahami (hehe..)
  3. Account google.

 

1.       Buka halaman https://developers.google.com/chart/interactive/docs/quick_start sehingga akan menemukan kode di bawah ini..

[sourcecode language="html"]
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {

// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);

// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>

<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
[/sourcecode]

karena berbagai macam style graph yang telah di support oleh google dapat kita lihat pada sources code di atas dengan hasil di bawah ini

Gambar hasil html.

 

Ok.. langsung saja kita latih mengenai pembuatan database.  Dengan membuat database graph pada localhost/phpmyadmin.membuat tabel pada source code di bawah ini.

[sourcecode language="sql"]
CREATE TABLE IF NOT EXISTS `latihan` (

`id` int(255) NOT NULL,

`item` varchar(20) NOT NULL,

`stok` int(20) NOT NULL,

`terjual` int(20) NOT NULL,

`create_at` datetime NOT NULL

) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;

[/sourcecode]

Membuat isi tabel sesuai dengan kebutuhan , maka akan kita buat sebagai berikut sesuai dengan latihan yang akan saya bahas pada tema tutorial kali ini.

[sourcecode language="sql"]
INSERT INTO `latihan` (`id`, `item`, `stok`, `terjual`, `create_at`) VALUES

(1, 'rebook', 50, 17, '2017-01-08 04:22:34'),

(2, 'nike', 70, 12, '2017-01-15 02:19:23'),

(3, 'rebook', 50, 25, '2017-02-08 04:22:34'),

(4, 'nike', 70, 54, '2017-02-17 02:19:23');

[/sourcecode]

Membuat file koneksi php untuk koneksi dari php ke suatu database. di sini saya gunakan MYSQL.

[sourcecode language="php"]
<?php

$server                 = "localhost";

$username         = "root";

$password          = ""; //empty because default on xampp is empty

$link = mysql_connect('localhost', 'root', '');

mysql_select_db('graph',$link) or die('Could not connect: ' . mysql_error());

?>

[/sourcecode]

Buat file index.php sebagai percobaan dengan koneksi database tersebut sehingg dapat tersambung dengan baik. tampilan di bawah ini yang ingin saya buat untuk saya buat.

  1. user memilih bulan
  2. user mendapatkan grafik.

Ok langsung saja kita koding seperti di bawah ini. simpan dengan index.php

[sourcecode language="php"]
<!DOCTYPE html>

<html>

<head>

<title>latihan graph ajax</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$('#bln').on("change",function(){

var bln = $('#bln').val();

//load google function

drawChart(bln);

}); //end on click

}); //end document ready

 

// Load the Visualization API and the corechart package.

google.charts.load('current', {'packages':['corechart']});

 

// Set a callback to run when the Google Visualization API is loaded.

google.charts.setOnLoadCallback(drawChart);

 

// Callback that creates and populates a data table,

// instantiates the pie chart, passes in the data and

// draws it.

function drawChart(req) {

//get request from server

var jsonData = $.ajax({

url: "main.php?g="+req,

dataType: "json", // type of data we're expecting from server

async: false // make true to avoid waiting for the request to be complete

});

 

// Create our data table out of JSON data loaded from server.

var data = new google.visualization.DataTable(jsonData.responseText);

 

// Instantiate and draw our chart, passing in some options.

var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));

chart.draw(data, {width: 900, height: 500});

}

</script>

</head>

 

<body>

<label>Pilih Bulan</label>

<select name="bulan" id="bln">

<option value="01">Jan</option>

<option value="02">Feb</option>

</select>

 

<div id="chart_div"></div>

</body>

 

</html>

[/sourcecode]

 

untuk lebih lengkapnya dapat di download di sini (silakan hubungi admin jika link rusak !)

 

Leave a Reply

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