Show Hide Categories (columns)

Dynamically build check boxes to control the showing and hiding of categorical data elements.

by jlbriggs

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<form id="check-boxes">
    <fieldset>
        <legend>Select Data</legend>
    </fieldset>
</form>
<div id="container" style="width:500px;height:400px;margin:1.5em 1em;float:left;"></div>
<p style="clear:left;">Related to this question: <a target="_blank" href="http://stackoverflow.com/questions/32776861/how-to-show-hide-categories-with-checkbox-using-highcharts">How to show/hide categories with checkbox using highcharts?</a>

<script>
var d          = new Date();
var pointStart = d.getTime();
Highcharts.setOptions({
    global: {
        useUTC:false
    },
    colors: [
        'rgba( 0,   154, 253, 0.9 )', //bright blue
        'rgba( 253, 99,  0,   0.9 )', //bright orange
        'rgba( 40,  40,  56,  0.9 )', //dark
        'rgba( 253, 0,   154, 0.9 )', //bright pink
        'rgba( 154, 253, 0,   0.9 )', //bright green
        'rgba( 145, 44,  138, 0.9 )', //mid purple
        'rgba( 45,  47,  238, 0.9 )', //mid blue
        'rgba( 177, 69,  0,   0.9 )', //dark orange
        'rgba( 140, 140, 156, 0.9 )', //mid
        'rgba( 238, 46,  47,  0.9 )', //mid red
        'rgba( 44,  145, 51,  0.9 )', //mid green
        'rgba( 103, 16,  192, 0.9 )'  //dark purple
    ],
    chart: {
        alignTicks:false,
        type:'',
        margin:[60,25,100,90],
        //borderRadius:10,
        //borderWidth:1,
        //borderColor:'rgba(156,156,156,.25)',
        //backgroundColor:'rgba(204,204,204,.25)',
        //plotBackgroundColor:'rgba(255,255,255,1)',
        style: {
            fontFamily: 'Abel,serif'
        },
        events:{
            load: function() {
                this.credits.element.onclick = function() {
                    window.open(
                      'http://stackoverflow.com/users/1011544/jlbriggs?tab=profile'
                 ...

CSS

@import url(https://fonts.googleapis.com/css?family=Changa+One|Loved+by+the+King|Fredericka+the+Great|Droid+Serif:400,700,400italic|Abel|Oswald:400,300,700);

body {
    font-family:Abel, Calibri, Helvetica, sans-serif;
    font-size:95%;
}
form {
    float:left;
}
fieldset {
    margin:1em;
    border:1px solid rgba(204,204,204,.5);
}
legend {
    /*font-weight:bold;*/
}
label, input {
    display:block;
    padding:0.25em;
    margin:0.25em;
    font-weight:bold;
}
input {
    display:inline-block;
}
}

JavaScript

//the chart object
var chart;

var data1 = [2,5,9,8,7,8,9,6];
var data2 = [5,9,8,7,8,9,6,3];
var data3 = [4,5,8,7,6,3,2,4];
var cats  = ['A','B','C','D','E','F','G'];

//build the list of checkboxes based on the categories
buildCheckBoxes(cats);

//-----------------------------------------------------
//build a chart series object to loop through
var chartData         = {};
chartData.data1       = {};
chartData.data1.id    = 'data1';
chartData.data1.name  = 'Data 1';
chartData.data1.data  = [];

chartData.data2       = {};
chartData.data2.id    = 'data2';
chartData.data2.name  = 'Data 2';
chartData.data2.data  = [];

chartData.data3       = {};
chartData.data3.id    = 'data3';
chartData.data3.name  = 'Data 3';
chartData.data3.data  = [];
//console.log(chartData);

$.each(cats, function(i, cat) {
    chartData.data1.data.push({ 'name' : cat, 'y' : data1[i] });
    chartData.data2.data.push({ 'name' : cat, 'y' : data2[i] });
    chartData.data3.data.push({ 'name' : cat, 'y' : data3[i] });
});
//console.log(chartData);   

$(function() {
    
    //build the chart options
    $('#container').highcharts({
        chart      : { type: 'column', margin : [75,25,90,100] },
        legend     : { enabled  : true                         },
        tooltip    : { shared   : true                         },
        plotOptions : {
            column : {
        		pointPadding:0,
                groupPadding: 0.2
            },
        },
        xAxis      : { 
            title      : { text   : 'Group'     },
            categories : [],           
            labels     : {
                style  : { fontWeight  : 'bold' }
            }
        },
        yAxis      : { title    : { text : 'Distribution' } }
    });	
    chart = $('#container').highcharts();
    
    //add the series to the chart
    $.each(chartData, function() {
    	//console.log(this);
        chart.addSeries(this);    
    });

    //-----------------------------------------------------
    //capture...