$(function(){
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]];
for (var i=0; i< survey1.length; i++) {
for (var itech=0; itech<techs.length; itech++) {
tech=techs[itech];
for (var ilevel=0; ilevel<levels.length; ilevel++) {
level=levels[ilevel];
if (survey1[i][tech] == level) {
counts[itech][ilevel]++ ;
}
}
}
}
$('#basicGChart').gchart({
type: 'barVert',
maxValue: 60,
title: 'Summary Chart (Group 1)',
titleColor: 'black',
backgroundColor: $.gchart.gradient('horizontal', 'ccffff', 'ffffff'),
barWidth: 40,
barSpacing: 25,
barGroupSpacing: 15,
series: [$.gchart.series('HTML', counts[0], 'green'),
$.gchart.series('CSS', counts[1], 'blue'),
$.gchart.series('JavaScript', counts[2], 'red'),
$.gchart.series('jQuery', counts[3], 'orange')],
axes: [$.gchart.axis('bottom', ["None","Beginner","Intermediate","Advanced","Expert"], 'black'),
$.gchart.axis('y', 0, 60)],
legend: 'right'
});
});
<div id="basicGChart"></div>
#basicGChart { width: 450px; height: 300px }
External resources loaded into this fiddle: