Crear gráficas con CodeIgniter, jQuery y Google Charts

Archivo 0 12 Brocard Brocard
Existen varias formas y librerías para crear gráficas entre ellas jpGraph, pChart y Google Charts. Hoy te voy a dar un ejemplo de cómo generar gráficas en CodeIgniter con la ayuda de jQuery y Google Charts. En el archivo Controller.php
<?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);
 }
}
En el archivo View.php Dentro de la etiqueta <head> vamos a cargar la API de Ajax:
 
 <script type="text/javascript" src=" https://www.google.com/jsapi">
 <script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript">
 <script type="text/javascript">

// Cargar la API de Visualización y el paquete de gráficas tipo pie.
 google.load('visualization', '1', {'packages':['corechart']});

// Definir un callback para ejecutar cuando la API de visualización es cargada.
 google.setOnLoadCallback(drawChart);

function drawChart() {
 var jsonData = $.ajax({
 url:'', // Otra función de controlador para generar datos
 mtype : "post", // Tipo de solicitud Ajax. Puede ser GET
 dataType:"json",
 async: false
 }).responseText;

// Crear nuestra tabla de datos fuera de los datos JSON cargados desde el servidor.
 var data = new google.visualization.DataTable(jsonData);

// Iniciar y dibujar nuestra gráfica pasando algunas opciones.
 var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
 chart.draw(data, {width: 400, height: 240});
 }

</script>
Dentro de la etiqueda <body> vamos a incluir el div para mostrar nuestra gráfica:
<!--Div para mostrar la gráfica tipo pie-->
<div id="chart_div">
Esto fue todo. Si tienes preguntas déjalas en el apartado de comentarios. [su_button url="http://ir.exp3rto.com/1plW7zZ" target="blank" style="flat" radius="5" icon="icon: download" text_shadow="1px 1px 1px #000000" rel="nofollow"]Descargar archivos[/su_button]

Acerca del Autor

Sé el primero en comentar.

Para dejar un comentario tienes que Iniciar sesión.