Jul

Vẽ biểu đồ trong CakePHP với Open Flash Chart

admin

Sáng nay mới hoàn thành xong component vẽ biểu đồ cho cakephp dùng open flash chart, bây giờ chia sẻ cho mọi người dùng góp ý. Hiện tại, component này hỗ trợ các loại biểu đồ: line, line_dot, line_hollow, area_hollow, bar, bar_3D và pie. Sắp tới tôi sẽ nâng cấp để component này hỗ trợ được nhiều loại biểu đồ khác

Các bạn download file này về:

Tải file

chép đè lên thư mục app

Cách dùng:

- Khai báo dùng component Ofc trong controller

var $components = array('Ofc');

1. Vẽ biểu đồ dạng đường

    $this->Ofc->set_ofc_webroot($this->webroot);
    $this->Ofc->set_ofc_size(500,300);
 
    srand((double)microtime()*1000000);
    $data_1 = array();
    $data_2 = array();
    $data_3 = array();
    for( $i=0; $i<12; $i++ )
    {
      $data_1[] = rand(14,19);
      $data_2[] = rand(8,13);
      $data_3[] = rand(1,7);
    }
    $this->Ofc->set_ofc_title( 'CakePHP for Vietnamese', '{font-size: 20px; color: #736AFF}' );
    $month = array( 'January','February','March','April','May','June','July','August','Spetember','October','November','December' );
    $this->Ofc->set_ofc_x_info($month, array('size'=>10,'color'=>'0x000000','orientation'=>0,'step'=>2));
    $this->Ofc->set_ofc_y_info(20,4,array('text'=>'cakephpvn.org','size'=>12,'color'=>'#736AFF'));
 
    $this->Ofc->init();
    $this->Ofc->setup();
    $this->Ofc->set_ofc_data( $data_1 );
    $this->Ofc->line_dot( 3, 5, '0xCC3399', 'Downloads', 10);
 
    echo $this->Ofc->ofc_render();

line_dot

2. Vẽ kết hợp các biểu đồ dạng đường trên cùng 1 biểu đồ

- Vẫn lấy dữ liệu ở trên, đổi phần tạo biểu đồ

    $this->Ofc->init();
    $this->Ofc->setup();
    $this->Ofc->set_ofc_data( $data_1 );
    $this->Ofc->line( 2, '0x9933CC', 'Page views', 10 );
    $this->Ofc->set_ofc_data( $data_2 );
    $this->Ofc->line_dot( 3, 5, '0xCC3399', 'Downloads', 10);
    $this->Ofc->set_ofc_data( $data_3 );
    $this->Ofc->line_hollow( 2, 4, '0x80a033', 'Bounces', 10 );
 
   echo $this->Ofc->ofc_render();

line, line_dot, line_hollow

3. Biểu đồ bar

    $this->Ofc->init();
    $this->Ofc->setup();
    $this->Ofc->set_ofc_data( $data_2 );
    $this->Ofc->bar(25, '0x80a033', 'Bounces', 10 );
 
    echo $this->Ofc->ofc_render();

bar

4. Biểu đồ area

    $this->Ofc->init();
    $this->Ofc->set_ofc_data( $data_3 );
    $this->Ofc->setup();
    $this->Ofc->area_hollow(2,3,25,'0x80a033','Bounces',10);
 
    echo $this->Ofc->ofc_render();

area

5. Biểu đồ tròn

//pie chart
$data = array();
for( $i=0; $i<5; $i++ )
{
  $data[] = rand(5,15);
}
 
$this->Ofc->set_ofc_data( $data );
$this->Ofc->pie(60,'#505050','{font-size: 12px; color: #404040;');
$this->Ofc->pie_values( array('IE','Firefox','Opera','Wii','Other') );    
$this->Ofc->pie_slice_colors( array('#d01f3c','#356aa0','#C79810') );
 
echo $this->Ofc->ofc_render();

pie

11 Comments to “Vẽ biểu đồ trong CakePHP với Open Flash Chart”

BiBi 14/01/2011 at 4:12 pm
Mình nghĩ nên set dữ liệu ra view trước rồi mới echo

$this->set(“tests”,$this->Ofc->ofc_render());

chứ không nên echo thẳng trực tiếp trong controller, chỉ dùng echo trực tiếp từ controller khi bạn muốn gọi một lệnh ajax và exit; thẳng trong controller mà thôi, còn đã dùng view thì mình nghĩ ko nên, tốt nhất là set một biến ra ngoài.

echo trực tiếp trong controller có thể gây nhập nhằng như thế này:

file ctp được render có thể sẽ như sau:

thanks vì bài viết chia sẻ của bạn .

Reply
BiBi 14/01/2011 at 4:14 pm
hic, mấy cái thẻ của mình bị bạn strim tag hết trơn rồi @.@

đơn giản ý mình là nếu echo từ controller thì dữ liệu sẽ được show ra trước khi view render chạy, như thế sẽ có thể gây lỗi ^^

Reply
admin 14/01/2011 at 11:46 pm
Cám ơn bạn đã góp ý, đúng như bạn nói là cần phải set biến để ra view dùng. Tuy nhiên, đây là ví dụ mình làm để có cái hình chụp minh họa cho bài viết nên làm vậy cho lẹ đó mà!

Reply
Anhquan 21/01/2011 at 3:14 pm
Anh amin có thể hướng dẫn thêm cho em về tùy chỉnh chiều dài, rộng biểu đồ khi view lên web được không. Em đã thử tùy chỉnh 2 tham số $this->width và $this->hight trong openflashchart nhưng không được. Mong được sự giúp đỡ.

Reply
duy 02/02/2011 at 7:47 am
da

Reply
admin 06/02/2011 at 8:03 pm
Bạn dùng $this->Ofc->set_ofc_size(500,300); nhé!

Reply
Thac 01/07/2011 at 3:32 pm
Mình click vào “tải file” ở trên nhưng nó báo “nothing found …”. Bạn có thể upload lại hoặc mail cho mình được không? Mình cám ơn nhiều lắm!

Reply
admin 03/07/2011 at 12:41 pm
Link đã được fixed, bạn download lại nhé!

Reply
Anh Duy 05/08/2011 at 5:36 pm
Chào admin, khi đăng ký là member trong diễn đàn không được, no báo lỗi:
Fatal error: Call to undefined function unicode_chr() in /home/d1680p07/public_html/cakephpvn.org/forum/inc/datahandlers/user.php on line 73

Thanks admin

Reply
admin 04/09/2011 at 6:48 pm
Lỗi này đã được fix

Reply
saphia 10/11/2011 at 10:05 am
Mình làm giống như admin hướng dẫn, nhưng nó báo lỗi: ‘null’ is null or not an object
File: swfobject.js Line: 117

Và ko view biểu đồ, Browse Firefox cũng ko view duoc biểu đồ

Mong admin hướng dẫn
Thanks

Reply