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.

by scrawlon

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: 350px; height: 300px }

JavaScript

// setup skill names, skill levels, and skill counters
var skills=["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++) {
  // iterate over each skill  
  for (var iSkill=0; iSkill<skills.length; iSkill++) {
    // move on if entry is blank
    if (survey1[i][skills[iSkill]] == "") {break;}
    // iterate over each skill level  
    for (var iLevel=0; iLevel<levels.length; iLevel++) {
        // find current skill's skill level and update score
        if (survey1[i][skills[iSkill]] == levels[iLevel]) {counts[iSkill][iLevel]++; break;}
        //move on when a match is found
    }
  }
}

$('#basicGChart').gchart({

    type: 'barVertGrouped',

    maxValue: 25,

    title: 'Group 1\'s Web Experience',

    titleColor: 'black',

    backgroundColor: $.gchart.gradient('vertical', 
    'yellow', 'white') ,

    barWidth: 10,
    barSpacing: 1,
    barGroupSpacing: 15,
    height: [300],  
    
    series: [$.gchart.series('HTML',counts[0], 'red'),
             $.gchart.series('CSS',counts[1], 'blue'),
             $.gchart.series('JavaScript',counts[2], 'green'),
             $.gchart.series('jQuery',counts[3], 'black')],
   
    axes: [$.gchart.axis('bottom', levels, 'black'),
           $.gchart.axis('y', 0, survey1.length)],

    legend: 'top'
    
});