2014-09-26 11 views
7

Ich versuche, mehrere Arten von Google Charts auf einer Seite zu erhalten. Kreisdiagramm und Kalenderdiagramm. Wenn ich versuche, dies zu tun, erhalte ich die folgende Fehlermeldung anstelle des Chart Pie:Mehrere Arten von Google Charts auf einer einzigen Seite

You called the draw() method with the wrong type of data rather than a DataTable or DataView 

Der Fehler geht weg nur, wenn ich zu einem Zeitpunkt ein Diagramm tun. Und es ist immer der Einkaufswagen auf der Oberseite, der den gleichen Fehler zeigt. Das Beste, was ich sagen kann, weil die Daten von einem anderen Typ sind. Also dachte ich, dass es etwas mit störenden Variablen zu tun hat. Ich habe eine uniqe Kennung Daten jedes Diagramm und ich immer noch das Problem bekommen ...

Hier ist die HTML-Ausgabe meiner PHP:

<script type='text/javascript' src='https://www.google.com/jsapi'></script> 
<script type='text/javascript'> 
    google.load('visualization', '1', { 
     packages : [ 'corechart' ] 
    }); 
    google.setOnLoadCallback(drawChart_testGraph); 
    function drawChart_testGraph() { 

     var data_testGraph = google.visualization.arrayToDataTable([ 
       [ 'Department', 'Count' ], [ 'Accounting', 1 ], [ 'Lobby', 1 ], 
       [ 'Customer Apps', 1 ], [ 'PC Support', 0 ], 
       [ 'Collections', 0 ], [ 'Inventory', 1 ], [ 'Billing', 0 ], 
       [ 'Executive', 4 ], [ 'Customer Service', 0 ], 
       [ 'Sales and Marketing', 0 ], [ 'Product and Development', 1 ], 
       [ 'Materials Management', 0 ], [ 'Remittance', 0 ], 
       [ 'Support Services', 0 ], [ 'Indirect Distribution', 1 ], 
       [ 'Provisioning Support', 1 ], ]); 

     var options_testGraph = { 
      title : 'Usage by department', 
      backgroundColor : 'transparent', 
      is3D : 'false', 
     }; 

     var chart_testGraph = new google.visualization.PieChart(document 
       .getElementById('testGraph')); 

     chart_testGraph.draw(data_testGraph, options_testGraph); 
     console.log(data_testGraph); 
    } 
</script> 
<div id='testGraph' style='width: 900px; height: 500px;'></div> 
<script type='text/javascript' src='https://www.google.com/jsapi'></script> 
<script type='text/javascript'> 
    google.load('visualization', '1.1', { 
     packages : [ 'calendar' ] 
    }); 
    google.setOnLoadCallback(drawChart_testGraph2); 
    function drawChart_testGraph2() { 

     var dataTable_testGraph2 = new google.visualization.DataTable(); 
     dataTable_testGraph2.addColumn({ 
      type : 'date', 
      id : 'Department' 
     }); 
     dataTable_testGraph2.addColumn({ 
      type : 'number', 
      id : 'Count' 
     }); 
     dataTable_testGraph2.addRows([ [ new Date('2014, 09, 18'), 1 ], 
       [ new Date('2014, 09, 17'), 1 ], 
       [ new Date('2014, 09, 15'), 6 ], 
       [ new Date('2014, 09, 13'), 1 ], 
       [ new Date('2014, 09, 12'), 2 ], ]); 

     var options_testGraph2 = { 
      title : 'Usage by department', 
      backgroundColor : 'white', 
      is3D : 'false', 
     }; 

     var chart_testGraph2 = new google.visualization.Calendar(document 
       .getElementById('testGraph2')); 

     chart_testGraph2.draw(dataTable_testGraph2, options_testGraph2); 

    } 
</script> 
<div id='testGraph2' style='width: 900px; height: 500px;'></div> 
</div> 

Irgendwelche Ideen?

+1

Sie müssen nur hinzufügen '

0

Sie können die alte Version zurück. Ändern Sie einfach die Versionsnummer der js-Datei im Link.

version':'1.1-version':'1

Like: <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>

Verwandte Themen