Search code examples
phphtmlmysqlsqlgoogle-visualization

Display information from SQL database to google chart


I'm trying to display information from my SQL database to google charts. The project is a health dashboard where I need to display steps, kcal, etc.

I got the information from the database but I'm having trouble looping over it (the same information displays multiple times). I assume the problem is somewhere at the "data.addrows"-code.

php
include('template.php');
$query = /** @lang text */ <<
SELECT * FROM project_healthinfo WHERE id = {$_SESSION['userId']} ORDER BY date DESC
END;
$res = $mysqli->query($query);
$result = $res->fetch_object();
$content = <<<END
                  <!-- Google Chart script starts here -->
                  <!--Load the AJAX API-->



                    // Load the Visualization API and the corechart package.
                    google.charts.load('current', {'packages':['corechart']});

                    // Set a callback to run when the Google Visualization API is loaded.
                    google.charts.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.


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

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

                    function drawChart() {

                      var data = new google.visualization.DataTable();
                      data.addColumn('string', 'Date');
                      data.addColumn('number', 'Steps taken');


                      data.addRows([
                        ['$result->date',  $result->steps],
                        ['$result->date',  $result->steps],
                        ['$result->date',  $result->steps]
                      ]);

                      var options = {
                        chart: {
                          title: ''
                        },
                        width: 550,
                        height: 300
                      };

                      var chart = new google.charts.Line(document.getElementById('steps_chart'));

                      chart.draw(data, google.charts.Line.convertOptions(options));
                    }
                  </script>
                  <!-- Google Chart script ends here -->

Solution

  • You'll need to break the $content into two parts.

    $before_result_date = <<<EOS
    ...
    EOS;
    
    $after_result_data = <<<EOQ
    ...
    EOS;
    

    Then the section between there should be a loop similar to this.

    while($result = $mysqli->fetch_object()){                      
       printf("['%s', %s],\n",$result->date, $result->steps);
    }
    

    and all together it would be something like this:

    include('template.php');
    $query = /** @lang text */ <<
    SELECT * FROM project_healthinfo WHERE id = 
    {$_SESSION['userId']} ORDER BY date DESC
    END;
    
    $res = $mysqli->query($query);
    
    print $before_result_date;
    
    while($result = $mysqli->fetch_object()){                      
       printf("['%s', %s],\n",$result->date, $result->steps);
    }
    
    print $after_result_date;
    

    That should do it.