Button Layout

The library offers an easy way to produce a button layout that can be used to manipulate your charts. In the following example, we build three buttons for choosing between sets of Operating Systems and geographic locations.

Each call to button takes up to three parameters: An identifier, a nicified name and a sort function, if applicable. In this case, we call the function update whenever a button is clicked, which updates our charts.

We also add a manual button called Time Scale that isn't populated with our data array, but rather from a separate data object called time_scale.

var data = [
    {'os': 'Windows', 'geo': 'US'},
    {'os': 'Mac', 'geo': 'CA'},
    {'os': 'Linux', 'geo': 'RU'}
];

var time_scale = ['weekly', 'monthly'];

var global.buttons = new button_layout('.links-and-buttons')
    .data(data)
    .manual_button('Time Scale', time_scale)
    .button('os', 'OS', sort)
    .button('geo', 'Country', sort)
    .callback(update)
    .display();

function update(which){
    //update charts based on current selection
}

function sort(a,b) {
    if(a > b) return 1;
    if(b > a) return -1;

    return 0;
}

The above code produces HTML that looks something like this:

<div class="row links-and-buttons">
    <div class="col-lg-12 segments text-center">
        <div class="btn-group TimeScale-btns text-left">
            <button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">
                <span class="which-button">Time Scale</span>
                <span class="title">weekly</span>
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#" data-feature="TimeScale" data-key="weekly">weekly</a></li>
                <li><a href="#" data-feature="TimeScale" data-key="monthly">monthly</a></li>
            </ul>
        </div>
        <div class="btn-group os-btns text-left open">
            <button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">
                <span class="which-button">OS</span>
                <span class="title">all</span>
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#" data-feature="os" data-key="all">All</a>
                </li>
                <li class="divider"></li>
                <li><a href="#" data-feature="os" data-key="Linux">Linux</a></li>
                <li><a href="#" data-feature="os" data-key="Mac">Mac</a></li>
                <li><a href="#" data-feature="os" data-key="Windows">Windows</a></li>
                <li><a href="#" data-feature="os" data-key="Other">Other</a></li>
            </ul>
        </div>
        <div class="btn-group geo-btns text-left">
            <button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">
                <span class="which-button">Country</span>
                <span class="title">all</span>
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#" data-feature="geo" data-key="all">All</a>
                </li>
                <li class="divider"></li>
                <li><a href="#" data-feature="geo" data-key="CA">CA</a></li>
                <li><a href="#" data-feature="geo" data-key="RU">RU</a></li>
                <li><a href="#" data-feature="geo" data-key="US">US</a></li>
            </ul>
        </div>
    </div>
</div>