JSFiddle - React, Tailwind, and code Playground

by Sam Tyson

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: 400px; height: 400px }

JavaScript

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]];

$.each(survey, function(i) {
    iHtml = $.inArray(this.html, levels);
    iCss = $.inArray(this.css, levels);
    iJs = $.inArray(this.js, levels);
    iJq = $.inArray(this.jq, levels);

    group = this.group - 1;

    if (iHtml >= 0) counts[0][iHtml]++;
    if (iCss >= 0) counts[1][iCss]++;
    if (iJs >= 0) counts[2][iJs]++;
    if (iJq >= 0) counts[3][iJq]++;
});

$('#basicGChart').gchart({

    type: 'barVertGrouped',
    maxValue: 80,
    title: 'Summary Chart (All Groups)',
    backgroundColor: 
       $.gchart.gradient('horizontal', 'ccffff', 'ccffff00'),
    barWidth: 14,
    barSpacing: 1,
    barGroupSpacing: 15,
    series: [$.gchart.series('HTML', counts[0], 'red'),
             $.gchart.series('CSS', counts[1], 'blue'),
             $.gchart.series('JavaScript', counts[2], 'green'),
             $.gchart.series('jQuery', counts[3], 'black')],

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

    legend: 'bottom'
});