实时更新谷歌图表php + js

时间:2014-01-31 18:11:22

标签: php ajax google-visualization

我有用googlecarts api绘制的烛台图表。 但我不能为它进行实时更新。

下一个代码是我的图表可视化的html部分:

<script type='text/javascript'>
function drawV(){
  var a = $.ajax({
  url: "_ajax3.php",
  dataType:"html",
  async: false
  }).responseText;
  console.log(a);

  var data = google.visualization.arrayToDataTable([a],true);

  options = {
    chartArea:{
      left: 55,
      top: 40,
      width: 760,
      height: 210
    },
    candlestick:{
      fallingColor:{
        fill: "#41a6ef",
        stroke: "#41a6ef",
        strokeWidth: 1
      },
      risingColor:{
        fill: "#f01717",
        stroke: "#f01717",
        strokeWidth: 1
      },
      hollowIsRising: true
    },
    series: {0: {type: "candlesticks"}, 1: {type: "line", targetAxisIndex:1, color:"#91d6ff"}},
    legend:"none"
  };
  chart = new google.visualization.ComboChart(document.getElementById("chart_div"));
  chart.draw(data, options);
}
google.setOnLoadCallback(drawV);

setInterval(function(){
  drawV();
}, 10000);
</script>

<div id='chart_div'></div>

我不确定ajax dataType,但无论如何,在工作情况下'var data = ...'行看起来像这样:

var data = google.visualization.arrayToDataTable([["18:26",20.79102,20.79102,20.79102,20.79102,20.79102],["18:27",20.79102,20.85,20.79102,20.85,20.82051],["18:28",20.85,20.8583,20.85,20.8583,20.85415],
["18:26",20.79102,20.79102,20.79102,20.79102,20.79102]],true);

ajax返回相同的数据(没有highlevel [])。

["18:26",20.79102,20.79102,20.79102,20.79102,20.79102],["18:27",20.79102,20.85,20.79102,20.85,20.82051],["18:28",20.85,20.8583,20.85,20.8583,20.85415],
["18:26",20.79102,20.79102,20.79102,20.79102,20.79102]

我怎样才能使它有效? 编辑:现在我得到下一个java错误:Uncaught Error: Not a valid 2D array.

1 个答案:

答案 0 :(得分:1)

看起来你的AJAX调用返回的是一个无效的JSON字符串。修改服务器代码以将[]添加到字符串的末尾,然后使用它来创建DataTable:

var data = google.visualization.arrayToDataTable(JSON.parse(a),true);