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

levels=["None","Beginner","Intermediate","Advanced","Expert"];

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

// iterate over each survey response
for (var i=0; i< survey1.length; i++) {
    if (survey1[i]["html"] == "None") counts[0]++;
    if (survey1[i]["html"] == "Beginner") counts[1]++;
    if (survey1[i]["html"] == "Intermediate") counts[2]++;
    if (survey1[i]["html"] == "Advanced") counts[3]++;
    if (survey1[i]["html"] == "Expert") counts[4]++;
}

$('#basicGChart').gchart({

    type: 'pie',

    maxValue: 25,

    title: 'Group 1 HTML Experience',

    titleColor: 'black',

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

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

});