Ejemplo se va a crear una grfica de columnas agrupadas

obteniendo los datos de una base de datos MySQL con PHP y

jQuery.

ESTRUCTURA DE LA TABLA A GRAFICAR

CREATE TABLE IF NOT EXISTS `tblventas` (
`idventa` int(10) unsigned NOT NULL AUTO_INCREMENT,
`categoria` varchar(20) NOT NULL,
`mes` varchar(10) NOT NULL,
`total` decimal(9,2) unsigned NOT NULL,
PRIMARY KEY (`idventa`)
) ENGINE=InnoDB

Archivo: grafica.html
comenzamos incluyendo la librera Google y jQuery con las
siguientes lineas
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Despus colocamos el cdigo javascript que obtiene los datos del

servidor y muestra la grfica.
Comenzamos el cdigo que obtiene los datos del servidor, para lo
cual haremos una peticin ajax que devolver un JSON con la
informacin a graficar que se se almacenar en la variable datos

var datos = $.ajax({

url:'datosgrafica.php',
type:'post',
dataType:'json',
async:false
}).responseText;

Pero para la grafica se necesita que la informaicon sea un objeto

JSON entonces lo convertimos con la funcion JSON.parse()
datos = JSON.parse(datos);

Ahora que ya tenemos los datos de la grfica comenzamos con el

cdigo que la va a dibujar:
/*Se carga el modulo que se va a utilizar en este caso visualization,
seguido de la versin y el paquete que ses corechart para la grafica*/
google.load("visualization", "1", {packages:["corechart"]});
/* En esta linea se indica que se va a llamar a la funcin dibujarGrafico
una vez que el documento se haya terminado de cargar*/
google.setOnLoadCallback(dibujarGrafico);
function dibujarGrafico() {
/* La informacion que se obtuvo del servidor se convierte a un dataTable
para que se muestre en el grafico */
var data = google.visualization.arrayToDataTable(datos);
/* Se definen algunas opciones para el grafico*/
var opciones = {
title: 'VENTAS DEL PRIMER BIMESTRE',
hAxis: {title: 'MESES', titleTextStyle: {color: 'green'}}
vAxis: {title: 'MILES DE PESOS', titleTextStyle: {color: '#FF0000'}},
backgroundColor:'#ffffcc',
legend:{position: 'bottom', textStyle: {color: 'blue', fontSize: 13}},
width:900,
height:500
};
/* se crea un objeto de la clase google.visualization.ColumnChart
( Grafica de columna )
en el cual se indica cual es el elemento HTML que contendr a la grfica */
var grafico = new google.visualization.ColumnChart
(document.getElementById('grafica'));
/* Se llama al mtodo draw para dibujar la grfica
grafico.draw(data, opciones);
}

Ahora el cdigo HTML es el siguiente

<div id="grafica"> </div>

Archivo: datosgrafica.php
En la parte del servidor es donde se crean las consultas y se arma
la estructura de los datos a mostrar en la grfica. Para este ejemplo
vamos a graficar las ventas de los meses del mes de enero y
febrero para las diferentes categoras que tenemos en nuestra base
de datos.
La estructura de la informacion debe estar de la siguiente forma
MES
CATEGORIA 1
CATEGORIA 2
CATEGORIA X
ENERO
1000
1500
2500
FEBRERO 1000
1500
2500
Para generar dicha estructura voy a trabajar con 3 arreglos el
primero contendr los nombres de las categoras, el segundo las
ventas de mes de enero y el tercero las ventas del mes de febrero,
una vez explicado lo anterior pasemos al
codigo php
/* Hace la conexion a la base de datos*/
$conexion = new mysqli('servidor','usuario','password','baseDatos');
/* Creo los 3 arreglos con su primer elemento*/
$categorias = array('MES');
$enero = array('ENERO');
$febrero = array('FEBRERO');
/* Creo la primer consulta que obtendr los nombres de las categorias
$consulta = "SELECT DISTINCT(categoria) FROM tblventas
WHERE mes = 'enero' OR mes = 'febrero' ORDER BY categoria";
/* Se ejecuta la consulta*/
$result = $conexion->query($consulta);
/*Recorro el resultado y guardo los nombres de las categoras en el arreglo*/
while ($fila = $result->fetch_array()) {
$categorias[] = $fila['categoria'];
}
/* Creo la segunda consulta que obtiene los totales de ventas */
$consulta = "SELECT categoria, mes, total FROM tblventas
WHERE mes = 'enero' OR mes = 'febrero' ORDER BY mes, categoria;";
/* Se ejecuta la consulta*/

$result = $conexion->query($consulta);
/*Recorro el resultado y guardo los nombres de las
categoras en el arreglo correspondiente*/
while($fila = $result->fetch_array()){
if($fila['mes'] == 'ENERO')
$enero[] = (double)$fila['total'];
else if ($fila['mes'] == 'FEBRERO')
$febrero[] = (double)$fila['total'];
}
/* Preparo la respuesta que se va a regresar como JSON*/
echo json_encode( array($categorias,$enero,$febrero) );