Last active
August 29, 2015 14:01
Revisions
-
axtheset revised this gist
May 6, 2014 . 2 changed files with 9 additions and 8 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -10,9 +10,10 @@ </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> @@ -34,8 +35,8 @@ <h1>CivicData.io Query Demo</h1> // 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')); This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -34,7 +34,7 @@ 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; @@ -63,18 +63,18 @@ a:hover { /* 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 { -
axtheset created this gist
May 6, 2014 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,81 @@ <!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="w"> <h1>CivicData.io Query Demo</h1> <a href="#" id="cdsubmitbtn">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':800, 'height':600}; // 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> This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,124 @@ @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: 'Oldenburg', 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 */ #w { 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%; }