Example 2

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="basicGChart"></div>

CSS

#basicGChart { width: 450px; height: 300px }

JavaScript

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< survey.length; i++) {

    // process each tech answer
    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 (survey[i][tech] == level) {
                counts[ilevel][itech]++ ;
            }
        }
    }
}

$('#basicGChart').gchart({

    type: 'barVert',

    maxValue: 160,

    title: 'Summary Chart (All Groups)',

    titleColor: 'black',

    backgroundColor: $.gchart.gradient('horizontal', 'ccffff', 'ccffff00'),

    barWidth: 40,
    barSpacing: 25,
    barGroupSpacing: 15,
    
    series: [$.gchart.series('None',counts[0], 'red'),
             $.gchart.series('Beginner',counts[1], 'orange'),
             $.gchart.series('Intermediate',counts[2], 'yellow'),
             $.gchart.series('Advanced',counts[3], 'green'),
             $.gchart.series('Expert',counts[4], 'blue')],
   
    axes: [$.gchart.axis('bottom', ["HTML","CSS","JavaScript","jQuery"], 'black'),
           $.gchart.axis('y', 0, 160)],

    legend: 'right'

});