Wednesday , 18 October 2017
Home » Tutorial » Tutorial Mudah Buat Grafik Highchart Dengan Database MySQL Cara Programmer Kampung
Tutorial Mudah Buat Grafik Highchart Dengan Database MySQL Cara Programmer Kampung

Tutorial Mudah Buat Grafik Highchart Dengan Database MySQL Cara Programmer Kampung

Dibaca : 11922

Tutorial ini saya buat untuk memenuhi permintaan sahabat saya Pak Fendi Ferdiyawardi dari LPSE Kabupaten Lombok Timur tentang bagaimana membuat grafik batang secara horizontal sesuai yang ada di website http://e-monev.lomboktengahkab.go.id. Mohon ma’af, tutorial ini adalah tutorial cara programer kampung, yang bagi para master jangan diketawaain.

Pertama, silahkan lihat demo DISINI.

Kedua, lihat source kodenya sesuai screenshoot di bawah ini dan simpan dengan nama index.php.

ltm_1

atau source code lengkapnya ini


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>SiMONEV Pemerintah Kabupaten Lombok Tengah</title>
<script src="javascripts/jquery-1.11.1.min.js"></script>
<script src="javascripts/javascripts/numberformat.js"></script>
</head>
<body class="easyui-layout">
<center><span style="font-size:16px; font-family:Tahoma, Geneva, sans-serif"><strong>REKAPITULASI PAKET LELANG MELALUI e-PROC<br/>DI LPSE KABUPATEN LOMBOK TENGAH TAHUN 2011 - 2015</strong></span></center>
<br />
<table width="98%"  align="center" border="0" cellspacing="0" cellpadding="0" class="grafik-row-1">
<tbody>
<tr>
<td width="100%" valign="top">
<div  id="kota"></div>
</td>
</tr>
</tbody>
</table>

<script src="javascripts/highcharts.js" type="text/javascript"></script>
<script src="javascripts/exporting.js" type="text/javascript"></script>
<script type="text/javascript" src="javascripts/themes/grid.js"></script>

<script type="text/javascript">
$(function () {

$('#kota').highcharts({
chart: {
type: 'bar',
},
title: {
text: 'Jumlah Paket Selesai Berdasarkan<br/>Kota Asal Pemenang Lelang Tahun 2011 - 2015'
},
xAxis: {
categories: ["Lombok Tengah","Mataram","Luar NTB","Lombok Utara","Lombok Barat","Dompu"],
title: {
text: null
}
},

yAxis: {
min: 0,
title: {
text: 'Jumlah Paket (Per Kota)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' '
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Jumlah Paket',
data: [44 ,32 ,17 ,3 ,3 ,1],
color: '#68f10d'
}]
});
});

</script>

</body>
</html>

Ketiga, silahkan klik semua url src=”……..” dan save/simpan.

contoh :


<script src="javascripts/jquery-1.11.1.min.js"></script>
<script src="javascripts/javascripts/numberformat.js"></script>

dan seterusnya.

Kemudian simpan dengan nama file yang sesuai dengan struktur folder seperti di bawah ini.

ltm_2

Keempat download file grafik.sql

Kelima, edit file index.php pada bagian-bagian di bawah ini

Letakkan dibawah </table> code berikut ini :


<?php

// GRAFIK KOTA

$nama_kota=array();

$jml_paket=array();

$sql = "SELECT nama_kota, SUM(code) AS jml_paket

FROM `paket`, asal_kota

WHERE asal_kota.id_asal_kota=paket.id_asal_kota

AND paket.id_asal_kota < 12

GROUP BY paket.id_asal_kota ORDER BY jml_paket DESC";

$qry = mysql_query($sql) or die(mysql_error());

while($row=mysql_fetch_assoc($qry)){

$nama_kota[] = $row['nama_kota'];

$jml_paket[] = $row['jml_paket'];

}

//jurus Narno...hahahahah

$aray_nama_kota=join(" ,",$nama_kota);

$aray_jml_paket=join(" ,",$jml_paket);

?>

Cari kata baris ini :

categories: ["Lombok Tengah","Mataram","Luar NTB","Lombok Utara","Lombok Barat","Dompu"],

Ganti seperti ini :

categories: ["<?php echo implode($nama_kota, '","'); ?>"],

Cari baris ini :


series: [{

name: 'Jumlah Paket',

data: [44 ,32 ,17 ,3 ,3 ,1],

color: '#68f10d'

}]

Ganti seperti ini :


series: [{

name: 'Jumlah Paket',

data: [<?php echo $aray_jml_paket;?>],

color: '#68f10d'

}]

CATATAN<br /> Perlu diketahui bahwa source code :</p> <pre class="brush: xml; title: ; notranslate" title="">categories: ["<?php echo implode($nama_kota, '","'); ?>"],</pre> <p>ini lelah saya cari lewat browsing yang lama sekali, ngga ketemu-ketemu. Tapi alhamdulillah bisa saya share ke temen-temen semua.<br />

Selesai, mohon ma’af atas segala kekurangan.

6 comments

  1. bayu anggoro sakti

    mas boleh minta source code nya full?
    soalnya ada yang bingung, terutama file exportnya..
    tolong kirim source codenya ya?
    di email bayu.anggoro.s@mail.ugm.ac.id

  2. terimakasih mas sharingnya, salam dari lpse kemenkes.

  3. mas boleh minta source code nya full?
    soalnya ada yang bingung, terutama file exportnya..

    di email wirsha@yahoo.com

  4. Membuat Grafik Batang Dengan Database MySQL

    >> Klik Disini <<

  5. mas minta website full nya za mohon bantuannya tolong za mas kirim ke email rido.ozil@gmail.com

  6. mas boleh minta source code nya full?
    soalnya ada yang bingung, terutama file exportnya..
    tolong kirim source codenya ya?
    DI email apris808@gmail.com

Leave a Reply

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

*