Membuat Grafik Batang Dengan Database MySQL

CARA MEMBUAT DIAGRAM BATANG DENGAN PHP DAN DATABASE MYSQL

Membuat Grafik Batang Dengan Database MySQL
Grafik Batang Organisasi Seniman
Selamat Datang di Blog Orang IT . Untuk mengisi menu Materi IT Pemrograman Web pada postingan kali ini saya akan membahas Bagaimana cara mudah membuat Grafik Batang atau Kolom dengan menggunakan PHP dan database dari MySQL , tentunya dengan menggunakan bantuan dari Plugin HighCart .

Grafik batang, atau yang dikenal juga dengan sebutan histogram dipakai untuk menekankan perbedaan tingkat nilai dan beberapa aspek. Grafik jenis ini merupakan grafik yang paling sederhana, sangat mudah untuk dipahami dan hanya menggambarkan data dalam bentuk batang. Panjangnya batang menggambarkan presentase dari data, sedangka lebarnya semuanya berukuran sama. Tetapi umumnya data yang dapat diperbandingkan tidak terlalu banyak, maksimalnya hanya delapan data.

Bahan :

1. Database MySQL saya menggunakan XAMPP
2. Editor Text saya menggunakan Notepad++
3. Web Browser
4. Plugin HighCart dan JQuery saya sediakan link paling bawah

Soal :

Disini saya mempunyai Database dengan nama Registerkesenian yang berisikan Tabel Seniman yang ada di wilayah Kabupaten Kediri . Saya akan membuat Grafik yang mampu menampilkan Jumlah Organisasi Kesenian yang ada di Kabupaten Kediri berdasarkan Kategori kesenian ( Jaranan, Kuda Lumping , Tari ). Tugas saya kemaren

Berikut cara mudah membuat Grafik Batang Organisasi Kesenian di Kabupaten Kediri dengan database Register kesenian MySQL :

1. Buat Database dengan Nama Registerkesenian dan Tabel Seniman , jangan lupa untuk mengisikan Data seniman dan dibagian field namaorga pastikan terdapat kata tari , jaranan dan kuda lumping berikut desain databasenya 

Membuat Grafik Batang Dengan Database MySQL
Isi Tabel Seniman
Membuat Grafik Batang Dengan Database MySQL
Field Tabel Seniman
2. Buka Notepad++ buat file dengan Nama Index.php

<head>
<title>SENIMAN</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
</head>
<body>

// Buat Koneksi Database
 
<?php
    $host = 'localhost';
    $user = 'root';
    $pass = '';
    $db = 'registerkesenian';

    $conn = mysql_connect($host, $user, $pass);
    mysql_select_db($db, $conn);

// Buat Variabel untuk tahun dan namaorganisasi untuk menampilkan data berdasarkan kriteria
 
    // ser get year
    $year = isset($_GET['year']);
    $year = !empty($_GET['year']) ? $_GET['year'] : 2014;

    $categories = array('Nama Organisasi');

// data series tampilan di grafik
 
    $data_series = array('Kuda Lumping', 'Jaranan', 'Tari');

    // set sereis
    $series = array();

    // set series
    foreach ($data_series as $key=>$val) {
        array_push($series, array(
            'name'=>$val,
            'data'=>array()
        ));
    }

    // tampilkan data dari tabel seniman dengan %like artinya setiap kata yang ada didalam array diatas yaitu jaranan, kuda lumping, tari akan di select
 
    foreach ($data_series as $key=>$val) {
        $sql = 'SELECT COUNT(*) AS result FROM seniman';
        $sql .= ' WHERE namaorga LIKE "%'.$val.'%"';
        $sql .= ' AND berlakuawal like "%'.$year.'"';
        $rs = mysql_query($sql);
        $row = mysql_fetch_array($rs);

        $result = $row['result'];

        array_push($series[$key]['data'], (int) $result);
    }
?>
<form method="get">
    <select name="year">
        <option value="">- pilih tahun -</option>

// Untuk Action pilih berdasarkan tahun
 
        <?php
            foreach (range(2013, date('Y')) as $key=>$val) {
                echo '<option value="'.$val.'">'.$val.'</option>';
            }
        ?>
    </select>
    <button>CEK TAHUN</button>
</form>
<div id="contoh" style="width: 100%; height: 500px"></div>
<script type="text/javascript">

// Tampilkan grafik berdasarkan variabel year dan category 
 
$('#contoh').highcharts({
    chart: {
        type: 'column'
    },
    title: {
        text: 'SENIMAN BERDASARKAN NAMA ORGANISASI'
    },
    subtitle: {
        text: '<?php echo $year; ?>'
    },
    xAxis: {
        categories: <?php echo json_encode($categories); ?>,
        labels: {
            rotation: 0,
            align: 'center'
        }
    },
    series: <?php echo json_encode($series); ?>
});
</script>
</body>
</html>

3. Hasilnya seperti gambar dibawah :

Membuat Grafik Batang Dengan Database MySQL
Hasil Semua Tahun

Membuat Grafik Batang Dengan Database MySQL
Hasil Tahun 2014

Simple kan dan mudah di praktekkan , untuk mempercantik tampilan tentunya harus menggunakan plugin Highcart . Berikut silahkan anda Download Grafik Batang helmykkediri dengan lengkap dengan DataBase + JQuery dan HighCart didalamnya.


Demikian postingan saya mengenai Tutorial membuat Diagram Batang dengan PHP dan database MySql semoga bermanfaat . Silahkan dipelajari sendiri dan berkreasi sesuai ketentuan yang diinginkan semoga menambah ilmu agan yang udah master pemrograman maaf kalau ada salah atau terlalu bertele-tele . Tutorial Membuat Grafik batang 2



Follow Blog Orang IT dan Like FansPage helmykkediri serta untuk Donasi kepada Admin jangan lupa klik iklan yang ada di blog ini sekian dan terimakasih

12 Responses to "Membuat Grafik Batang Dengan Database MySQL"

  1. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  2. Work gan thx, gak PHP deh, wkwk

    BalasHapus
  3. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  4. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  5. aku kira susah, gampang sih kalo ikutin disini, workk yeaaaa><

    BalasHapus
  6. Mantap gan lumayan buat bahan prakterk jadi siap siap bikin program untuk skripsi :D

    BalasHapus
  7. If this article provides information in a sincere, heartfelt thanks then you will get.

    BalasHapus
  8. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  9. Gan,, mau tanya.. Kalo untuk filter tahunnya diterapkan di CI urutan scriptnya spt apa..?

    BalasHapus
    Balasan
    1. Komentar ini telah dihapus oleh pengarang.

      Hapus

Terimakasih sudah berkunjung ke Blog Orang IT , aturan berkomentar yang baik :

1. Dilarang mencantumkan berbagai macam link aktif dikomentar blog

2. Jika ingin mendapatkan backlink komen dengan name/url yang telah disediakan

3. Link download mati silahkan berkomentar

4. Postingan dirasa outdate atau sudah tidak berguna lagi komen saja jangan sungkan

5. Komentar yang memerlukan jawaban dari admin jangan menggunakan anonymous

6. Berkomentarlah dengan relevans dan tinggalkan jejak diblog saya

7. Klik iklan untuk biaya perawatan admin

Terimakasih sudah mentaati rules aturan berkomentar yang baik