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 :

  • Riorudy888

    Makasih atas informasix.. sangat bermanfaat..buat penelitian saya.. sukses slalu…

    • dwijonarko

      sama-sama 🙂

  • taufik

    om kalo data nya dari database untuk memasukan data ke array respones gimana?

    • tinggal query dari database aja, masukinke arraynya

  • winda

    mas gak bisa dijelaskan maksud dari function getData nya??

    • membuat array dari data, kemudian ditampilkan dalam bentuk JSON