php - 如何使用<?php echo $ data; ?>以便填充Google图表

标签 php html sqlite google-visualization

我目前正在大学里从事一个涉及抽样值的项目
(CO2,温度,湿度...)到具有Raspberry Pi并使用Web界面显示数据的SQLite3数据库。
我是php / html的新手,但是我对理解代码的功能没有任何问题。

我已经找到一个german tutorial描述如何创建php / html脚本,该脚本从SQLite数据库导入数据并使用Google Graphs进行显示。我使用提供的代码作为脚本的基础。

这是我到目前为止的内容:

<?php

require_once("config.php");
require_once("functions.php");
//------------------------ PHP Settings ----------------------------------------
ini_set('track_errors', 1);
ini_set('display_errors', 1);
ini_set('log_errors', 1);
ini_set("memory_limit","64M");
ini_set("max_execution_time","30");
@ob_implicit_flush(true);
@ob_end_flush();
$_SELF=$_SERVER['PHP_SELF'];


$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>"
 ."data.addRows([<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;

?>

 <html>
  <head>
    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></sc$
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      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);
      }
    </script>
  </head>
  <body>
    <div id="temp_curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>


现在的问题是,该图没有显示。

如果添加echo $data;,变量的内容将显示在浏览器中,这意味着导入部分正在运行,但是我无法获取它来显示图形。

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

data.addRows([
[23, 500],
[23, 500],
[25, 600],
]);


我怀疑这与以下代码行或$ data变量的设置方式有关:

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


如果我将其替换为示例provided by Google中的代码,则显示的图形很好。

  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' }
    };


我已经花了数小时试图使其正常工作,但是我做不到。

任何帮助/提示将不胜感激!

提前致谢!

最佳答案

我发现了两件事:

首先是这条线

<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></sc$


一定是

<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>


其次删除所有

<br>

在您的JavaScript中,并用\n\r替换(不必要,因为这只是源代码中的视觉效果)

喜欢

 $data = "var data = new google.visualization.DataTable();\n\r"
 ."data.addColumn('number', 'CO2');\n\r"
 ."data.addColumn('number', 'Temperature');\n\r\n\r"
 ."data.addRows([\n\r";

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

        $temp = (int)$res['Temperature'];
        $co2 = (int)$res['CO2'];
        $data = $data."  [".$temp.", ".$co2."],\n\r";
        }
        $data = $data."]);\n\r";


您会得到一个漂亮的图形!

关于php - 如何使用<?php echo $ data; ?>以便填充Google图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39658251/

相关文章:

php - 使用 1 个远程开发服务器且没有本地开发环境的 Web 开发团队中的 git

php - 如何在有条件的情况下使用PHP将csv文件解析为mysql DB

php将包含文件的文件夹重命名为

html - wxPython 其他创建饼图的方法

c# - MVC Razor View 中的 HTML.Textarea 值

javascript - GetElementByID() 的实现是什么?

php - 连接和更新数据库的表单

android - 数据库文件以错误的编码加载 : 'UTF-8'

iphone - iPhone SDK:从SQLite加载UITableView

android - 语法错误,无法将电子邮件键入 SQLite