6
Lisensi Dokumen: Copyright © 2008-2014 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org Membuat Grafik dengan FusionCharts Menggunakan Php dan Mysql Bayu Lesmana Putra [email protected] Abstrak FusionCharts merupakan sebuah komponen atau library chart yang bersifat open source dan gratis yang dapat digunakan untuk membuat grafik data dengan animasi flash. FusionCharts dapat digunakan dengan bahasa scripting web PHP, ASP, .NET, JSP, ColdFusion, JavaScript, Ruby, dan lain-lain. Penggunaan FusionCharts ini sebagai grafik data pada media web, menggunakan XML sebagai media pembacaan data. Grafik dan animasi yang indah, sebagian besar programmer web menggunakan library ini untuk menampilkan grafik data. Kata Kunci: FusionCharts, PHP, Javascript Pendahuluan Tutorial kali ini saya membahas cara membuat grafik yang menarik dengan menggunakan library fusionacharts (JQuery), jadi hanya membahas bagaimana menampilkan data di database berbentuk grafik di PHP. Dengan menggunakan PHP kita dapat membuat highchart lebih dinamis karena dapat langsung mengakses database MySQL. Pembahasan Yang harus kita lakukan pertama kali adalah membuat database-nya. Pada contoh saya kali ini saya menggunakan database 'latihan'. Kemudian dengan data table grafikseperti gambar dibawah ini:

Membuat Grafik Dengan PHP

  • View
    29

  • Download
    0

Embed Size (px)

DESCRIPTION

Membuat Grafik Dengan PHP

Citation preview

  • Lisensi Dokumen: Copyright 2008-2014 ilmuti.org

    Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial

    (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap

    dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

    Membuat Grafik dengan FusionCharts Menggunakan Php

    dan Mysql

    Bayu Lesmana Putra

    [email protected]

    Abstrak

    FusionCharts merupakan sebuah komponen atau library chart yang bersifat open source

    dan gratis yang dapat digunakan untuk membuat grafik data dengan animasi flash.

    FusionCharts dapat digunakan dengan bahasa scripting web PHP, ASP, .NET, JSP,

    ColdFusion, JavaScript, Ruby, dan lain-lain.

    Penggunaan FusionCharts ini sebagai grafik data pada media web, menggunakan XML

    sebagai media pembacaan data. Grafik dan animasi yang indah, sebagian besar

    programmer web menggunakan library ini untuk menampilkan grafik data.

    Kata Kunci: FusionCharts, PHP, Javascript

    Pendahuluan

    Tutorial kali ini saya membahas cara membuat grafik yang menarik dengan

    menggunakan library fusionacharts (JQuery), jadi hanya membahas bagaimana

    menampilkan data di database berbentuk grafik di PHP.

    Dengan menggunakan PHP kita dapat membuat highchart lebih dinamis karena dapat

    langsung mengakses database MySQL.

    Pembahasan

    Yang harus kita lakukan pertama kali adalah membuat database-nya. Pada contoh saya

    kali ini saya menggunakan database 'latihan'. Kemudian dengan data table grafik

    seperti gambar dibawah ini:

  • Lisensi Dokumen: Copyright 2008-2014 ilmuti.org

    Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial

    (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap

    dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

    Sesudah membuat table kemudian ketiklah script program php seperti yang ada

    dibawah ini dan simpan dengan nama index.php

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

  • Lisensi Dokumen: Copyright 2008-2014 ilmuti.org

    Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial

    (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap

    dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    46

    47

    48

    49

    50

    51

    $arrData[0][2]="$Data[jumlah_a]"; $arrData[0][3]="$Data[jumlah_b]"; $arrData[0][4]="$Data[jumlah_c]";

    foreach ($arrData as $arSubData) { $kategori .= ""; $data .= ""; $data1 .= ""; $data2 .= ""; $data3 .= ""; $data4 .= ""; } } $kategori .= "";

    $data .= ""; $data1 .= ""; $data2 .= ""; $data3 .= ""; $data4 .= ""; $strXML .= $kategori . $data . $data1 . $data2 . $data3 . $data4; $strXML .= ""; echo renderChart("FusionCharts/FCF_MSColumn3D.swf", "", $strXML, "productSales", 500, 300); ?>

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    \\2. Grafik Kedua >>

  • Lisensi Dokumen: Copyright 2008-2014 ilmuti.org

    Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial

    (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap

    dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

    14

    15

    16

    17

    18

    19

    20

    21

    $FC->setChartParams($strParam); $qr=mysql_query("select* from grafik"); while($data=mysql_fetch_array($qr)){ $FC->addChartData("$data[jumlah_a]","name=$data[nama_produk]"); }

    $FC->renderChart(); echo""; ?>

    Untuk FusionChart bias didownload free diwebsite ini http://www.fusioncharts.com/

    Hasil dari script dan data table diatas kira kira seperti dibawah ini :

  • Lisensi Dokumen: Copyright 2008-2014 ilmuti.org

    Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial

    (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap

    dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

    Penutup

    Ada beberapa keuntungan menggunakan FusionCharts diantaranya sebagai berikut:

    1. Animasi dan Interaktif Charts Menggunakan FusionCharts, Anda dapat dengan

    cepat dan mudah membuat animasi grafik yang memiliki banyak pilihan interaktif

    untuk pengguna akhir.

    2. Mudah dan terintegrasi dengan JavaScript FusionCharts menawarkan pilihan

    lanjutan untuk mengintegrasikan grafik dengan modul JavaScript. Anda dapat

    memperbarui bagan di sisi client, memanggil fungsi JavaScript sebagai link hotspot.

    3. Tidak perlu menginstall tools apapun dan sifatnya standalone Untuk menggunakan

    FusionCharts, Anda tidak perlu menginstal apapun pada server Anda. Yang perlu

    Anda lakukan adalah copy-paste file SWF (file inti FusionCharts) ke server Anda.

    4. Mudah digunakan FusionCharts membuat diagram proses chart menggunakan XML

    sebagai data, semua yang perlu Anda lakukan adalah mengkonversi data Anda ke

    dalam XML menggunakan bahasa pemrograman atau bahkan menggunakan editor

    teks seperti Notepad dll dan itu semua apa yang dibutuhkan untuk membuat grafik

    interaktif dan animasi. Bagian terbaik adalah Anda TIDAK perlu tahu apa-apa

    tentang Flash untuk menggunakan FusionCharts.

    5. Berjalan pada berbagai platform web Terlepas dari bahasa apa yang digunakan,

    FusionCharts dapat digunakan untuk membuat diagram dengan baik. Sejak

    FusionCharts menggunakan XML sebagai antarmuka data, Anda dapat

    menjalankannya pada server apapun dan terhadap segala bahasa scripting. Juga,

    untuk melihat grafik, pengguna Anda hanya perlu memiliki Adobe Flash Player 6

    (atau di atas), yang merupakan salah satu plugin browser yang paling digunakan di

    planet ini.

    6. Mengurangi beban pada server

    7. Bersifat gratis

    Referensi

  • Lisensi Dokumen: Copyright 2008-2014 ilmuti.org

    Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial

    (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap

    dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

    http://www.mudafiqriyan.net/2012/02/fusion-charts-library-untuk-grafik-chart/

    http://achmatim.net/2013/12/15/11-library-gratis-untuk-membuat-grafik-berbasis-web/

    http://topidesta.wordpress.com/2012/12/20/grafik-dengan-fusioncharts-menggunakan-

    php-dan-mysql/

    Biografi Penulis

    Bayu Lesmana Putra Adalah Lulusan Teknik Komputer,

    Fakultas Teknologi Informasi Politeknik Harapan Bersama,

    Tegal (D3, 2012) dan Saat ini sedang menempuh program S1 di

    STMIK Raharja Tangerang dengan Jurusan Teknik Informatika

    dengan konsentrasi Software Engineer. Kegiatan sehari-hari

    adalah sebagai karyawan di sebuah perusahaan swasta dengan

    posisi IT Engineer. Kegiatan lain sedang belajar programmer,

    web developer serta sistem jaringan. Penulis dapat dihubungi melalui email di

    b4yu.zty@gmail dan [email protected], YM b4yu_tk09, Facebook Bayu

    Lesmana.