Kiva Nerdfighters Group data

Interactive charts showing loan and membership information over time for the Nerdfighters group on Kiva. Raw data is located here: https://docs.google.com/spreadsheet/pub?key=0Avx7IW9QLhkqdFRJWmFwdEdqTXZiM0ZGcWtwSjRucHc&output=html

by Alex Azuero

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="dashboard">
    <div id="left">
        <div id="qty_loaned_chart_div"></div>
        <div id="members_chart_div"></div>
        <div id="loans_chart_div"></div>
        <div id="comp_chart_div"></div>
        <div id="rangeFilter_div"></div>
        1. No data is available for these series prior to Sep 10, 2012.<br />
        2. Each data point for the estimate of required loans per member uses the dollars per loan value of that day.
    </div>
    <div id="right">
        <div id="summary_table_div"></div>
        <br />
        <div id="monthly_table_div"></div>
        Click on a column header to sort by that column<br />
        Select a table row to zoom to that month in the charts
    </div>
    <div id="clear"></div>
</div>
<br />
<br />
<div id="creativeCommons" style="text-align: center; width: 400px;">
    <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type">Kiva Nerdfighters Group Charts</span> by <span xmlns:cc="http://creativecommons.org/ns#" property="cc:attributionName">Andrew Gallant</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>.
</div>

CSS

#dashboard {
    width: 1300px;
}
#left {
    float: left;
}
#right {
    float: right;
}
#clear {
    clear: both;
}
.tableHeader {
    font-weight: bold;
    text-align: center;
    /* gradient based on Kiva colors
     * generated by http://www.colorzilla.com/gradient-editor/
     */
    background: #6bab46; /* Old browsers */
    background: -moz-linear-gradient(top,  #6bab46 0%, #78cc47 0%, #5b9b36 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6bab46), color-stop(0%,#78cc47), color-stop(100%,#5b9b36)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #6bab46 0%,#78cc47 0%,#5b9b36 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #6bab46 0%,#78cc47 0%,#5b9b36 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #6bab46 0%,#78cc47 0%,#5b9b36 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #6bab46 0%,#78cc47 0%,#5b9b36 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6bab46', endColorstr='#5b9b36',GradientType=0 ); /* IE6-9 */
}
.oddRow {
    /* gradient based on Kiva colors
     * generated by http://www.colorzilla.com/gradient-editor/
     */
    background: #e5ede1; /* Old browsers */
    background: -moz-linear-gradient(top,  #e5ede1 0%, #d0ddc7 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5ede1), color-stop(100%,#d0ddc7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #e5ede1 0%,#d0ddc7 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #e5ede1 0%,#d0ddc7 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #e5ede1 0%,#d0ddc7 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #e5ede1 0%,#d0ddc7 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5ede1', endColorstr='#d0ddc7',GradientType=0 ); /* IE6-9 */
}
.hoverRow {
    /*...

JavaScript

google.load('visualization', '1', {packages: ['controls']});
google.setOnLoadCallback(drawCharts);

// raw data provided by Kiva Nerdfighter Ruben
// https://docs.google.com/spreadsheet/pub?key=0Avx7IW9QLhkqdFRJWmFwdEdqTXZiM0ZGcWtwSjRucHc&output=html

function drawCharts () {
    // some global variables to keep the charts the same style
    var filterHeight = 50;
    var chartHeight = 300;
    var chartWidth = 800;
    var chartAreaHeight = '80%';
    var chartAreaWidth = '75%';
    var legendFontSize = 9;
    var axisFontSize = 12;
    var tableWidth = 500;
    
    // date information
    var today = new Date();
    var year = today.getFullYear();
    var month = today.getMonth();
    var day = today.getDate();
    var hankoDeMayo = new Date(2013, 4, 5);
    // 86400000 ms / day, round due to daylight savings time differences
    var daysToHankoDeMayo = Math.round((hankoDeMayo.getTime() - new Date(year, month, day).getTime()) / 86400000);
    
    // key is the spreadsheet key
    var key = '0Avx7IW9QLhkqdFRJWmFwdEdqTXZiM0ZGcWtwSjRucHc';
    
    // query the spreadsheet
    var query = new google.visualization.Query('https://docs.google.com/spreadsheet/tq?headers=1&gid=0&key=' + key);
    // select all rows where C (Loaned That Day) is not null
    // this covers all dates that have been filled in fully
    query.setQuery('SELECT A, B, C, D, E, F, G where C is not null');
    query.send(function (response) {
        if (response.isError()) {
            alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
            return;
        }
        
        var data = response.getDataTable();
        
        var groupedValues = google.visualization.data.group(data, [{
            column: 0,
            type: 'number',
            modifier: function () {
                // make them all the same for grouping
                return 0;
            }
        }], [{
            column: 1,
            type: 'number',
           ...