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

Chart adalah salah satu cara untuk dapat menampilkan data dengan bentuk yang lebih manusiawi (Hehee..😆 ) 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.😆

Selamat coding!

Selamat bersenang-senang!😆

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. permisi nanya, kalo dipindah ke dalam folder kok gak muncul grafiknya? padahal dah dipindah semua file yang dibutuhkan…

Tinggalkan 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