Open Flash Chart adalah perangkat pembangkit grafik berbasis swf. Open flash chart adalah proyek open source. Perangkat ini dapat menampilkan data secara dinamis dan menarik dalam berbagai bentuk animasi grafik, namun demikian grafik dapat juga disimpan dalam bentuk gambar. Keuntungan yang didapatkan ketika menggunakan flash sebagai media grafik adalah selain tampilannya yang menarik ia juga dapat dikendalikan melalui javascript sehingga untuk proses reload, ganti tipe chart dan lain-lain dapat menggunakan library. Open flash chart menerima input berupa data dengan format JSON. Untungnya, ada API dari berbagai jenis bahasa pemrograman yang dapat digunakan untuk meng-generate data ini.
Codeigniter sebagai salah satu framework php juga mampu diintegrasikan dengan library lain meskipun berbeda bahasa. Penulis akan menggunakan library yang telah penulis tulis untuk mengintegrasi open flash chart dengan codeigniter. Pada bab ini penulis tidak akan membahas proses pembuatan library ini tetapi lebih kearah penggunaannya. Adapun class diagram untuk library yang telah penulis buat adalah seperti gambar berikut ini.
Library diatas dapat diperoleh di http://www.koder.com/download/id_openflashchart.zip atau di CD buku. Library di atas didesain untuk bisa menampilkan chart dalam bentuk line, pie, dan area. Adapun yang harus dilakukan untuk mengintegrasikan openflashchart dengan codeigniter adalah:
1. Copy Library Ke Application / Library
Setelah Anda men-download library copy-kan library-library tersebut lalu copy-kan ke application/library. Selain itu kita juga membutuhkan library javascript swf object untuk mengenerate flash object
2. Buat Controller Chart
Buatlah sebuah controller yang akan memanggil library id_chart. Adapun contoh controller tersebut adalah :
1. <?php if (! defined(‘BASEPATH’)) exit(‘No direct script access
allowed’);
2.
3. class Chart extends CI_Controller {
4.
5. function __construct()
6. {
7. parent::__construct();
8. }
9.
10. function index()
11. {
12. $this->load->helper(‘url’);
13. $this->load->library(‘id_chart/id_chart’);
14. $chart[‘c1’]=$this->id_chart->chart_embed(‘test’,
15. 800,250,site_url(‘chart/example1’),base_url());
16. $chart[‘c2’]=$this->id_chart->chart_embed(‘test2’,
17. 800,250,site_url(‘chart/example2’),base_url());
18. $chart[‘c3’]=$this->id_chart->chart_embed(‘test3’,
19. 800,250,site_url(‘chart/example3’),base_url());
20. $chart[‘c4’]=$this->id_chart->chart_embed(‘test4’,
21. 300,300,site_url(‘chart/example4’),base_url());
22.
23. $this->load->view(‘chart’,$chart);
24. }
25.
26. function example1()
27. {
28. $this->load->helper(‘url’);
29. $this->load->library(‘id_chart/id_chart’);
30. for ($i=1;$i<30;$i++)
31. $data[]= array(‘label’=>’data ‘.$i,
32. ‘value’=>rand(1,300));
33. echo $this->id_chart->set_chart(‘line’)
34. ->set_data($data)
35. ->set_vertical()
36. ->render();
37. }
38.
39. function example2()
40. {
41. $this->load->helper(‘url’);
42. $this->load->library(‘id_chart/id_chart’);
43. for ($i=1;$i<30;$i++)
44. $data[]= array(‘label’=>’data ‘.$i,
45. ‘value’=>rand(1,300));
46.
47. echo $this->id_chart->set_chart(‘bar’)
48. ->set_data($data)
49. ->set_vertical()
50. ->render();
51. }
52.
53. function example3()
54. {
55. $this->load->helper(‘url’);
56. $this->load->library(‘id_chart/id_chart’);
57. for ($i=1;$i<30;$i++)
58. $data[]= array(‘label’=>’data ‘.$i,
59. ‘value’=>rand(1,300));
60.
61. echo $this->id_chart->set_chart(‘area’)
62. ->set_data($data)
63. ->set_vertical()
64. ->render();
65. }
66.
67. function example4()
68. {
69. $this->load->helper(‘url’);
70. $this->load->library(‘id_chart/id_chart’);
71. for ($i=1;$i<6;$i++)
72. $data[]= array(‘label’=>’data ‘.$i,
73. ‘value’=>rand(20,300));
74.
75. echo $this->id_chart->set_chart(‘pie’)
76. ->set_data($data)
77. //->set_radius(20)
78. ->render();
79. }
80. }
81. /* End of file chart.php */
82. /* Location: ./application/controllers/chart.php */
Perhatikan fungsi index, fungsi tersebut akan men-generate script javascript yang akan meload open flash chart. Perhatikan function chart_embed, fungsi tersebut berisi empat parameter diantaranya $name (nama pengenal script), $width (lebar chart), $height (panjang chart), $url (url yang berisi data json), $base (letak flash script berada).
Perhatikan kembali fungsi example1-4 itu adalah contoh fungsi untuk men-genarate data json yang akan dipakai oleh flash chart.
3. Buat View Chart
View yang akan kita buat mirip seperti view pada chapter jquery autocomplete, hanya sebagai view yang berisi script javascript yang akan memanggil openflashchart dan menampilkan chart. Adapun view tersebut adalah :
1. <html>
2. <head>
3. <title>Welcome to CodeIgniter</title>
4. <script type=”text/javascript” src=”<?php echo
base_url();?>/swfobject.js”></script>
5. <style type=”text/css”>
6.
7. body {
8. background-color: #fff;
9. margin: 40px;
10. font-family: Lucida Grande, Verdana, Sans-serif;
11. font-size: 14px;
12. color: #4F5155;
13. }
14.
15.
16. </style>
17. </head>
18. <body>
19.
20. <h1>Line Chart</h1>
21. <?php echo $c1;?>
22. <h1>Bar Chart</h1>
23. <?php echo $c2;?>
24.
25. <h1>Area Chart</h1>
26. <?php echo $c3;?>
27.
28. <h1>Pie Chart</h1>
29. <?php echo $c4;?>
30. </body>
31. </html>
Perhatikan baris ke empat, disana kita mencoba me-load swfobject.js yang bertujuan me-load scipt openflashchart. Jika semua terinstall dengan benar maka akan keluar tampilan seperti di bawah ini
Variabel c1, c2, c3 dan c4 merupakan variable yang menyimpan script-script tersebut berasal dan fungsi example1, example2, example3 dan example4 lah yang menentukan tipe beserta data dari masing-masing chart.
Sumber : Buku Framework CodeIgniter
Andra Wisata's Blog 
Leave a comment