entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

Pasar Json a gráfica Highcharts

Buenas, no consigo dibujar ninguna gráfica. Si yo le inserto los datos manualmente sí, pero si intento que los lea a través del json, no.
He creado un formulario que me manda los datos a una base de datos MYSQL. Bien. Luego, convierto esos datos a json un json_encode.
Os dejo el Php:

<?php
$con = mysql_connect("url", "user", "password");

if (!$con) {
die('Could not connect: ' . mysql_error());
}

mysql_select_db("nombre_base_datos", $con);

$result = mysql_query("SELECT Mes, Compras FROM nombre_de_la_tabla");

$rows = array();
while($r = mysql_fetch_array($result)) {
$row[0] = $r[0];  //editado, fallo al transcribir. La gráfica sigue sin aparecer.
$row[0] = $r[1];
array_push($rows,$row);
}

print json_encode($rows, JSON_NUMERIC_CHECK);

mysql_close($con);
?>

Que me devuelve en este formato:
[["Enero",3],["Febrero",8]]

A continuación intento dibujar la gráfica con el json.

Os dejo el código:

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Pie Chart</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            var options = {
                chart: {
                    renderTo: 'container',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: 'Web Sales & Marketing Efforts'
                },
                tooltip: {
                    formatter: function() {
                        return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            formatter: function() {
                                return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                            }
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Browser share',
                    data: []
                }]
            }

            $.getJSON("nombre_archivo.php", function(json) {
                options.series[0].data = json;
                chart = new Highcharts.Chart(options);
            });

        });   
        </script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script src="http://code.highcharts.com/modules/exporting.js"></script>
    </head>
    <body>
        <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    </body>
</html>

Creo que el problema está o en el formato del json o cuando llamo al json. El ejemplo que sigo es de esta web: http://blueflame-software.com/blog/highcharts-pie-chart-php-mysql-example/

Me da igual el tipo de gráfica, ya sea una "pie chart" o una gráfica de barras.

Mi intención es crear una encuesta y mostrar los resultados al momento. Si conocéis otra manera de hacerlo, o ayudarme/guiarme os lo agradecería también. Ando un poco desesperado ya. Cualquier mínima ayuda sería de gran utilidad.

Muchas gracias por adelantado!

4 Respuestas

2votos

mrczrt Puntos6940

Hola, puedes checar tu salida con http://jsonlint.com/ para ver si tu JSON es valido.

Por otro lado options.series[0].data es un arreglo no un objeto plano osea un JSON, puede ser reasignado el tipo de dato en JS, pero talvéz tu grafícador solo soporta arreglos y no el objeto plano que intentas, saludos.

1voto

Andres-Fuentes-Calde comentado

Muy interesante esa web, no la conocía. Me sale el json como válido.
Con arreglo te refieres a Array, no? Entonces el problema estaría en el código de la función get.json, verdad?

0voto

mrczrt comentado

En PHP estas creando un JSON y si tu función se esta ejecutando entonces esta bien formado el JSON, creo mas bien debes checar el tipo de dato que te acepta tu graficador.

2votos

mrczrt Puntos6940

Tu error es :

$row['Mes'] = $r[0];$row['Compras'] = $r[1];

debe ser :

$row[0] = $r[0];$row[1] = $r[1];

El problema es que estas creando un arreglo asociativo para $row cuando este para que funcione solo debe ser numerico.

0voto

Andres-Fuentes-Calde comentado

Ok... si te digo que el código que en realidad tengo así el código php me crees?
He cometido un error y aquí he pegado el código de uno de los documentos de prueba, no del que en realidad tengo subido en el servidor.

El que tengo subido en el servidor sí estaba y está escrito tal y como tú mencionas. De hecho el código que yo he puesto arriba, no imprime el json en el formato que te he indicado. Aún así muchas gracias por tu ayuda, pero aún así el problema sigue existiendo.
No sé cómo tengo que hacer la llamada a json. En la web que he puesto arriba hacen un ejemplo y lo sigo al pie de la letra, pero no funciona.
En stackoverflow e dicen lo siguiente, quizás te pueda guiar a ayudarme, porque realmente no entiendo lo que me quieren decir: http://stackoverflow.com/questions/19968453/json-and-highcharts
Gracias de nuevo y perdón por el error!

0voto

elporfirio Puntos2570

tuve una situación similar.

Con googler Charts pase un Array asociativo $array["caminito de la escuela"] = "vamos todos a trollear";

Y lo toma ocmo etiqueta y valor sin problema.

La situación es que tuve que pasarlo de JSON a un Array() de JS (despues me di cuenta quepodia utilizar JSOn si activaba una funcion).

¿estas seguro de que el array que imprimes es el que necesita la grafica? quiza necesites un Array() de JS en ves d eun JSON

0voto

Ok. El problema está en el servidor. Al ser gratuito meterá porquería por medio. Lo he probado en localhost y va perfecto.

0voto

mrczrt comentado

A veces pasa, saludos :)

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta