Filter Google Chart

by Joel Lubrano

HTML

<script src="https://www.google.com/jsapi"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/black-tie/jquery-ui.css">
<div id="chart"></div>
<a href="#" id="filter">Filter</a>
<a href="#" id="unfilter">Unfilter</a>
<div id="filterDialog" title="Set Chart Filters">
</div>

JavaScript

if(webrat === undefined) {
    var webrat = {};
}

function buildCheckboxAndLabelListItem(labelText, checked, checkboxName)
{
    var li = document.createElement('li');
    var checkbox = document.createElement('input');
    checkbox.value = labelText;
    checkbox.type = "checkbox";
    checkbox.id = labelText + "chk";
    checkbox.name = checkboxName;
    if(checked)
    {
        checkbox.setAttribute("checked", "checked");
    }
    var label = document.createElement('label');
    label.htmlFor = checkbox.id;
    label.innerHTML = labelText;
    li.appendChild(checkbox);
    li.appendChild(label);
    return li;
}

function buildCheckboxList(all, included, checkboxName)
{
    var list = document.createElement('ul');
    list.style['list-style'] = "none";
    
    for(var one in all) 
    {
        var labelText = all[one];
        list.appendChild(
            buildCheckboxAndLabelListItem(
                labelText,
                ( included.indexOf(labelText) !== -1 ),
                checkboxName
            )
        );
    }
    
    return list;        
}

function buildCheckboxFilterSection(filterDescriptor)
{
    var container = document.createElement('div');
    
    var header = document.createElement('h4');
    header.innerHTML = filterDescriptor.header;    
    
    var checkboxList = buildCheckboxList(
        filterDescriptor.all,
        filterDescriptor.included,
        filterDescriptor.inputName
    );
    
    container.appendChild(header);
    container.appendChild(checkboxList);
    
    return container;
}

function buildFilterForm(formDescriptor)
{
    var filterForm = document.createElement('form');
    
    for(var filterDescriptor in formDescriptor)
    {
        filterForm.appendChild(buildCheckboxFilterSection(formDescriptor[filterDescriptor]));
        filterForm.appendChild(document.createElement('hr'));
    }
    
    return filterForm;
}

$(document).ready(function() {
    
    var filterDialog = $('#filterDialog');
    
   ...