PHP로 오픈 플래시 차트 출력하기

PHP 환경에서 웹페이지에 그래픽 차트를 출력하는 방법은 imagecreate() 함수로 시작하여 서버에서 직접 도표를 그려서 PNG나 GIF와 같은 동적 이미지를 생성하여 내려보내는 전통적인 방법이 있습니다. 이 방법을 사용하면 서버에서 도표를 그리는 과정에 여러가지 융통성을 부여할 수 있다는 장점이 있습니다. 데이터 생성과 그래픽을 모두 서버에서 수행한다는 특징이 있습니다.

PHP 환경에서 웹페이지에 그래픽 차트를 출력하는 또다른 방법은 플래시(Flash) 오브젝트를 활용하는 것으로 도표 출력을 위한 데이터는 서버에서 생성하지만 차트 출력은 클라이언트의 플래시 오브젝트에서 수행하는 특징이 있습니다. 오픈 소스인 OFC(Open Flash Chart, https://sourceforge.net/projects/openflashchart/)를 사용하면 개발자가 좀더 편리하게 도표 출력을 수행할 수 있고 미려한 도표를 사용자에게 제공할 수 있다는 장점이 있습니다. 단점이라면 최근 웹 브라우저에서 플래시를 점점 더 배척하고 있다는 것인데 이 부분과 연관하여 웹 브라우저에서 편리하게 플래시를 사용할 수 있도록 도와주는 자바스크립트인 SWFObject(https://github.com/swfobject/swfobject)를 사용하면 익스플로러나 크롬이나 브라우저에 관계없이 플래시 도표를 편리하게 출력할 수 있습니다.

OFC_20160407.zip

위의 파일은 PHP 환경에서 필요한 OFC 라이브러리(PHP)와 SWFObject를 모아 놓은 것으로 웹서버의 웹문서 폴더에 복사합니다. OFC 플래시 도표를 출력하기 위해서는 서버측에서 두가지의 소스 코드가 필요합니다. 

    function ofc( $width, $height, $url)
    {
        global $open_flash_chart_seqno;
        
        $out = array();
        $protocol = 'http';
        $obj_id = 'chart';
        $div_name = 'flashcontent';
        $base = "/OFC/";

        if( !isset( $open_flash_chart_seqno ) ) {
            $open_flash_chart_seqno = 1;
            $out[] = '<script type="text/javascript" src="'. $base .'swfobject.js"></script>';
        } else {
            $open_flash_chart_seqno++;
        }
        $obj_id .= '_'. $open_flash_chart_seqno;
        $div_name .= '_'. $open_flash_chart_seqno;

        $out[] = '<div id="'. $div_name .'">';
        $out[] = '<script type="text/javascript">';
        $out[] = 'var urlpath = encodeURIComponent("' . $url .'");';
        $out[] = 'swfobject.embedSWF("'. $base .'open-flash-chart.swf", "'. $div_name .'", '. $width . ', ' . $height . ', "9.0.0","",{"data-file":urlpath} );';
        $out[] = '</script>';
        return implode("\n",$out);
    } 

첫번째는 웹페이지에 플래시 오브젝트를 출력하는 코드로 위의 함수를 포합시켜 간편하게 도표를 출력합니다. 한 페이지에 여러개의 도표를 그리는 상황을 감안하고 SWFObject를 사용하는 형태로 작성한 함수입니다. 위의 함수를 "echo ofc( 500, 300, 'statdata.php');"와 같이 호출하면 함수는 플래시 출력에 필요한 HTML 코드를 작성하여 리턴합니다.

srand((double)microtime()*1000000);
$data = array();

// add random height bars:
for( $i=0; $i<10; $i++ )
  $data[] = rand(2,9);

require_once('OFC/OFC_Chart.php');

$title = new OFC_Elements_Title( date("D M d Y") );

$bar = new OFC_Charts_Bar_3d();
$bar->set_values( $data );
$bar->colour = '#D54C78';

$x_axis = new OFC_Elements_Axis_X();
$x_axis->set_3d( 5 );
$x_axis->colour = '#909090';
$x_axis->set_labels( array(1,2,3,4,5,6,7,8,9,10) );

$chart = new OFC_Chart();
$chart->set_title( $title );
$chart->add_element( $bar );
$chart->set_x_axis( $x_axis );

echo $chart->toPrettyString();

두번째로 필요한 서버 코드는 데이터를 작성하는 코드로 앞서 플래시 페이지를 작성할 때 호출했던 ofc 함수의 세번째 파라미터인 URL에 해당하는 코드입니다. 차트 데이터 작성은 OFC의 예제 디렉토리에 있는 차트 종류별 예제 코드를 활용하면 됩니다. 위의 코드는 3D 바차트의 예제 코드 입니다.

예제 코드를 출력했을때의 결과입니다. 다양한 차트 종류는 "오픈 플래시 차트 예제 목록 - PHP"를 참조하세요.