Access JSON php array to use in Google Charts

Question

I was wondering if you could please help me out, I am trying to pull data (status and value) from a table in php, save it to an array (and encode it to JSON) and then use the encoded JSON array to add the rows in the Pie Chart I am trying to create. Can anyone please guide me on how to successfully do this? I think I am missing a few key lines.

Any help is appreciated.

Thanks in advance!

<?
// Connection to the database 
$db = mysql_connect("localhost", "root", "elves") or die("Could not connect");
mysql_select_db("wlp_FIX001");

// Selecting the data
$s = "SELECT * FROM `lu_opportunity_status`";
$m = mysql_query($s) or die("$s dies - " . mysql_error());

while ($row = mysql_fetch_array($m)) {

    $oppStatusName = $row['status'];

    $s1 = "SELECT `lu_opportunity_status`.`status`, SUM(`opportunities`.`value`) AS `totalvalue` FROM `opportunities` LEFT JOIN `lu_opportunity_status` ON `opportunities`.`status` = `lu_opportunity_status`.`id` WHERE `lu_opportunity_status`.`status` = '$oppStatusName'";
    $m1 = mysql_query($s1) or die("$s1 dies - " . mysql_error());

    $oppStageTotals = array();

    while ($row1 = mysql_fetch_array($m1)) {

        $oppStatus = $row1['status'];
        $oppValue = $row1['totalvalue'];
        $oppStageTotals[] = array("status" => $oppStatus, "oppValue" => $oppValue);
    }
    //print_r($oppStageTotals);
    $encoded_oppStageTotals =  json_encode($oppStageTotals);
    //echo $encoded_oppStageTotals;
}
?>
<html>
    <head>
        <TITLE>Form Scaff Charts</TITLE>
        <!--<link rel="stylesheet" media="print" title="Printer-Friendly Style" 
         type="text/css" href="print.css">-->
        <!--Load the AJAX API-->
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>

        <script type="text/javascript">
            var encoded_oppStageTotals = <?php echo json_encode($encoded_oppStageTotals); ?>
            var oppStageTotals = new Array();

            oppStageTotals = encoded_oppStageTotals;
            // Load the Visualization API and the piechart package.
            google.load("visualization", "1", {packages:["corechart"]});
            google.load('visualization', '1.0', {'packages':['corechart']});
            google.load('visualization', '1', {packages:['table']});

            // Set a callback to run when the Google Visualization API is loaded.
            google.setOnLoadCallback(drawChart);

            // Callback that creates and populates a data table, 
            // instantiates the pie chart, passes in the data and
            // draws it.
            function drawChart() {
                // Create the data table.
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Status');
                data.addColumn('number', 'Value');

                var len = jsonarray.length;
                data.addRows(len);

                // Need some stuff here to do it??

                // Set chart options
                var options = {'title':'Opportunities',
                    'width':300,
                    'height':300};

                // Instantiate and draw our chart, passing in some options.
                var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

                function selectHandler() {
                    var selectedItem = chart.getSelection()[0];
                    var selectedItem2 = chart.getSelection()[1];
                    if (selectedItem) {
                        var topping = data.getValue(selectedItem.row, 0);
                        var amount = data.getValue(selectedItem.row, 1);
                    }
                }

                google.visualization.events.addListener(chart, 'select', selectHandler);    
                chart.draw(data, options);
            }
        </script>
        <style>
            body {
                margin:0px;
                padding:0px;
            }

            .container {
                width: 210mm;
                height: 297mm;
                margin-left: auto;
                margin-right: auto;
            }

            @media print
            {
                .container {
                    position: absolute;
                    top: 0px;
                    bottom: 0px;
                    left: 0px;
                    right: 0px;
                }

                iframe {
                    /*      float:left;
                display: block;*/
                }

            }
        </style>
    </head>
    <body>
        <div class="container">
            <div id="chart_div" class=span4></div>
        </div>
    </body>
</html>

Answer 1

我好像您在这里缺少分号来终止javascript行（我添加了它）：

var encoded_oppStageTotals = <?php echo json_encode($encoded_oppStageTotals); ?> ;

Access JSON php array to use in Google Charts

Question

1 answers

solution1
0 2012-06-11 09:33:06

Access JSON php array to use in Google Charts

Question

1 answers

solution1 0 2012-06-11 09:33:06

solution1
0 2012-06-11 09:33:06