<div id="log"></div>
<div id="htmlChart" class="chart"></div>
<div id="cssChart" class="chart"></div>
<div id="javascriptChart" class="chart"></div>
<div id="jQueryChart" class="chart"></div>
.chart { width: 500px; height: 300px; float: left; }
var $log = $('#log');
$log.html('<span>start</span>');
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 < survey1.length; i++) {
// process each tech anaser
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 (survey1[i][tech] == level) {
counts[itech][ilevel]++;
}
}
}
}
/*
var counts = [0,0,0,0,0];
for(var i=0; i < survey1.length; i++){
for( var ilevel=0; ilevel<levels.length; ilevel++){
if(survey1[i].html == levels[ilevel]){
counts[ilevel]++;
}
}
}*/
console.log(counts);
$('#htmlChart').gchart({
type: 'pie',
//maxValue: 80,
title: 'HTML Skills (Group 1)',
titleColor: 'black',
backgroundColor: 'ccffff',
series: [$.gchart.series('HTML', counts[0], 'blue')],
axes: [$.gchart.axis('bottom', levels, 'black'),
$.gchart.axis('y', 0, 80)],
legend: 'right'
});
$('#cssChart').gchart({
type: 'pie',
//maxValue: 80,
title: 'CSS Skills (Group 1)',
titleColor: 'black',
backgroundColor: 'ccffff',
series: [$.gchart.series('HTML', counts[1], 'red')],
axes: [$.gchart.axis('bottom', levels, 'black'),
$.gchart.axis('y', 0, 80)],
legend: 'right'
});
$('#javascriptChart').gchart({
type: 'pie',
//maxValue: 80,
title: 'Javascript Skills (Group 1)',
titleColor: 'black',
backgroundColor: 'ccffff',
series: [$.gchart.series('JavaScript', counts[1], 'green')],
axes: [$.gchart.axis('bottom', levels, 'black'),
$.gchart.axis('y', 0, 80)],
legend: 'right'
});
$('#jQueryChart').gchart({
type: 'pie',
//maxValue: 80,
title: 'jQuery Skills (Group 1)',
titleColor: 'black',
backgroundColor: 'ccffff',
series: [$.gchart.series('jQuery', counts[3], 'orange')],
axes: [$.gchart.axis('bottom', levels, 'black'),
$.gchart.axis('y', 0, 80)],
legend: 'right'
});