使用Ajax和PHP的Google Charts

Question

这是我第一次发帖,所以如果我遗漏了什么,请告诉我.

我最近开始搞乱AJAX,我正在尝试开发一个简单的仪表板,从我们的数据库中提取信息并将其显示在谷歌的表格视图中的网页上.但是我在Chromes Javascript控制台中一直得到错误"Uncaught Error:Not a array format + en,default,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>

这是我的PHP脚本正在构建json数组.

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');" 但我想使用谷歌视觉工具,并最终开始使用他们的图表与ajax.

谢谢您的帮助.如果您还有其他需要,请告诉我.

还有一个更新.如果我将javascript代码从arrayToDateTable更改为DataTable:var data = new google.visualization.DataTable(jsonData); data.addColumn('string','Status'); data.addColumn('number','Orders'); data.addRows(数据); 我收到错误"Uncaught Error:addRows的参数必须是数字或数组"在Chrome中

最后我发现网站' 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":"状态","类型":"字符串"},{ "id":"订单","类型":"数字"}],"行":[{"c":[{"v":"GEND"},{"v":11}]}]} ]"

但是我现在在chrome中没有错误,但是没有显示表格.

Answer 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
)