Generar graficas con HIGHCHARTS desde Ajax

[moynet]

Hola estoy intentando de completar los datos de una grafica desde una petición ajax que hago a un servidor con php y una base de datos, pero estoy teniendo problemas porque me está costando mucho entender como tengo que agregar los nuevos parámetros de valores al gráfico.

Osea, lo que me interesa es poder agregar por ejemplo estos valores que mando desde php a una grafica ya creada con HIGHCHARTS

series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]


Si alguien supiera alguna web que explique paso a paso como funciona HIGHCHARTS que este en español porque llevo buscando varios dias pero no lo consigo.

Muchas gracias.

[ocesitaro]

Iniciado por moynet

Hola estoy intentando de completar los datos de una grafica desde una petición ajax que hago a un servidor con php y una base de datos, pero estoy teniendo problemas porque me está costando mucho entender como tengo que agregar los nuevos parámetros de valores al gráfico.

Osea, lo que me interesa es poder agregar por ejemplo estos valores que mando desde php a una grafica ya creada con HIGHCHARTS

series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]


Si alguien supiera alguna web que explique paso a paso como funciona HIGHCHARTS que este en español porque llevo buscando varios dias pero no lo consigo.

Muchas gracias.

bien puedes usar el json_encode() desde php o bien imprimiendo una cadena de esat forma:

$cadena="[['uno',1],['dos',2]]";
y con javascript

var info=$cadena;

data:info

[moynet]

Hola Ocesitario, muchas gracias por responder, no había visto tu mensaje... pues está bien así como le dices, lo voy a probar de esa manenea, lo que tambien tengo problemas es a la hora de agregarles esos valores que lo hago de la siguiente forma:

Por ejemplo sabiendo que el grafico esta en...

var options;
chart = new Highcharts.Chart(options);

Luego tengo puesto un botón que llama a la funcion valoresGraficos y que le pasa un parametro para generar de forma diámica los datos necesarios del gráfico.

¿Como le agrego por ejemplo la respuesta obtenida desde PHP? ... tengo echo algo como esto esto pero no me va:


function valoresGraficos(tipo){

$.ajax{
url: "tipoGrafico.php?tipo="+tipo,
success: function(respuesta){

// actualmente tengo puesto options.series[0]=respuesta; pero no va, incluso he probado muchas mas opciones.
// no se como ponerlo correctamente o como debe recibir los datos.

}
}


Muchas gracias por su tiempo.

[ocesitaro]

pues

$.ajax{
url: "tipoGrafico.php?tipo="+tipo,
success: function(respuesta){

// actualmente tengo puesto options.series[0]=respuesta; pero no va, incluso he probado muchas mas opciones.
// no se como ponerlo correctamente o como debe recibir los datos.

}
}

tipoGrafico.php?tipo="+tipo

ese php que te imprima

tipoGrafico.php.php que te imprima

<?php

$cadena="[['uno',1],['dos',2]]";

?>

[moynet]

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!!!