Example 1

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.

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>
<div id="log"></div>
<div id="htmlChart" class="chart"></div> 
<div id="cssChart" class="chart"></div> 
<div id="javascriptChart" class="chart"></div> 
<div id="jQueryChart" class="chart"></div>

CSS

.chart { width: 500px; height: 300px; float: left; }

JavaScript

var $log = $('#log');
$log.html('<span>start</span>');
var tech, level;
var techs = ["html", "css", "js", "jq"];
var levels = ["None", "Beginner", "Intermediate", "Advanced", "Expert"];

var counts = [[0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0]];

// iterate over each survey response
for (var i = 0; i < survey1.length; i++) {
    // process each tech anaser
    for (var itech = 0; itech < techs.length; itech++) {
        tech = techs[itech];

        // count survey responses for this tech and level
        for (var ilevel = 0; ilevel < levels.length; ilevel++) {
            level = levels[ilevel];
            if (survey1[i][tech] == level) {
                counts[itech][ilevel]++;
            }
        }
    }
}
/*
var counts = [0,0,0,0,0];
for(var i=0; i < survey1.length; i++){
    for( var ilevel=0; ilevel<levels.length; ilevel++){
        if(survey1[i].html == levels[ilevel]){
             counts[ilevel]++;  
        }
    }
}*/

console.log(counts);

$('#htmlChart').gchart({

    type: 'pie',

    //maxValue: 80,

    title: 'HTML Skills (Group 1)',

    titleColor: 'black',

    backgroundColor: 'ccffff',

    series: [$.gchart.series('HTML', counts[0], 'blue')],

    axes: [$.gchart.axis('bottom', levels, 'black'),
                   $.gchart.axis('y', 0, 80)],

    legend: 'right'

});


$('#cssChart').gchart({

    type: 'pie',

    //maxValue: 80,

    title: 'CSS Skills (Group 1)',

    titleColor: 'black',

    backgroundColor: 'ccffff',

    series: [$.gchart.series('HTML', counts[1], 'red')],

    axes: [$.gchart.axis('bottom', levels, 'black'),
                   $.gchart.axis('y', 0, 80)],

    legend: 'right'

});

$('#javascriptChart').gchart({
 
     type: 'pie',
 
     //maxValue: 80,
 
     title: 'Javascript Skills (Group 1)',
 
     titleColor: 'black',
 
     backgroundColor: 'ccffff',
 
     series: [$.gchart.series('JavaScript', counts[1], 'green')],
 
     axes: [$.gchart.axis('bottom', levels, 'black'),
        ...