Fahmi Basya Kartapura On May - 13 - 2011

Contoh Kasus:

Saya ingin membuat seperti terlihat pada gambar dibawah ini:

Pertanyaan:

Bagaimana membuatnya menggunakan Open Flash Chart Versi 2 dan CodeIgniter Versi 2 … ?

Jawaban:

Download dan Pengkopian File

Asumsi aplikasi CodeIgniter saya berada pada direktori xampp/htdocs/svc

  • Download Open Flash Chart versi 2 dari http://teethgrinder.co.uk/open-flash-chart-2/downloads.php, saya download versi Lug Wyrm Charmer.
  • Lalu extractlah disembarang tempat
  • Lalu copylah folder php-ofc-library ke folder library CodeIgnitermu
  • Lalu copylah folder js ke dalam document root CodeIgnitermu yaitu xampp/htdocs/svc
  • Lalu copylah file open-flash-chart.swf ke dalam folder js CodeIgnitermu yaitu xampp/htdocs/svc/js


Membuat Controller

<?php if ( ! defined(‘BASEPATH’)) exit(‘No direct script access allowed’);
class Grafik extends CI_Controller{

function data_grafik(){

$this->load->library(‘php-ofc-library/open_flash_chart’);

$title = new title( “Belajar Membuat Grafik” );
$label=array( “CodeIgniter”, “PHP”, “JAVA”, “Visual Basic”, “CSS”, “HTML” );
$bar = new bar();
$bar->set_values( array(7000,9000, 5000, 20000, 7000, 8000) );

$x_axis = new x_axis();
$x_axis->set_labels_from_array($label);

$y_axis = new y_axis_base();
$y_axis->set_range(1000,20000,2000);

$chart = new open_flash_chart();
$chart->set_title( $title );
$chart->set_x_axis( $x_axis );
$chart->set_y_axis( $y_axis );
$chart->add_element( $bar );

$isi['graph']=$chart;
$this->load->view(‘grafik’, $isi);

}

}

Keterangan:

  • $bar = new bar(), kode ini digunakan untuk membuat objek dari class bar().
  • $bar->set_values( array(7000,9000, 5000, 20000, 7000, 8000) ), kode ini digunakan untuk memberikan nilai kepada setiap grafik batang dan ingat nilainya haruslah numerik bukan string.
  • $x_axis = new x_axis(), kode ini digunakan untuk membuat objek untuk sumbu X.
  • $x_axis->set_labels_from_array($label), kode ini digunakan untuk memberikan label pada sumbu X.
  • $y_axis = new y_axis_base(), kode ini digunakan untuk membuat sumbu Y.
  • $y_axis->set_range(1000,20000,2000), kode ini berarti kita memberikan nilai minimal=1000, nilai maksimal=20000 dan step=2000 kepada sumbu Y.
  • $chart = new open_flash_chart(), kode ini digunakan untuk membuat objek dari class open_flash_chart()
  • $chart->set_title( $title ), kode ini digunakan untuk mengeset title dari objek $chart.
  • $chart->set_x_axis( $x_axis ), kode ini digunakan untuk mengeset sumbu X pada objek $chart.
  • $chart->set_y_axis( $y_axis ), kode ini digunakan untuk mengeset sumbu Y pada objek $chart.
  • $chart->add_element( $bar ), kode ini digunakan untuk menambahkan objek $bar kedalam objek $chart.

Membuat View

<html>
<head>
<script type=”text/javascript” src=”<?php echo base_url(); ?>/js/json/json2.js”></script>
<script type=”text/javascript” src=”<?php echo base_url(); ?>/js/swfobject.js”></script>
<script type=”text/javascript”>

swfobject.embedSWF(“<?php echo base_url(); ?>/js/open-flash-chart.swf”, “chart”, “750″, “200″, “9.0.0″);

</script>

<script type=”text/javascript”>

function open_flash_chart_data()
{

return JSON.stringify(data);

}

function findSWF(movieName) {

if (navigator.appName.indexOf(“Microsoft”)!= -1) {

return window[movieName];

} else {

return document[movieName];

}

}

var data = <?php echo $graph->toPrettyString(); ?>;

</script>

</head>
<body>

<div id=”chart”></div>

</body>
</html>

Keterangan:

  • $graph->toPrettyString(), kode ini digunakan memformat string ke dalam format JSON.
  • JSON.stringify(data), digunakan untk membuat Objek JSON.
  • swfobject.embedSWF(“<?php echo base_url(); ?>/js/open-flash-chart.swf”, “chart”, “750″, “200″, “9.0.0″), kode ini digunakan untuk mengembed file open-flash-chart.swf dan memberikan hasilnya ke elemen HTML yang mempunyai id=”chart” yaitu <div id=”chart”></div>.

Jika tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura‘.



Categories: CodeIgniter

3 Responses

  1. save says:

    Padahal sudah diarahkan dengan benar tp masih error :

    Unable to load the requested class: open_flash_chart

  2. Fahmi Basya Kartapura says:

    Unable to load the requested class: open_flash_chart, error ini berarti class open_flash_chart tidak bisa diload, penyebabnya terjadi pada kode $this->load->library(‘php-ofc-library/open_flash_chart’), nah coba periksa apakah folder php-ofc-library sudah kamu letakkan di dalam folder library codeigniter dan juga periksa didalamnya apakah terdapat file open_flash_chart.php

  3. crazynoil says:

    Maaf saya mau coba bantu

    bagi yang muncul “Unable to load the requested class: open_flash_chart”, coba ubah nama file “open-flash-chart.php” yang ada di folder “php-ofc-library” menjadi “open_flash_chart.php” (pake underscore bukan pake dash) karena nama class di dalamnya pun “open_flash_chart”. Ubah juga nama file “open-flash-chart-object.php” nya

Copy Protected by Chetans WP-Copyprotect.