douren1891
2016-05-10 19:07
浏览 49

谷歌图表显示空白的白页

I am building a google line chart. I have inserted my data via php and this is what the html source looks like. I can't for the life of me find why this is just showing a white page. I put the word test in there to make sure it is loading and "test" shows up but nothing else. Apache logs show no errors. I appreciate any help or suggestions!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="refresh" content="180" >

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("search", "1");
  google.load("jquery", "1.4.2");
  google.load("jqueryui", "1.7.2");
</script>
<script type="text/javascript">
//    google.charts.load('current', {'packages':['corechart']});
//    google.charts.setOnLoadCallback(drawChart);
google.load("visualization", "1", {packages:["corechart"], callback: drawChart});

      function drawChart() {

        var data = new google.visualization.DataTable(
data.addColumn('date', 'PollTime');
data.addColumn('number', 'Download');
data.addColumn('number', 'Upload');

data.addRows([ [new Date(2016, 5, 4, 0, 4), 294, 37],  [new Date(2016, 5, 4, 0, 13), 265, 34],  [new Date(2016, 5, 4, 0, 22), 236, 32],  [new Date(2016, 5, 4, 0, 31), 218, 33],  [new Date(2016, 5, 4, 0, 40), 225, 46],  [new Date(2016, 5, 4, 0, 49), 207, 41],  [new Date(2016, 5, 4, 0, 58), 184, 29],  [new Date(2016, 5, 4, 1, 7), 190, 31],  [new Date(2016, 5, 4, 1, 16), 181, 32],  [new Date(2016, 5, 4, 1, 25), 191, 31],  [new Date(2016, 5, 4, 1, 34), 174, 32],  [new Date(2016, 5, 4, 1, 43), 142, 32],  [new Date(2016, 5, 4, 1, 52), 135, 30],  [new Date(2016, 5, 4, 2, 1), 128, 23],  [new Date(2016, 5, 4, 2, 10), 118, 28],  ]););
 var options = {
          title: 'TelePacific Bandwidth Usage',
          width: 900,
          height: 500,
          hAxis: {
            format: 'M/d/yy HH:mm',
            gridlines: {count: 15}
          },
          vAxis: {
            gridlines: {color: 'none'},
            minValue: 0
          }
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

        chart.draw(data, options);

        var button = document.getElementById('change');

        button.onclick = function () {

          // If the format option matches, change it to the new option,
          // if not, reset it to the original format.
          options.hAxis.format === 'M/d/yy' ?
          options.hAxis.format = 'MMM dd, yyyy' :
          options.hAxis.format = 'M/d/yy';

          chart.draw(data, options);
        };
      }

google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
test
<div id="chart_div" style="width: 500px; height: 400px;"></div>
</body>
</html>
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • doudui1850 2016-05-10 20:59
    已采纳

    Bad syntax. Ln var data = new google.visualization.DataTable( should be var data = new google.visualization.DataTable();

    and then remove ); after the data

    已采纳该答案
    打赏 评论

相关推荐 更多相似问题