 kamarin saya sudah membuat tutorial
Cara Membuat Grafik Sendiri di PHP kali ini saya akan share tutorial cara membuat grafik line, grafik line pada umumnya sering digunakan untuk menggambarkan suatu perkembangan atau perubahan dari waktu ke waktu. <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> untuk plugin dari highcharts anda bisa mendowloadnya disini atau bisa menyalin kode berikut <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script> <script type="text/javascript" src="http://code.highcharts.com/modules/exporting.js"></script> sekarang buat project dengan nama terserah anda, kemudian salin kode berikut dan simpan file dengan nama index.php <!DOCTYPE html>
<html>
<head>
<title>MEMBUAT GRAFIK LINE DENGAN PLUGIN HIGHCHART</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/modules/exporting.js"></script>
<style type="text/css">
.container { margin: auto; padding: 5px; width: 800px; border: 2px solid #DBDBDB; }
</style>
</head>
<body>
<div class="container">
<div class="grafik" style="width:100%; height:400px;"></div>
</div>
<script type="text/javascript">
$('.grafik').highcharts({
chart: {
type: 'line',
marginTop: 80
},
credits: {
enabled: false
},
tooltip: {
shared: true,
crosshairs: true,
headerFormat: '<b>{point.key}</b>< br />'
},
title: {
text: 'JUMLAH SISWA SD TRITUNGGAL'
},
subtitle: {
text: 'TAHUN 2013 - 2015'
},
xAxis: {
categories: [2013,2014,2015],
labels: {
rotation: 0,
align: 'right',
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
}
},
legend: {
enabled: true
},
series: [{
"name":"pria",
"data":[240,318,291]
},{
"name":"wanita",
"data":[229,340,337]
}]
});
</script>
</body>
</html>
lalu bagaimana jika data yang akan di jadikan grafik dari database, pertama buat database dengan nama terserah anda, kemudian buat table periode dan datas, salin kode berikut -- ----------------------------
-- Table structure for datas
-- ----------------------------
DROP TABLE IF EXISTS `datas`;
CREATE TABLE `datas` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`periode_id` int(11) DEFAULT NULL,
`pria` int(11) DEFAULT NULL,
`wanita` int(11) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=latin1;
-- ----------------------------
-- Records of datas
-- ----------------------------
INSERT INTO `datas` VALUES ('1', '1', '240', '229');
INSERT INTO `datas` VALUES ('2', '2', '318', '340');
INSERT INTO `datas` VALUES ('3', '3', '291', '337');
-- ----------------------------
-- Table structure for periode
-- ----------------------------
DROP TABLE IF EXISTS `periode`;
CREATE TABLE `periode` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`periode` year(4) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=latin1;
-- ----------------------------
-- Records of periode
-- ----------------------------
INSERT INTO `periode` VALUES ('1', '2013');
INSERT INTO `periode` VALUES ('2', '2014');
INSERT INTO `periode` VALUES ('3', '2015');
dalam hal ini anda harus menggunakan array di PHP menjadi JSON, jika anda belum tau cara menggunakan JSON di PHP silahkan baca dulu atrikel ini Cara Menggunakan JSON Di PHP, tapi jika anda sudah tau silahka salin kode berikut dan simpan file dengan nama index2.php <!DOCTYPE html>
<html>
<head>
<title>MEMBUAT GRAFIK LINE DENGAN PLUGIN HIGHCHART</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/modules/exporting.js"></script>
<style type="text/css">
.container { margin: auto; padding: 5px; width: 800px; border: 2px solid #DBDBDB; }
</style>
</head>
<body>
<div class="container">
<div class="grafik" style="width:100%; height:400px;"></div>
</div>
<?php
// koneksi ke database
$host = 'localhost';
$user = 'root';
$pass = '';
$db = 'belajar_grafik';
mysql_select_db($db, mysql_connect($host, $user, $pass));
// array data
$array_periode = array();
$array_kategori = array();
$array_series = array();
$array_datas = array();
// set attribute
$array_attribute = array('pria', 'wanita');
// cari periode
$sql = 'SELECT * FROM periode';
$rs = mysql_query($sql);
while($row = mysql_fetch_array($rs)){
$periode_id = $row['id'];
$periode = $row['periode'];
// set periode
array_push($array_periode, array('id'=>$periode_id, 'periode'=>$periode));
// set kategori
array_push($array_kategori, $periode);
}
foreach($array_periode as $key=>$val){
// set datas
$array_datas[$val['periode']] = array();
$sql = 'SELECT * FROM datas';
$sql .= ' WHERE periode_id='.intval($val['id']);
$rs = mysql_query($sql);
while($row = mysql_fetch_array($rs)){
$pria = $row['pria'];
$wanita = $row['wanita'];
// value datas
$array_datas[$val['periode']]['pria'] = intval($pria);
$array_datas[$val['periode']]['wanita'] = intval($wanita);
}
}
// set nama series grafik
foreach($array_attribute as $attribute){
array_push($array_series, array('name'=>$attribute, 'data'=>array()));
}
// set value per series grafik
foreach($array_kategori as $kategori){
$i = 0;
foreach($array_attribute as $attribute){
array_push($array_series[$i]['data'], $array_datas[$kategori][$attribute]);
$i++;
}
}
?>
<script type="text/javascript">
$('.grafik').highcharts({
chart: {
type: 'line',
marginTop: 80
},
credits: {
enabled: false
},
tooltip: {
shared: true,
crosshairs: true,
headerFormat: '<b>{point.key}</b>< br />'
},
title: {
text: 'JUMLAH SISWA SD TRITUNGGAL'
},
subtitle: {
text: 'TAHUN 2013 - 2015'
},
xAxis: {
categories: <?php echo json_encode($array_kategori); ?>,
labels: {
rotation: 0,
align: 'right',
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
}
},
legend: {
enabled: true
},
series: <?php echo json_encode($array_series); ?>
});
</script>
</body>
</html>
Keterangan : |
Cara membuat line chart php
Pos Terkait
Copyright © 2024 toptenid.com Inc.
