Skip to content

Instantly share code, notes, and snippets.

@axtheset

axtheset/index.html

Last active August 29, 2015 14:01
Show Gist options
  • Save axtheset/b69e5564cc3702408093 to your computer and use it in GitHub Desktop.
Save axtheset/b69e5564cc3702408093 to your computer and use it in GitHub Desktop.
Download ZIP
CivicData Query Example
Raw
index.html
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<title>CivicData.io Query Demo</title>
<link rel="stylesheet" type="text/css" media="all" href="styles.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
<div id="main">
<h1>CivicData.io Query Demo</h1>
<p>An example of querying CivicData.io from a simple html page using jQuery</p>
<a href="#" id="cdsubmitbtn">Press to query CivicData</a>
<div id="civicdata" class="clearfix"></div>
<div id="chart_div"></div>
</div>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
function drawChart(dataSet) {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Permit Type');
data.addColumn('number', 'Count');
for (var y in dataSet) {
data.addRow([y,parseInt(dataSet[y])]);
}
// Set chart options
var options = {'title':'Permits March 2014',
'is3D':true,
'width':600,
'height':400};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
$(function(){
$('#cdsubmitbtn').on('click', function(e){
e.preventDefault();
var requri = 'http://www.civicdata.com/api/action/datastore_search_sql?sql=SELECT%20%22Type%22,count(*)%20as%20%22Count%22%20from%20%2285cabc45-826f-44ad-adf1-2cead18fc7d3%22%20Group%20By%20%22Type%22%20order%20by%20%22Count%22%20desc';
requestJSON(requri, function(json) {
if(!json.success) {
$('#civicdata').html("<h2>Query Error</h2>");
}
else {
// we have a successful query response let's conver to an array and call drawChart
var dataArray = new Array();
for (var x in json.result.records) {
var thisRecord = json.result.records[x];
if (thisRecord["Type"] != "")
dataArray[thisRecord["Type"]] = thisRecord["Count"];
}
drawChart(dataArray);
}
}); // end requestJSON Ajax call
}); // end click event handler
function requestJSON(url, callback) {
$.ajax({
url: url,
complete: function(xhr) {
callback.call(null, xhr.responseJSON);
}
});
}
});
</script>
</body>
</html>
Raw
styles.css
@import url('http://fonts.googleapis.com/css?family=Oldenburg');
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { overflow-y: scroll; }
body {
background: #fafafa
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 62.5%;
line-height: 1;
color: #616161;
padding: 35px 0;
}
br { display: block; line-height: 1.6em; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong, b { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
h1 {
font-family: 'Oswald', Arial, sans-serif;
color: #646464;
font-size: 4.0em;
line-height: 1.6em;
margin-bottom: 10px;
}
h2 {
font-size: 2.8em;
line-height: 1.55em;
margin-bottom: 4px;
color: #888;
}
p {
font-size: 1.4em;
line-height: 1.55em;
margin-bottom: 12px;
}
a {
color: #8eadd2;
}
a:hover {
color: #6e91b9;
}
/* page structure */
#main {
display: block;
width: 900px;
margin: 0 auto;
/*background: #fff;
padding: 15px 25px;
-webkit-box-shadow: 1px 2px 3px -1px rgba(0,0,0,0.4);
-moz-box-shadow: 1px 2px 3px -1px rgba(0,0,0,0.4);
box-shadow: 1px 2px 3px -1px rgba(0,0,0,0.4);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;*/
}
#cdsubmitbtn {
display: inline-block;
padding: 8px 18px;
font-size: 14px;
font-weight: bold;
color: #444;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255,255,255,0.8);
background-color: #eaeaea;
background-image: -webkit-linear-gradient(#fafafa, #eaeaea);
background-image: -moz-linear-gradient(#fafafa, #eaeaea);
background-image: -ms-linear-gradient(top, #fafafa, #eaeaea);
background-image: -o-linear-gradient(top, #fafafa, #eaeaea);
background-image: linear-gradient(#fafafa, #eaeaea);
border-radius: 3px;
border: 1px solid #ddd;
border-bottom-color: #c5c5c5;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.05);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.05);
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
#cdsubmitbtn:hover {
background-color: #dadada;
background-image: -webkit-linear-gradient(#eaeaea, #dadada);
background-image: -moz-linear-gradient(#eaeaea, #dadada);
background-image: -ms-linear-gradient(top, #eaeaea, #dadada);
background-image: -o-linear-gradient(top, #eaeaea, #dadada);
background-image: linear-gradient(#eaeaea, #dadada);
border-color: #ccc #ccc #b5b5b5;
}
#cdsubmitbtn:active {
background-color:#dadada;
background-image: none;
border-color: #b5b5b5;
-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.25);
-moz-box-shadow: inset 0 3px 5px rgba(0,0,0,0.25);
box-shadow: inset 0 3px 5px rgba(0,0,0,0.25);
}
/* clearfix */
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment