Skip to content

Cara Mudah Membuat Chart Keren! (Menggunakan Open Chart Flash)

Juli 29, 2010

Chart adalah salah satu cara untuk dapat menampilkan data dengan bentuk yang lebih manusiawi (Hehee.. :lol: ) lebih menarik, mudah dipahami, dan akan lebih baik lagi jika chart tersebut interaktif. Nah, kali ini saya akan berbagi tentang salah satu aplikasi untuk membuat chart.  Saya menggunakan Open Chart Flash.

Open Chart Flash adalah aplikasi OpenSource. Artinya gratis dan dapat dimodifikasi sendiri jika ditemukan kesalahan (bugs) atau ingin menambah fitur. Open Chart Flash dapat digunakan untuk scripting PHP, Ruby, Phyton, Perl, dan .NET. Berikut adalah contoh chart dari Open Chart Flash :

Contoh Spoon Bar dengan Open Chart Flash. Mirip dengan statistik blog ala WordPress!

Keren!

Langkah Per Langkah

Langkahnya semudah 1-2-3 loh. :)

Berikut adalah beberapa langkah yang telah saya lakukan :

  1. Unduh Open Chart Flash di sini. (Saya menggunakan versi 1.9.7)
  2. Ekstrak file .zip tersebut.
  3. Buat folder ofc-library di folder utama (root) dari webserver. Untuk webserver Apache, ada di folder htdocs.
  4. Buka folder php-ofc-library pada hasil ekstraksi.
  5. Salin file open_flash_chart_object.php dan open-flash-chart.php dari folder ekstraksi .zip tersebut ke dalam folder ofc-library.
  6. Salin file open-flash-chart.swf dari folder ekstraksi ke folder utama webserver.
  7. Buat file chart.php dan chart-data.php pada folder utama webserver. (Saya lampirkan di bawah)
  8. Masuk ke webbrowser. Buka http://localhost/chart.php
  9. Voila! Anda akan mendapatkan tampilan Glass Bar Chart sebagai berikut :

Contoh Glass Bar dengan Open Chart Flash

Ups! Ternyata ada sembilan langkah ya. :lol:

Selamat coding!

Selamat bersenang-senang! :lol:

Tips :

  • Selalu meletakkan file chart.php, chart-data.php, dan open-flash-chart.swf pada folder yang sama.
  • Data-data untuk chart bisa diambil dari database.

File Lampiran :

chart-data.php

<?php
// file : chart-data.php

include_once( 'ofc-library/open-flash-chart.php' );

// generate some random data
srand((double)microtime()*1000000);

$bar_1 = new bar_glass( 55, '#D54C78', '#C31812' );
$bar_1->key( '2006', 10 );

// add 10 bars with random heights
for( $i=0; $i<10; $i++ )
  $bar_1->data[] = rand(2,5);

//
// create a 2nd set of bars:
//
$bar_2 = new bar_glass( 55, '#5E83BF', '#424581' );
$bar_2->key( '2007', 10 );

// make 10 bars of random heights
for( $i=0; $i<10; $i++ )
  $bar_2->data[] = rand(-5,9);

//
// create the chart:
//
$g = new graph();
$g->title( 'Glass Bars', '{font-size:20px; color: #bcd6ff; margin:10px; background-color: #5E83BF; padding: 5px 15px 5px 15px;}' );

// add both sets of bars:
$g->data_sets[] = $bar_1;
$g->data_sets[] = $bar_2;

// label the X axis (10 labels for 10 bars):
$g->set_x_labels( array( 'January','February','March','April','May','June','July','August','September','October' ) );

// colour the chart to make it pretty:
$g->x_axis_colour( '#909090', '#D2D2FB' );
$g->y_axis_colour( '#909090', '#D2D2FB' );

$g->set_y_min( -5 );
$g->set_y_max( 10 );
$g->y_label_steps( 6 );
$g->set_y_legend( 'Open Flash Chart', 12, '#736AFF' );
echo $g->render();
?>

—————————-

chart.php

<?php
// file : chart.php
include_once 'ofc-library/open_flash_chart_object.php';
open_flash_chart_object( 500, 250, 'http://'. $_SERVER['SERVER_NAME'] .'/chart-data.php', false );
?>

—————————-

About these ads
38 Komentar leave one →
  1. ahsanfile permalink
    Juli 29, 2010 07:01

    mas, ada print screeen hasilnya gak ?

    • Juli 29, 2010 07:02

      1. Saya “mbak”.
      2. Print screen hasil ada di atas. (yang Glass Bar)

  2. Juli 31, 2010 06:45

    yang bisa di edit yang mana aja?

    • Agustus 1, 2010 00:51

      Ubah file chart-data.php untuk menentukan jenis chart dan sumber datanya. Sumber datanya bisa diambil dari hasil query ke database.

  3. caesar permalink
    Agustus 4, 2010 08:41

    kok setelah saya coba malah seperti ini ya hasilnya?

    Fatal error: Class ‘graph’ not found in c:\xampp\xampp\htdocs\chart-data.php on line 29

    ada solusinya tidak?

    • Agustus 4, 2010 12:45

      Artinya, class tersebut tidak ditemukan. Coba cek isi open_flash_chart_object.php atau open-flash-chart.php. Apakah class tersebut ada?

      • Oktober 18, 2011 04:27

        kalau tidak ada bagaimana mba solusinya..

  4. Agustus 24, 2010 09:16

    isi nilai dar db mysql gmana??

    • Agustus 24, 2010 12:13

      Perhatikan file chart-data.php pada baris ke-12 s.d 14 dan baris ke-22 s.d 24.

      Pada contoh di atas, nilai diambil secara acak melalui : rand(2,5). Nah, tinggal ganti nilai acak tersebut dengan nilai variabel yang berasal dari database.

  5. Adhena permalink
    Agustus 25, 2010 04:38

    mba,g da download file nya y ??
    saya bingung ngeletakin file” nya
    bisa dijelasin lebih detail lagi g tentang penyimpanan file dan foldernya dimana” nya
    makasih y mba. .

    • Adhena permalink
      Agustus 25, 2010 05:13

      oia,,saya dapet error terus padahal udah ngikutin cara mba
      Warning: include_once(ofc-library/open_flash_chart_object.php) [function.include-once]: failed to open stream: No such file or directory in C:\xampp\htdocs\chart.php on line 11

      Warning: include_once() [function.include]: Failed opening ‘ofc-library/open_flash_chart_object.php’ for inclusion (include_path=’.;C:\xampp\php\PEAR’) in C:\xampp\htdocs\chart.php on line 11

      Fatal error: Call to undefined function open_flash_chart_object() in C:\xampp\htdocs\chart.php on line 12

      • Agustus 25, 2010 08:00

        PHP tidak bisa menemukan file yang ada di dalam include_once(”).
        Folder ofc-library-nya sudah dibuat? File open_flash_chart_object.php sudah berada di dalam folder tersebut?

    • Agustus 25, 2010 08:01

      1. Buat folder ofc-library di bawah folder htdocs.
      2. Letakkan dua file .php yang dibutuhkan disana. Link-nya ada di atas (kalau tidak salah ingat)

      • Adhena permalink
        Agustus 25, 2010 08:25

        oia,,saya udah berhasil,,makasih y mba,,
        tapi anehnya itu, g da line yang muncul. yang harusnya ada garis chart malah ngeblank warna ungu gitu
        kenapa ya ??
        kasusnya sama kaya http://blogsite.mandingjogja.com/cara-menggunakan-open-flash-chart/ tapi saya masih ga ngerti juga.jadi tampilannya tetep aja kaya gitu
        ditunggu y mba

      • Agustus 25, 2010 13:39

        Sepertinya data tidak terbaca. Coba perhatikan di file chart.php. Terutama pada bagian : open_flash_chart_object( 500, 250, ‘http://’. $_SERVER[‘SERVER_NAME’] .’/chart-data.php’, false );

      • November 11, 2010 00:32

        @Adhena : menurutku sih swf nya yang kurang pas. saya tidak tahu kenapa. coba lokasi swf diganti yang semula localhost menjadi

        http://teethgrinder.co.uk/open-flash-chart/open-flash-chart.swf?data=……

        tentunya kompi anda harus terhubung inet. good luck!

      • rendra permalink
        Februari 11, 2012 00:03

        1. Buat folder ofc-library di bawah folder htdocs.
        2. Letakkan dua file .php yang dibutuhkan disana. Link-nya ada di atas (kalau tidak salah ingat)

        oya mba mksudNya tu buat folder ofc-library nya tu di bawah or di dalam folder htdocs.
        trimakasih.

      • Februari 11, 2012 02:41

        Maksudnya di dalam htdoc

  6. Adhena permalink
    Agustus 26, 2010 02:00

    saya coppas file yang dari mba diatas
    yang saya rubah cuma di chart.php menjadi :

    selebihnya saya bingung :)

  7. Adhena permalink
    Agustus 26, 2010 03:21

    /**/

  8. Oktober 2, 2010 05:53

    salam kenal mba..
    openchart yg sekarang versinya dah beda ya?
    untuk menggunakan sef seo gmn ya?

    btw link ke blog baranglucu ya.. hehe
    ada barang unik dan lucu

  9. November 21, 2010 13:12

    Ada juga nih library bagus buat bikin chart di PHP yang free, PChart. outputnya berupa image 2D/ 3D.

    contohnya bisa dilihat disini

    http://ikhsanaulia.blogspot.com/2010/11/membuat-graphic-chart-dengan-php-pchart_20.html

    dijamin performanya bagus :)

    • November 22, 2010 02:08

      Sip. Makasi infonya ya…

  10. Desember 7, 2010 13:27

    Wah infonya mantap :)
    Tanya juga nih untuk form komennya pakai plugin wordpress apa ya , keren apalagi ada like dan unlikenya juga.

    Thanks

    • Desember 7, 2010 13:57

      Otomatis disediakan oleh wordpress-nya. :)

  11. Maret 25, 2011 22:25

    Canggih Free Licensi :: mantap :: dah saya download dan hasilnya oke :: tapi kira2 cara ganti chartnya gimana yah :: biar gak theme glass

  12. dika permalink
    April 17, 2011 10:03

    mbak , kalau tampilan seperti ini apa yang harus dilakukan ?
    Fatal error: Class ‘graph’ not found in C:\Program Files\xampp\htdocs\chart-data.php on line 29

  13. putih permalink
    Juli 7, 2011 03:57

    mbak, kalau tampilan salahnya kyk gini

    Open Flash Chart
    IO ERROR
    Loading test data
    Error #2032
    This is the URL that I tried to open:../../data-files/y-axis-auto-steps.txt

    harus digimanain yah mbak??
    mohon bantuannya..

    • November 30, 2011 03:18

      Itu mas salah ambil Versi open chart nya. File ofc-library mas pake yg versi 1.xx tp file .swf nya mas pake dari yang versi 2.xx yang butuh file data.json

      • November 30, 2011 08:36

        Wah, terima kasih infonya! :)

  14. Rayhan permalink
    Januari 14, 2012 04:11

    Haaa….. Haaaa…….?

  15. DAS permalink
    Februari 8, 2012 07:57

    Mba, ko saya tidak bisa meload datanya ya? padahal saya sudah mengikuti petunjuknya… yang ada cuma tulisan http://localhost/chart-data.php ga bisa nampil datanya. kenapa ya?

    • nesya permalink
      September 17, 2012 08:38

      saya juga seperti itu, kenapa yah?? sudah bisa berhasil??

  16. Nurhidayat permalink
    Februari 28, 2012 04:30

    Bagus tipnya

    Bisa kasih sample pakai database

    Terimakasih

    • ari permalink
      Juni 3, 2012 19:20

      saya juga mba, bisa kasihsample pakai database

      terima kasih

  17. enday permalink
    Oktober 6, 2012 08:15

    Warning: include_once(ofc-library/open_flash_chart_object.php) [function.include-once]: failed to open stream: No such file or directory in C:\xampp\htdocs\chart.php on line 5

    Warning: include_once() [function.include]: Failed opening ‘ofc-library/open_flash_chart_object.php’ for inclusion (include_path=’.;\xampp\php\PEAR’) in C:\xampp\htdocs\chart.php on line 5

    Fatal error: Call to undefined function open_flash_chart_object() in C:\xampp\htdocs\chart.php on line 7

    mba eror nih, padahal saya udah bener2 mengikuti step2nya

  18. Folkes permalink
    Januari 30, 2013 12:00

    Salam kenal, mba…
    Kalo data grafiknya dari nilai suhu real time yang terbaca dari sensor suhu yang tersambung ke arduino bisa ga,,?? Apakah butuh db juga..??
    Trimakasih..

  19. kiby permalink
    Maret 29, 2013 04:25

    permisi nanya, kalo dipindah ke dalam folder kok gak muncul grafiknya? padahal dah dipindah semua file yang dibutuhkan…

Berikan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Logout / Ubah )

Twitter picture

You are commenting using your Twitter account. Logout / Ubah )

Facebook photo

You are commenting using your Facebook account. Logout / Ubah )

Google+ photo

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

Ikuti

Get every new post delivered to your Inbox.

Bergabunglah dengan 254 pengikut lainnya.

%d blogger menyukai ini: