Skip to content

Instantly share code, notes, and snippets.

@axtheset
Last active August 29, 2015 14:01

Revisions

  1. axtheset revised this gist May 6, 2014. 2 changed files with 9 additions and 8 deletions.
    9 changes: 5 additions & 4 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -10,9 +10,10 @@
    </head>

    <body>
    <div id="w">
    <div id="main">
    <h1>CivicData.io Query Demo</h1>
    <a href="#" id="cdsubmitbtn">Query CivicData</a>
    <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':800,
    'height':600};
    'width':600,
    'height':400};

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    8 changes: 4 additions & 4 deletions styles.css
    Original 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: 'Oldenburg', Arial, sans-serif;
    font-family: 'Oswald', Arial, sans-serif;
    color: #646464;
    font-size: 4.0em;
    line-height: 1.6em;
    @@ -63,18 +63,18 @@ a:hover {


    /* page structure */
    #w {
    #main {
    display: block;
    width: 900px;
    margin: 0 auto;
    background: #fff;
    /*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;
    border-radius: 4px;*/
    }

    #cdsubmitbtn {
  2. axtheset created this gist May 6, 2014.
    81 changes: 81 additions & 0 deletions index.html
    Original 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>
    124 changes: 124 additions & 0 deletions styles.css
    Original 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%; }