Usando php, ajax y jqplot para hacer un gráfico circular

Estoy intentando hacer un gráfico circular usando un archivo php que obtiene la información de MySQL, JSON la codifica y luego la envía a mi archivo JS para hacer el gráfico circular. He mirado la mayoría de las otras preguntas publicadas aquí y ninguna de ellas me ayuda en absoluto. Intenté volver a escribir mi código para que coincida con los que parecen encajar, pero nada funciona.
Mi archivo php es:

$shelvDate = $_POST['shelvDate'];
$x = 0;

// get information from database for shelving chart
$shelv = $conn -> query ("SELECT sum(quantity) as qty, date_process, created_by, first_name from inventory LEFT JOIN users on users.user_id =inventory.created_by
    WHERE date_process = '$shelvDate' GROUP BY created_by" );
$num_rows = $shelv->num_rows;

if($num_rows > 0){
    while($row = $shelv->fetch_assoc()) {
        if($row['qty'] > 0){
            $qtyArray[$x] = $row['qty'];
            $nameArray[$x] = $row['first_name'];
        }
        $x++;

        $pairs = array('first_name' => $nameArray, 'qty' => $qtyArray);
    } // end of while statement
} //end of if statement

$conn->close();
echo json_encode(array($pairs));

Cuando intento obtener los datos en mi ajax/js me sale un error Mi JS es:

$("#getRecords").live('click', function() {
    var ajaxDataRenderer = function(url, plot, options) {
        var ret = null;
        $.ajax({
            type: "POST",
            async: false,
            url: url,
            dataType:"json",
            data: ({shelvDate: $('#shelvDate').val()}),
            success: function(data) {
                for(var x=0; x<data.first_name.length; x++) {
                    var info = [data.first_name[x], data.qty[x]];
                    ret.push(info);
                }
        }); // end of ajax call

        return ret;
    }; // end of ajaxDataRenerer call

    // The url for our json data
    var jsonurl = "shelvChart.php";
    var plot2 = $.jqplot('shelvChart', jsonurl,{
    seriesDefaults: {
           // Make this a pie chart.
           renderer: jQuery.jqplot.PieRenderer,
           rendererOptions: {
               // Put data labels on the pie slices.
               // By default, labels show the percentage of the slice.
               showDataLabels: true
           }
        }, 
        title: "Books Shelved",
        dataRenderer: ajaxDataRenderer,
        dataRendererOptions: {
            unusedOptionalUrl: jsonurl
        }
    });
});

No sé qué estoy haciendo mal o incluso a dónde ir desde aquí, ya que todavía soy nuevo en AJAX y JS. Cualquier ayuda será apreciada.
Jim

preguntado el 22 de mayo de 12 a las 15:05

Cual es el resultado de console.log(data); dentro de success: function(data) {} -

si agrego un cuadro de alerta en el éxito: función (datos), obtengo nombre [objeto, objeto], cantidad [objeto, objeto]. -

1 Respuestas

Sería muy útil ver un verdadero JSON cadena que está obteniendo, porque no estoy seguro de cómo puede obtener name[object,object],qty[object,object] después de llamar alert(ret) o tal vez te refieres a otra alerta?.

De todos modos, por lo que dice, su problema es que debe asegurarse de que la matriz devuelta por el ajaxDataRenderer La función tiene un formato adecuado que es aceptado por un gráfico circular.

Por lo tanto, por ejemplo, dentro de su PHP or JavaScript código que necesita para asegurarse de que la matriz devuelta ret es del siguiente formato:

ret = [[name[0], qty[0]], [name[1], qty[1]], ...]; 

De esta manera, todos los valores que están en la matriz de nombres se usarán como etiquetas y la matriz de cantidad se usará como valores a partir de los cuales se evaluará el porcentaje.

En esta respuesta se muestra un enfoque similar que muestra cómo preparar datos para un gráfico.

contestado el 23 de mayo de 17 a las 13:05

Después de depurar un poco, pude obtener algunos datos reales de mi consulta mysql. Ahora en la alerta (ret) obtengo: first_name,Mike,Cory,Doug,Pond,Santos,qty,471,80,101,59,46. Pensé que se suponía que json debía formatear esta información en forma []. Miraré tu ejemplo ahora y veré si tiene algún sentido para mí. Gracias por la ayuda. - Jim

Utilicé partes de su ejemplo de código de su ejemplo de código y ahora tengo mi alerta formateada como: mike, 471, cory, 80, etc., pero todavía no lo consigo trazar en mi gráfico. ¿alguna sugerencia? - Jim

Proporcione jsfiddle que muestre su problema. No estoy realmente seguro de cuál es el problema allí sin ver el código real. También mi sugerencia fue tener arreglos que consistieran en un par [nombre, cantidad] en ret formación. - Boro

Pude obtener la matriz ret como [nombre, cantidad], ahora simplemente no puedo obtener la información para mostrar en mi gráfico. Intentaré obtenerlo en jsfiddle ahora. Gracias - Jim

El código de ejemplo que proporcionó no se puede ejecutar, por lo tanto, no puedo ver cuál es su problema. Por favor, copie y pegue el exacto salida que obtienes cuando llamas console.log(ret) or alert(ret) después de una llamada a ajaxDataRenderer o el resultado de lo que haces en tu código alert(JSON.stringify(ret));. Intente simplemente llamar al método y generar el valor devuelto. - Boro

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.