Ich versuche, eine piechart aus einer einzigen Spalte von Daten mit dem Google Visualization API zu erstellen, indem jeden Wert zu zählen, aber ich bekomme immer folgende Fehlermeldung:Ungültige Abfrage: SELECT_WITH_AND_WITHOUT_AGG in Google Query Language
Invalid query: SELECT_WITH_AND_WITHOUT_AGG: C
INFORMATIONEN
Meine Tabelle kann hier gefunden werden: https://docs.google.com/spreadsheets/d/1lmmpJs2Bz3EfQWExB4KXq_uJWoLlq1PMCahy6w4ipcE/edit#gid=942634171
tun, was ich will ein Kreisdiagramm erstellen, das die eindeutigen Werte in dem ‚Was zählt, Nachbarschaft kommst du aus 'Spalte und zeichne ihre relativen Proportionen auf.
Die Säule selbst kann hier gesehen werden:
Also ich diese Spalte nehmen möchten und eine Tabelle aus es schaffen, die wie folgt lautet:
Beispiel Tabelle
Corona 2
Sunnyside 3
Elmhurst 4
Und so weiter. Verwenden Sie dann die Zeichenfolge/Zahlenkombination, um ein Tortendiagramm zu füllen.
Mit regulären SQL könnten Sie SELECT Spalte, COUNT (Spalte) GROUP BY Spalte, so nehme ich an, dass etwas Ähnliches für GQL funktionieren würde.
Bisher sind nur einige der Fragen die ich habe versucht:
QUERIES:
'SELECT COUNT(C) GROUP BY C'
'SELECT C, COUNT(C) GROUP BY C'
'SELECT C, COUNT(C) PIVOT C
Aber keiner von ihnen gearbeitet haben.
Ich erhalte diese Fehlermeldung auch in meiner Konsole:
Fehlermeldung:
Hier ist das Skript verwende ich das mein Problem betrifft:
SCRIPT
// Load the Visualization API and the controls package.
google.charts.load('current', {'packages':['corechart', 'controls']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var neighborhoodChart = new google.visualization.ChartWrapper({
'chartType' : 'PieChart',
'containerId' : 'chart_div2',
'dataSourceUrl' : 'https://docs.google.com/spreadsheets/d/1lmmpJs2Bz3EfQWExB4KXq_uJWoLlq1PMCahy6w4ipcE/gviz/tq?gid=942634171',
'query' : 'SELECT C, COUNT(C) GROUP BY C',
'options' : {
'title' : 'Neighborhood of Residence'
}
});
neighborhoodChart.draw();
}
Hier ist das Skript für die gesamte Seite, die es in verwendet wird ist:
UPDATE https://s3-us-west-2.amazonaws.com/example-server/serve.html:
für sie<!DOCTYPE html>
<html lang="en">
<head>
<title>CDC Dashboard</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Bootswatch Theme -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" >
<!-- External style sheet -->
<link rel="stylesheet" type="text/css" href="styles.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--Load the AJAX API for Google Charts-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript"
src='https://www.google.com/jsapi?autoload={
"modules":[{
"name":"visualization",
"version":"1"
}]
}'></script>
<script type="text/javascript">
// Load the Visualization API and the controls package.
google.charts.load('current', {'packages':['corechart', 'controls']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var neighborhoodChart = new google.visualization.ChartWrapper({
'chartType' : 'PieChart',
'containerId' : 'chart_div2',
'dataSourceUrl' : 'https://docs.google.com/spreadsheets/d/1lmmpJs2Bz3EfQWExB4KXq_uJWoLlq1PMCahy6w4ipcE/gviz/tq?gid=942634171',
'query' : 'SELECT C, COUNT(C) GROUP BY C',
'options' : {
'title' : 'Neighborhood of Residence'
}
});
neighborhoodChart.draw();
}
</script>
</head>
<body>
<!-- Navbar to be affixed at the top -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="index.html">What We Do</a></li>
<li><a href="serve.html">Who We Serve</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="col-md-10 col-md-offset-1">
<h1 class="text-center">Who We Serve</h1>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<hr>
</div>
</div>
<h2 class="text-center">Understanding Our Clients</h2>
<div id="dashboard_div">
<!--Divs that will hold each control and chart-->
<div class="row">
<div class="col-md-6">
<div id="filter_div"></div>
</div>
<div class="col-md-6">
<div id="search_div"></div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div id="attendance_div"></div>
</div>
<div class="col-md-6">
<div id="transport_div"></div>
</div>
</div>
<div id="chart_div">
</div>
<div id="chart_div2">
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<hr>
</div>
</div>
<div id="storytime">
<h2 class="text-center">Storytime</h2>
</div>
</div>
</div>
</body>
</html>
Die Arbeitsdatei
gesamte Skript hier zu sehen ist
Idealerweise würde ich eine Lösung bevorzugen, die nur beruht auf der Änderung der Abfrage selbst, da dies syntaktisch sauberer ist. Ich werde dies während des gesamten Projekts mehrmals tun und würde es vorziehen, Workarounds zu vermeiden, die zusätzliche Codezeilen enthalten.
Jede Hilfe würde sehr geschätzt werden.