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

oleh Putri Chairina 

(http://putrichairina.wordpress.com/2010/07/29/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

view sourceprint?

01

<?php

02	// file : chart-data.php

03

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

05

06	// generate some random data

07	srand((double)microtime()*1000000);

08

09	$bar_1 = new bar_glass( 55, '#D54C78', '#C31812' );

10	$bar_1->key( '2006', 10 );

11

12	// add 10 bars with random heights

13	for( $i=0; $i<10; $i++ )

14	$bar_1->data[] = rand(2,5);

15

16

//

17	// create a 2nd set of bars:

18

//

19	$bar_2 = new bar_glass( 55, '#5E83BF', '#424581' );

20	$bar_2->key( '2007', 10 );

21

22	// make 10 bars of random heights

23	for( $i=0; $i<10; $i++ )

24	$bar_2->data[] = rand(-5,9);

25

26

//

27	// create the chart:

28

//

29	$g = new graph();

30	$g->title( 'Glass Bars', '{font-size:20px; color: #bcd6ff; margin:10px; background-color: #5E83BF; padding: 5px 15px 5px 15px;}' );

31

32	// add both sets of bars:

33	$g->data_sets[] = $bar_1;

34	$g->data_sets[] = $bar_2;

35

36	// label the X axis (10 labels for 10 bars):

37	$g->set_x_labels( array( 'January','February','March','April','May','June','July','August','September','October' ) );

38

39	// colour the chart to make it pretty:

40	$g->x_axis_colour( '#909090', '#D2D2FB' );

41	$g->y_axis_colour( '#909090', '#D2D2FB' );

42

43	$g->set_y_min( -5 );

44	$g->set_y_max( 10 );

45	$g->y_label_steps( 6 );

46	$g->set_y_legend( 'Open Flash Chart', 12, '#736AFF' );

47	echo $g->render();

48

?>

—————————-

chart.php

view sourceprint?

1

<?php

2	// file : chart.php

3	include_once 'ofc-library/open_flash_chart_object.php';

4	open_flash_chart_object( 500, 250, 'http://'. $_SERVER['SERVER_NAME'] .'/chart-data.php', false );

5

?>