麻烦让谷歌图表/ JSON数据工作

Question

Hi I am trying to generate a simple page with a couple of gauges on using google's api. 嗨，我正在尝试生成一个简单的页面，其中包含使用Google的api的一些指标。 I've been over and over all the info I can find online and can't work out why it is displaying a blank page. 我已经遍历了我在网上可以找到的所有信息，无法弄清为什么它显示空白页。 I suspect my json as I've not used it before. 我怀疑我的json是因为我以前没有使用过它。

The json output by getData.php is : getData.php的json输出为：

[{"hostname":"bongo","value":24},{"hostname":"chappie","value":78}]

The php script which should be generating the gauges is: 应当生成量规的php脚本是：

  <html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="jquery-1.6.4.js"></script>
    <script type="text/javascript">

    google.load('visualization', '1', {packages:['gauge']});

    google.setOnLoadCallback(drawChart);


    function drawChart() {
      var jsonData = $.ajax({
          url: "getData.php",
          dataType:"json",
          async: false
          }).responseText;

      var data = new google.visualization.DataTable(jsonData);

    var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };

      var chart = new google.visualization.Guage(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

    </script>
  </head>
  <body>
    <div id='chart_div'></div>
  </body>
</html>

Answer 1

Your json data format is incorrect and u mis-typed Gauge as Guage. 您的json数据格式不正确，并且您将“ Gauge”（量规）错误输入为“ Guage”（量具）。 I corrected your code and it works on my php server as follows (by the way, you can nest arrays and use json_encode php function to output a json string that conforms to google Datatable json string format) : 我更正了您的代码，它可按如下方式在我的php服务器上工作（顺便说一句，您可以嵌套数组并使用json_encode php函数输出符合google Datatable json字符串格式的json字符串）：

<head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">

    google.load('visualization', '1', {packages:['gauge']});

    google.setOnLoadCallback(drawChart);


    function drawChart() {
    var jsonData = {
                    cols: [{id: 'Host Name', label: 'Host Name', type: 'string'},
                           {id: 'Value', label: 'Value', type: 'number'}],
                    rows: [{c:[{v: 'bongo'}, {v: 24}]},
                           {c:[{v: 'chappie'}, {v: 78}]}]
                    }

    var data = new google.visualization.DataTable(jsonData);

    var options = {
        width: 400, height: 120,
        redFrom: 90, redTo: 100,
        yellowFrom:75, yellowTo: 90,
        minorTicks: 5
    };

    var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
        chart.draw(data, options);
    }

</script>
</head>
<body>
    <div id='chart_div'></div>
</body>

For debugging, you can do: google.visualization.events.addListener(bar_chart_example, 'error', function(err) { document.getElementById('bar_chart_example_div').innerHTML = err.message; }); 要进行调试，您可以执行以下操作：google.visualization.events.addListener（bar_chart_example，'error'，function（err）{document.getElementById（'bar_chart_example_div'）。innerHTML = err.message;}）;

麻烦让谷歌图表/ JSON数据工作

问题描述

1 个解决方案

解决方案1
0 2012-10-12 15:50:33

麻烦让谷歌图表/ JSON数据工作

问题描述

1 个解决方案

解决方案1 0 2012-10-12 15:50:33

解决方案1
0 2012-10-12 15:50:33