JSFiddle - React, Tailwind, and code Playground

by raviolicode

HTML

<script src="https://www.quickbase.com/db/bfx7sqpm8?a=dbpage&amp;pagename=SurveyData.js"></script>
<script src="http://keith-wood.name/js/jquery.gchart.js"></script>
<div id="basicGChart">
</div>

CSS

#basicGChart { width: 450px; height: 300px }

JavaScript

var levels = ["None", "Beginner", "Intermediate", "Advanced", "Expert"];
var skills = ['html', 'css', 'js', 'jq'];

for (var i = 0; i < skills.length; i++) {
    values[i] = [];
    for (var j = 0; j < levels.length; j++) {
        values[i][j] = 0;
    }
}

for (var i = 0; i < survey.length; i++) {
    for (var j = 0; j < skills.length; j++) {
        var skill = skills[j].toString();
        var level = survey[i][j].toString();
        values[j][i]++;

        if (addLevelToSkill[survey[i][j]]) {
            addLevelToSkill[survey[i][j]]();
        } else {
            addLevelToSkill['default']();
        }

        var addLevelToSkill = {
            'Beginner': function() {
                values[j][1]++;
            }
            'Intermediate': function() {
                values[j][2]++;
            }
            'Advanced': function() {
                values[j][3]++;
            }
            'Expert': function() {
                values[j][4]++;
            }
            'None',
            'default': function(values, j) {
                values[j][0]++;
            }
        }


        $('#basicGChart').gchart({
            type: 'barVert',
            maxValue: 40,
            title: 'Levels',
            titleColor: 'green',
            barWidth: 30,
            barSpacing: 25,
            barGroupSpacing: 15,
            /*backgroundColor: green,*/
            series: [$.gchart.series('None', values[0], "blue")],

            axes: [$.gchart.axis('bottom', levels, 'black'),
             $.gchart.axis('y', 0, 25, 5)]

        });