2016-05-10 10 views
-1

Ich baue ein Google Liniendiagramm. Ich habe meine Daten über PHP eingefügt und so sieht die HTML-Quelle aus. Ich kann nicht für das Leben von mir finden, warum dies nur eine weiße Seite zeigt. Ich lege das Wort Test hinein, um sicherzustellen, dass es geladen wird und "Test" erscheint, aber sonst nichts. Apache-Protokolle zeigen keine Fehler. Ich schätze jede Hilfe oder Vorschläge!Google Charts zeigen leere weiße Seite

<!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> 
+0

Javascript Syntax Probleme. Sie sollten die Dokumente unter https://developers.google.com/chart/interactive/docs/gallery/linechart#creating-material-line-charts erneut mit Ihrer Quelle verknüpfen. Auch das Ausführen des JS über jshint.com hilft – danielml01

+0

Fehler in der Browser-Konsole? – scoots

+0

Browser-Konsole hat mir geholfen, es herauszufinden. Ich vergesse immer, dass das Werkzeug da ist ... dumm von mir. Vielen Dank!!!!!! –

Antwort

0

Schlechte Syntax. Ln var data = new google.visualization.DataTable ( sollte var Daten = new google.visualization.DataTable() sein;

und entfernen ); nach den Daten