|    
			
				22/02/2012, 07:59
			
			
			  | 
  |   |  |  |  Fecha de Ingreso: mayo-2010 
						Mensajes: 10
					 Antigüedad: 15 años, 5 meses 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
     |