Tutorial Openflash Chart di Codeigniter

6 Aug 2019 11:10 2542 Hits 0 Comments Approved by Plimbi
Open Flash Chart adalah perangkat pembangkit grafik berbasis swf.

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(Application Programming Interface) API ini memungkinkan developer untuk mengintegrasikan dua bagian dari aplikasi atau dengan aplikasi yang berbeda secara bersamaan 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. Saya akan menggunakan library yang telah Saya tulis untuk 
mengintegrasi open flash chart dengan codeigniter. Pada pembahasan kali ini Saya tidak akan membahas proses pembuatan library ini,tetapi kita akan belajar lebih kearah penggunaannya. Adapun class diagram untuk library yang telah saya buat adalah seperti gambar berikut ini

                  


Library diatas dapat diperoleh 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: 

  •  Copy Library Ke Application / Library 

 Setelah Anda men-download library tersebut langkah selanjutnya copy-kan library-library tersebut ke 
application/library. Selain itu kita juga membutuhkan library javascript swf object untuk men-generate flash object. 

  •  Buat Controller Chart 

 Buatlah sebuah controller yang akan memanggil library id_chart. Adapun contoh controller 
tersebut adalah : 

application/controllers/Chart.php
1.  
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. } 
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 me-load 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 

  •  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 :
application/views/chart.php 


        
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.

Tags

About The Author

Rafi johari 36
Ordinary

Rafi johari

Programmer yang baik menggunakan otaknya, tapi kerangka kerja yang baik menghemat waktu untuk berpikir
Plimbi adalah tempat menulis untuk semua orang.
Yuk kirim juga tulisanmu sekarang
Submit Artikel