使用 Ajax 和 PHP 的 Google 图表

Posted 2023-02-24

【中文标题】使用 Ajax 和 PHP 的 Google 图表

【英文标题】：Google Charts with Ajax and PHP

【发布时间】：2013-01-14 07:12:06

【问题描述】：

这是我第一次发帖，如有遗漏请告诉我。

我最近开始使用 AJAX，我正在尝试开发一个简单的仪表板，它可以从我们的数据库中提取信息并将其呈现到谷歌表格视图中的网页上。但是，我一直在 Chromes javascript 控制台中收到错误“未捕获的错误：不是数组格式+en，默认值，table.I.js:55”。下面是html页面中的ajax代码：

<script type='text/javascript'>
google.load('visualization', '1', packages:['table']);
google.setOnLoadCallback(drawChart);

function drawChart() 

  var jsonData = $.ajax(
      url: "livesearch.php?chart=bars",
      dataType:"json",
      async: false
      ).responseText;
      alert(jsonData);
 var data = new google.visualization.arrayToDataTable(jsonData);
    data.addColumn('string', 'Status');
    data.addColumn('number', 'Orders');
    data.addRows(jsonData);
  var chart = new google.visualization.Table(document.getElementById('chart_div'));
    chart.draw(data   , width: 800, height: 150);
    setTimeout('drawChart()',500000);


</script>

这是我构建 json 数组的 php 脚本。

while ($row = sqlsrv_fetch_array($result))  
    
    $c[] = array($row['status'], array('v' => $row['countx'], 'f' =>  
                                 $row['countx']), $row['countx']);               
    

    echo json_encode($c);

当我在返回 json 后在我的 javascript 中设置警报时，它采用以下格式：

["COLS":["id":"Status", "type":"String","id":"Orders", "type":"Number"],"rows" :["c":["v":"GEND","v":11]]]

Comp、Gend 和 Hold 只是我们系统中订单的状态。数字是处于该状态的订单数量。如前所述，我只是创建了一个仪表板以在特定时间间隔显示此信息。我可以在 javascript "$('div#status').load('livesearch.php?chart=numbers');" 中使用获取信息来更新此语法但我想使用 google 的可视化工具，最终也开始使用他们的 ajax 图表。

感谢您的帮助。让我知道您是否还有其他需要。

还有一个更新。如果我将 javascript 代码从 arrayToDateTable 更改为 DataTable： var data = new google.visualization.DataTable(jsonData); data.addColumn('string', '状态'); data.addColumn('number', 'Orders');数据.addRows（数据）；我在 Chrome 中收到错误“未捕获的错误：给 addRows 的参数必须是数字或数组”

最后我找到了网站“http://json.parser.online.fr/”，它告诉我 json 语法确实不正确。所以我用我在网上找到的其他东西尝试了一种不同的方法：

html 网站：

var jsonData = $.ajax(
      url: "livesearch.php?chart=bars",
      dataType:"json",
      async: false
      ).responseText;
      alert(jsonData);
      var data = new google.visualization.DataTable(jsonData, 0.5);
chart = new google.visualization.Table(document.getElementById('chart_div'));
    chart.draw(data, 'allowHtml': true);

PHP 站点，我只是简单地构建数组以传回此处，以使其正常工作。

$cols = array();
$cols[] = array('label' => 'Status','type' => 'String');
$cols[] = array('label' => 'Status', 'type' => 'number');
$cells = array();
$cells[] = array('v' => 'GEND');
$cells[] = array('v' => 11);
$rows = array();
$rows[] = array('c' => $cells);
$data = array();
$data[] = array('cols' => $cols, 'rows' => $rows);
  echo json_encode($data);

这是我的输出，在 'http://json.parser.online.fr/' 上验证正确： ["COLS":["id":"Status", "type":"String","id":"Orders ", "type":"Number"],"rows":["c":["v":"GEND","v":11]]]'

我现在在 chrome 中没有收到任何错误，但没有显示表格。

【问题讨论】：

使用编辑按钮将您的更新放入您的问题中:-)

在这篇文章“***.com/questions/12994282/…”的帮助下，我能够解决这个问题

@user2025354 您可以发布您的解决方案作为答案吗？这个问题仍然出现在未回答的队列中。

【参考方案1】：

我发现大小写不一致。

我的猜测是“COLS”实际上应该是小写的“cols”。

在最新的 php 示例中输入正确，但在 json 输出中不正确。

编辑： 谷歌自己的一个例子：

var dt = new google.visualization.DataTable(
     
       cols: [id: 'task', label: 'Task', type: 'string',
                id: 'hours', label: 'Hours per Day', type: 'number'],
       rows: [c:[v: 'Work', v: 11],
              c:[v: 'Eat', v: 2],
              c:[v: 'Commute', v: 2],
              c:[v: 'Watch TV', v:2],
              c:[v: 'Sleep', v:7, f:'7.000']
             ]
     ,
   0.6
)