Help Populating Google Charge Table Data With MySQL Table & Drawing Pie Chart On Same Page

21 views

Skip to first unread message

Marlon Brando

unread,

Mar 12, 2016, 9:13:46 AM3/12/16

to Google Visualization API

<?php
    $con = mysqli_connect('localhost','root','','cash');
    $query = "SELECT SUM(amount) AS amount, category FROM cash GROUP BY category";
    $exec = mysqli_query($con,$query);

    $rows = array();
    $table = array();
    $table['cols'] = array(
        array('label' => 'category', 'type' => 'string'),
        array('label' => 'amount', 'type' => 'number')
    );

    $rows = array();
    while($r = mysqli_fetch_assoc($exec)) {
        $temp = array();
        $temp[] = array('v' => (string) $r['category']);
        $temp[] = array('v' => (int) $r['amount']);
        $rows[] = array('c' => $temp);
    }
    
    $table['rows'] = $rows;
    $jsonTable = json_encode($table);
?>
 
<html>
    <head>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">
            
            google.load('visualization', '1', {'packages':['corechart']});
            google.setOnLoadCallback(drawChart);
            
            function drawChart() {
                var data = new google.visualization.DataTable(<?=$jsonTable?>);
                var options = {
                    title: ' Budget Breakdown ',
                    is3D: 'true',
                    width: 800,
                    height: 600
                };
                
                var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
                chart.draw(data, options);
            }
        </script>
    </head>
    <body>
        <!--this is the div that will hold the pie chart-->
        <div id="chart_div"></div>
    </body>
</html>

On this page I want to insert a Google Chart Table using the same table but the query being "SELECT amount, category, transDate FROM cash GROUP By uID"

Here's the JSON of my MySQL table


[{"TransactionID":"1","category":"Food","amount":"200","transDate":"2016-03-02","uID":"1"}, {"TransactionID":"2","category":"Bills","amount":"3500","transDate":"2016-03-05","uID":"1"}, {"TransactionID":"3","category":"School","amount":"5000","transDate":"2016-03-08","uID":"2"}, {"TransactionID":"4","category":"Recreation","amount":"500","transDate":"2016-03-10","uID":"1"}, {"TransactionID":"5","category":"Bills","amount":"200","transDate":"2016-03-13","uID":"3"}]

Reply all

Reply to author

Forward

0 new messages