Assignment 1: Google Charts

A simple example processing all survey responses and generating a Google chart displaying the number of people with a specific experience level for each technology.

by mendahu

HTML

<script src="http://keith-wood.name/js/jquery.gchart.js"></script>
<script src="https://www.quickbase.com/db/bfx7sqpm8?a=dbpage&amp;pagename=SurveyData.js"></script>
<table>
    <tr>
        <td colspan="2">
            <h1>Group 1 Experience Breakdown</h1>
        </td>
    </tr>
    <tr>
        <td>
            <div id="htmlChart"></div>
        </td>
        <td>
            <div id="cssChart"></div> 
        </td>
    </tr>
    <tr>
        <td>
            <div id="jsChart"></div> 
        </td>
        <td>
            <div id="jqChart"></div> 
        </td>
    </tr>
</table>
<div id="debug"></div>

CSS

h1 {
    text-align: center;
    font-size: 200%;
}

#htmlChart, #cssChart, #jsChart, #jqChart { 
    width: 250px; 
    height: 200px;
}

JavaScript

var seriesObject = {
    counts: [[0,0,0,0,0], [0,0,0,0,0], [0,0,0,0,0], [0,0,0,0,0]],
    techs: ["html", "css", "js", "jq"],
    levels: ["None", "Beginner", "Intermediate", "Advanced", "Expert"],
    dataCount: function(x) {
         var i = 0, tech = this.techs[x]; //sets tech to current technology, as inputted in gchart
        
        // iterate over each survey response, check expertise and raise appropriate count
        for (i; i < survey1.length; i++) {
             if (survey1[i][tech] == "None") { this.counts[x][0]++; }
             if (survey1[i][tech] == "Beginner") { this.counts[x][1]++; }
             if (survey1[i][tech] == "Intermediate") { this.counts[x][2]++; }
             if (survey1[i][tech] == "Advanced") { this.counts[x][3]++; }
             if (survey1[i][tech] == "Expert") { this.counts[x][4]++; }
        }
        return this.counts[x]; //returns a series of data suitable for gchart
    }
};

$('#htmlChart').gchart({

    type: 'pie',

    maxValue: 25,

    title: 'HTML Experience',

    titleColor: 'black',

    backgroundColor: $.gchart.gradient('horizontal', ['orange', 'white', 'orange']),

    barWidth: 30,
    barSpacing: 25,
    barGroupSpacing: 15,
    
    series: [$.gchart.series('None', seriesObject.dataCount(0), "black")],
   
    axes: [$.gchart.axis('bottom', seriesObject.levels, 'black'),
           $.gchart.axis('y', 0, 25, 5)]

});

$('#cssChart').gchart({

    type: 'pie',

    maxValue: 25,

    title: 'CSS Experience',

    titleColor: 'black',

    backgroundColor: $.gchart.gradient('horizontal', ['orange', 'white', 'orange']),

    barWidth: 30,
    barSpacing: 25,
    barGroupSpacing: 15,
    
    series: [$.gchart.series('None', seriesObject.dataCount(1), "black")],
   
    axes: [$.gchart.axis('bottom', seriesObject.levels, 'black'),
           $.gchart.axis('y', 0, 25, 5)]

});


$('#jsChart').gchart({

    type: 'pie',

    maxValue: 25,

    title: 'Javascript Experience',

    titleColor: 'black',

   ...