0

I have a database containing 4 columns. I want to display them on a line chart by Google Api charts. I have followed instructions from youtube but the charts wont display. I am not getting any errors of why the charts won't display. Any help is greatly appreciated.

This is my code of the php page called baragraph.php. I know that my connection is working since i have table info displayed when the database connection code is run alone in a separate page.

<?php
$mysqli = new mysqli('192.168.64.2','root','rootroot','vegetables');
    $query = sprintf("Select name,time,weight FROM vegedata");
    $result = $mysqli->query($query);
    $rows = array();
    $table = array();
    $table['cols'] = array(
        array(
                'label' => 'name',
                'type'  => 'varchart'
            ),
        array(
                'label' => 'time',
                'type'  => 'datetime'
            ),
        array(
                'label' => 'weight',
                'type'  => 'varchar'
            )
        );
    while($row = mysqli_fetch_array($result))
    {
        $sub_array = array();
        #$datetime = explode(".",$row["datetime"]);
        #$sub_array[] = array(
                        #"v" => 'time(' . $datetime[0].'000)'
                    #);
        $sub_array[] = array(
                        "v" => $row["name"]
                    );
        $rows[] = array(
                    "c" => $sub_array
        );
    }
    $table['rows'] = $rows;
    $jsonTable = json_encode($table);
?>
<!DOCTYPE html>`enter code here`
<html>
    <head>
        <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>


            <script type='text/javascript'>

            google.charts.load('current',{'packages':['corechart']});

            google.charts.setOnLoadCallback(drawChart);

            function drawChart(){
                var data = new google.visualization.DataTable(
                    <?php echo $jsonTable; ?>);

                var options = {
                    title: 'Vegetables Chart'
                    legend:{position:'bottom'},
                    chatArea:{width:'95%',height:'65%'}  
                };

                  var chart = new google.visualization.Linechart(
                    document.getElementbyId('line_chart')); 

                   chart.draw(data, options);  
            }


            </script>


    </head>
    <body>

            <div id="page-wrapper">
            <br />
            <h2 align="center">Charts</h2>
            <div id="line_chart" style="width: 100%; height:500px"></div>

            </div>

    </body>
</html>
Mark sullivan
  • 11
  • 5
  • Note: The object-oriented interface to `mysqli` is significantly less verbose, making code easier to read and audit, and is not easily confused with the obsolete `mysql_query` interface. Before you get too invested in the procedural style it’s worth switching over. Example: `$db = new mysqli(…)` and `$db->prepare("…")` The procedural interface is an artifact from the PHP 4 era when `mysqli` API was introduced and should not be used in new code. – tadman Nov 07 '17 at 05:55
  • That `sprintf` call is also extraneous and highly concerning. **DO NOT** use `sprintf` to compose queries. Always use prepared statements with placeholder values when introducing user data. – tadman Nov 07 '17 at 05:56
  • Thats was some useful information to edit in my code, but unfortunately my charts still wont display. – Mark sullivan Nov 07 '17 at 06:01
  • A lot of problems can be detected and resolved by [enabling exceptions in `mysqli`](https://stackoverflow.com/questions/14578243/turning-query-errors-to-exceptions-in-mysqli) so mistakes aren't easily ignored. – tadman Nov 07 '17 at 06:02

0 Answers0