Create Chart using Codeginter, JQuery and Google Chart Tools

 

Google, selain sebagai mesin pencari yang handal, juga berperan besar dalam teknologi Open Source. Selain OS Android nya, google juga menyediakan berbagai layanan yang sangat berguna bagi para developer. Misalnya saja appengine,  Google Libraries, GWT, dan sebagainya. Salah satu yang saya gunakan adalah Google Charts Tools, yaitu library Javascript yang dapat digunakan untuk merender / membangun grafik. Karena merupakan library javascript, maka dapat dipadukan dengan berbagai bahasa pemrograman, dalam hal ini yang akan saya contohkan adalah PHP yang dipadukan dengan Codeigniter dan JQuery. Sebenarnya, dari halaman Google Chart Tools itu sendiri sudah menyediakan tutorial dasar penggunaaan nya, bahkan sangat lengkap.

Berikut penerapan google chart tools dengan Codeigniter dan Jquery

Controllers

<?php
class Chart extends CI_Controller {

function index(){

 $this->load->view("index");
 }

function getData(){
 $responce->cols[]=array("id"=>"","label"=>"Topping","pattern"=>"","type"=>"string");
 $responce->cols[]=array("id"=>"","label"=>"Slices","pattern"=>"","type"=>"number");
 $responce->rows[]["c"]=array(array("v"=>"Mushrooms","f"=>null),array("v"=>3,"f"=>null));
 $responce->rows[]["c"]=array(array("v"=>"Onions","f"=>null),array("v"=>1,"f"=>null));
 $responce->rows[]["c"]=array(array("v"=>"Olives","f"=>null),array("v"=>1,"f"=>null));
 $responce->rows[]["c"]=array(array("v"=>"Zuccini","f"=>null),array("v"=>1,"f"=>null));
 $responce->rows[]["c"]=array(array("v"=>"Pepperoni","f"=>null),array("v"=>3,"f"=>null));
 echo json_encode($responce);
 }
}

Views (index.php)

<html>
 <head>
 <!--Load the AJAX API-->
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript">

// Load the Visualization API and the piechart package.
 google.load('visualization', '1', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
 google.setOnLoadCallback(drawChart);

function drawChart() {
 var jsonData = $.ajax({
 url:'<?php echo base_url().'index.php/chart/getData'?>', //another controller function for generating data
 mtype : "post", //Ajax request type. It also could be GET
 dataType:"json",
 async: false
 }).responseText;

// Create our data table out of JSON data loaded from server.
 var data = new google.visualization.DataTable(jsonData);

// Instantiate and draw our chart, passing in some options.
 var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
 chart.draw(data, {width: 400, height: 240});
 }

</script>
 </head>

<body>
 <!--Div that will hold the pie chart-->
 <div id="chart_div"></div>
 </body>
</html>

Apabila benar maka akan menghasilkan grafik seperti berikut :