2016-09-23 10:13
浏览 64

如何使用<?php echo $ data; ?>为了填充Google图表

I am currently working on a project at university which involves sampling values (CO2, temperature, humidity ...) to a SQLite3 database with a Raspberry Pi and using a webinterface to show the data. I'm fairly new to php/html, but I have no problems understanding what the code does.

I already found a german tutorial describing how to create a php/html script which imports the data from the SQLite database and uses Google Graphs in order to display it. I used the provided code as the base for my script.

This is what I have so far:


//------------------------ PHP Settings ----------------------------------------
ini_set('track_errors', 1);
ini_set('display_errors', 1);
ini_set('log_errors', 1);

$SQL="SELECT CO2, Temperature FROM value";

$db = db_con($DBfile);
$q = db_query($SQL);

 $data = "var data = new google.visualization.DataTable();<br>"
 ."data.addColumn('number', 'CO2');<br>"
 ."data.addColumn('number', 'Temperature');<br><br>"

 while ($res = $q->fetch(PDO::FETCH_ASSOC)) {

        $temp = (int)$res['Temperature'];
        $co2 = (int)$res['CO2'];
        $data = $data."  [".$temp.", ".$co2."],<br>";
        $data = $data."]);<br>";

//Print data to check if data from database is loaded
echo $data;


    <script language="javascript" type="text/javascript" src=""></sc$
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});

      function drawChart() {
        <?php echo $data; ?>

        var options = {
          title: 'Air Quality',
          curveType: 'function',
          legend: { position: 'bottom' }

        var chart = new google.visualization.LineChart(document.getElementById('temp_curve_chart'));

        chart.draw(data, options);
    <div id="temp_curve_chart" style="width: 900px; height: 500px"></div>

Now the problem is, that the graph does not show up.

If I add echo $data;the content of the variable shows up in the browser, which means that the import part is working, but I just can't get it to display the graph.

var data = new google.visualization.DataTable();
data.addColumn('number', 'CO2');
data.addColumn('number', 'Temperature');

[23, 500],
[23, 500],
[25, 600],

I suspect it has something to do with the following line of code or with the way the $data variable is set up:

function drawChart() {
        <?php echo $data; ?>

If I replace it with code from the example provided by Google, it shows the graph just fine.

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540]

    var options = {
      title: 'Company Performance',
      curveType: 'function',
      legend: { position: 'bottom' }

I already spent hours trying to get it work, but I just can't get it right.

Any help/tips would be greatly appreciated!

Thanks in advance!

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dongtao9095 2016-09-23 10:36

    I found two things:

    first is this line

    <script language="javascript" type="text/javascript" src=""></sc$

    must be

    <script language="javascript" type="text/javascript" src=""></script>

    secondly remove all


    in your JavaScript and replace (not necessary, because it is just an visual effect in the source code) with


     $data = "var data = new google.visualization.DataTable();
     ."data.addColumn('number', 'CO2');
     ."data.addColumn('number', 'Temperature');
     while ($res = $q->fetch(PDO::FETCH_ASSOC)) {
            $temp = (int)$res['Temperature'];
            $co2 = (int)$res['CO2'];
            $data = $data."  [".$temp.", ".$co2."],
            $data = $data."]);

    And you will get a nice looking graph!

    打赏 评论

相关推荐 更多相似问题