Ver Mensaje Individual
  #5 (permalink)  
Antiguo 22/02/2012, 07:59
moynet
 
Fecha de Ingreso: mayo-2010
Mensajes: 10
Antigüedad: 14 años
Puntos: 0
Respuesta: Generar graficas con HIGHCHARTS desde Ajax

Bueno despues de tanto intentar e investigar parece que he topado con algo bastante interesante y configurable. Al final he echo uso de XML generado desde php en el servidor obteniendo los datos de mysql y luego recorriendolos con javascript (jquery).

He agregado una funcion en javascript que recorre el XML, y que previamente realiza la peticion con ajax. Los parámetros los paso en formato Json y luego elijo el div donde poner el grafico, a continuación llamo la función de forma dinámica desde cuaquier parte del código, o desde un simple botón.

Creo primero una variable options que será global y que se completa desde dentro de la fución de javascript.


var options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: []
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Unidades'
}
},
series: []
};

function imprimeGrafica(json,div){
$.get('datos_graficos.php?json='+json, function(xml) {// Leer desde XML
var $xml = $(xml);
options.chart.renderTo=div;
options.chart.type=$xml.find('chart configuracion tipo_grafica').text();
options.title.text=$xml.find('chart configuracion titulo').text();
options.xAxis.categories=[];
$xml.find('categories item').each(function(i, category) {// leer todas las categorias
options.xAxis.categories.push($(category).text());
});
options.series=[];
$xml.find('series').each(function(i, series) {
var seriesOptions = {
name: $(series).find('name').text(),
data: []
};
$(series).find('data point').each(function(i, point) {// agregar cada punto de la grafica
seriesOptions.data.push(
parseInt($(point).text())
);
});
options.series.push(seriesOptions);
});
var chart = new Highcharts.Chart(options);
});
}


Luego desde php el archivo datos_graficos.php genera el siguiente ejemplo:

<chart>
<configuracion>
<tipo_grafica>column</tipo_grafica>
<titulo>Titulo Grafica</titulo>
</configuracion>

<categories>
<item>15/02/2012</item>
<item>16/02/2012</item>
<item>17/02/2012</item>
</categories>

<series>
<name>Dato 1</name>
<data><point>23</point>
<point>11</point>
<point>0</point>
</data>
</series>

<series>
<name>Dato 2</name>
<data><point>17</point>
<point>50</point>
<point>76</point>
</data>
</series>
</chart>

Expongo este codigo aqui por si alguien le viene bien de provecho y lo quiere usar, la verdad que me hacostado bastante pero la satisfacción de programar siempre es la de llegar a lo que uno se propone.

GRACIAS!!!

Última edición por moynet; 22/02/2012 a las 14:40