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

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 );
?>

—————————-

38 thoughts on “Cara Mudah Membuat Chart Keren! (Menggunakan Open Chart Flash)

  1. 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?

    • 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.

  2. 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. .

    • 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

      • 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?

  3. 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

  4. 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..

  5. 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

  6. 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..

  7. 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:

Logo WordPress.com

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

Gambar Twitter

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

Foto Facebook

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

Foto Google+

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

Connecting to %s