带有Ajax和PHP的谷歌图表。

This is my first time posting, so please let me know if im missing anything.

这是我第一次投稿，所以如果我遗漏了什么，请告诉我。

I recently started messing with AJAX and i am trying to develop a simple dashboard that pulls information from our database and presents it to a web page in google's table view. However i am consistantly getting the error "Uncaught Error: Not an array format+en,default,table.I.js:55" within Chromes Javascript console. Below is the ajax code within the html page:

我最近开始使用AJAX，我正在开发一个简单的仪表板，它从我们的数据库中提取信息，并将其呈现在谷歌的表视图的web页面中。但是，我经常会得到错误“未捕获错误:不是数组格式+en，默认，表i。”在Chromes Javascript控制台内。下面是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>

And here is my php script that is building the json array.

这是我的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);

When i set an alert in my javascript after the json is returned, it is in this format:

当json返回后，我在javascript中设置了一个警告，它是这样的格式:

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

[{“关口”:[{ " id ":“状态”,“类型”:"字符串" },{ " id ":“订单”、“类型”:“数量”}],“行”:[{“c”:[{“v”:“新闻界”},{“v”:11 }]}]}]

Comp, Gend and Hold are simply status's for orders in our system. The numbers are the amount of orders in that status. As stated before im simply creating a dashboard to display this information at a specific interval. I can use get the information to update using this syntax in javascript "$('div#status').load('livesearch.php?chart=numbers');" but i would like to use googles visual tools and eventually start using their charts with ajax as well.

Comp, Gend和Hold只是我们系统中订单的状态。这些数字就是订单的数量。如前所述，im只是创建一个仪表板，以在特定的间隔显示此信息。我可以使用javascript的“$('div#status').load('livesearch.php?chart=numbers')”来更新这些信息。

Thanks for the help. Let me know if there is anything else you need.

谢谢你的帮助。如果你还需要什么，请告诉我。

One more update. If i change the javascript code from arrayToDateTable to DataTable: var data = new google.visualization.DataTable(jsonData); data.addColumn('string', 'Status'); data.addColumn('number', 'Orders'); data.addRows(data); I got the error "Uncaught Error: Argument given to addRows must be either a number or an array " In Chrome

一个更新。如果我将javascript代码从arraytodatable更改为DataTable: var data =新的google. visualiz.datatable (jsonData);数据。addColumn(“字符串”,“状态”);数据。addColumn(“数量”、“订单”);data.addRows(数据);我得到了错误“未捕获错误:给addRows的参数必须是数字或数组”

Finally i found the web site 'http://json.parser.online.fr/' which told me the json syntax was indeed incorrect. So i tried a different approach with something else i found online:

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

html site:

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 site, im simply building the array's to pass back here just to get it to work.

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

This is my output which is verified correct on 'http://json.parser.online.fr/' : [{"COLS":[{"id":"Status", "type":"String"},{"id":"Orders", "type":"Number"}],"rows":[{"c":[{"v":"GEND"},{"v":11}]}]}]'

这是我的输出验证正确的在“http://json.parser.online.fr/”:[{“关口”:[{ " id ":“状态”,“类型”:"字符串" },{ " id ":“订单”、“类型”:“数量”}],“行”:[{“c”:[{“v”:“新闻界”},{“v”:11 }]}]}]”

I do however get no errors now in chrome, but not table is displayed.

但是我现在在chrome中没有出现错误，但是没有显示表格。

1 个解决方案

#1

I'm seeing inconsistencies in casing.

我看到套管不一致。

My guess is that "COLS" should actually be lowercased "cols".

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

As typed correctly in the latest php example, but not in the json output.

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

edit: An example from google themselves:

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

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
)

#1