CODEWITHSUNDEEP
phpjavascriptajaxjqplot
Jim
Jim

Reputation: 1315

Using php, ajax and jqplot to make a pie chart

I am attempting to make a pie chart using a php file that gets the information from MySQL, JSON encodes it, and then sends it to my JS file to make the pie chart. I have looked at most of the other questions posted here and none of them help me at all. I have attempted to re-qrite my code to match ones that seem to fit, but nothing is working.
My php file is:

$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));

When I attempt to get the data into my ajax/js I get an error. My JS is:

$("#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
        }
    });
});

I am don't know what I'm doing wrong or even where to go from here as I am still new to AJAX and JS. Any help will be greatly appreciated.
Jim

Upvotes: 1

Views: 2905

Answers (1)

Boro
Boro

Reputation: 7943

It would be very useful to see a real JSON string you are getting, cause I am not sure how you can get name[object,object],qty[object,object] after calling alert(ret) or maybe you are referring to other alert?.

Anyway from what you are saying your problem is that you must make sure that the array returned by the ajaxDataRenderer function is of a proper format that is accepted by a pie chart.

Therefore, for example, inside your PHP or JavaScript code you need to make sure that the returned array ret is of the following format:

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

This way all values that are in name array will be used as labels and qty array will be used as values from which the percentage will be evaluated.

Similar approach that shows how to prepare data for a chart is shown in this answer.

Upvotes: 1

Related Questions