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.

by raulb

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 levels = ["None", "Beginner", "Intermediate", "Advanced", "Expert"];
var technology = ["html", "css", "js", "jq"];
var results = [[0, 0, 0, 0, 0],[0, 0, 0, 0, 0],[0, 0, 0, 0 ,0],[0, 0, 0, 0, 0]];

        
for (var i=0; i< survey.length; i++) {
    for(var tech=0; tech < technology.length; tech++) {
        for(var level=0; level < levels.length; level++) {
            if (survey[i][technology[tech]] == levels[level]) {
                results[tech][level] += 1;
            }
        }
    }
}

$('#basicGChart').gchart({

    type: 'barVertGrouped',

    maxValue: 80,

    title: 'Summary Chart (All Groups)',

    titleColor: 'black',

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

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

    legend: 'right'

});