Campaign chart

by Phil Brown

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://www.dangrossman.info/wp-content/themes/2012/daterangepicker-bs3.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.1/moment-with-locales.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/1939593/cxense/daterangepicker.js"></script>
<div class="dropdown">
    <button class="btn btn-xs btn-default dropdown-toggle" type="button" data-toggle="dropdown"> <span class="fa fa-bars"></span>

    </button>
    <ul class="dropdown-menu dropdown-menu-form" role="menu">
        <li role="presentation" class="dropdown-header">Reporting date range</li>
        <li>
            <div class="form-group">
                <input type="text" name="daterange" value="1/11/13 - 1/03/14" />
            </div>
        </li>
        <li role="presentation" class="divider"></li>
        <li class="checkbox">
            <label>
                <input type="checkbox" value="uniques" /> <abbr title="Unique Users">Uniques</abbr>
 <span class="badge pull-right">1</span>

            </label>
        </li>
        <li class="checkbox">
            <label>
                <input type="checkbox" value="imps" checked /> <abbr title="Impressions">Imps.</abbr>
 <span class="badge pull-right">1,463</span>

            </label>
        </li>
        <li class="checkbox">
            <label>
                <input type="checkbox" value="ctr" checked /> <abbr title="Click-Through Rate (CTR)">CTR</abbr>
 <span class="badge pull-right">15.385%</span>

            </label>
        </li>
    </ul>
</div>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

CSS

.dropdown {
    margin: 5px 0 -20px 10px;
    z-index: 200;
}
.dropdown-menu-form > li > .form-group {
    padding: 3px 20px;
}
.dropdown-menu-form > li.checkbox {
    margin: 0;
}
.dropdown-menu-form > li.checkbox > label {
    display: block;
    padding: 3px 20px 3px 40px;
}
.dropdown-menu-form > li.checkbox > label .badge {
    margin-top: 1px;
}
.dropdown-menu-form > li.checkbox > label > abbr {
    cursor: pointer;
    border-bottom: 0 none;
    text-transform: uppercase;
}

JavaScript

$(document).on('click', '.dropdown-menu.dropdown-menu-form', function (e) {
    e.stopPropagation();
});
$(function () {
    $('abbr[title]').tooltip();
    $('input[name="daterange"]').daterangepicker({
        format: 'DD/MM/YY'
    });
});

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'areaspline'
        },
        title: {
            text: ''
        },
            "legend": {
            "align": "right",
                "borderColor": "#ffffff",
                "borderRadius": 0,
                "enabled": true,
                "margin": 5,
                "verticalAlign": "top",
                "width": 140,
                "layout": "vertical",
                "itemStyle": {
                lineHeight: '50',
                color: '#000'
            },
                "itemHoverStyle": {
                color: '#000'
            },
                "itemHiddenStyle": {
                color: '#777'
            }
        },
            "xAxis": [{
            "categories": ["1/11/13", "2/11/13", "3/11/13", "4/11/13", "5/11/13", "6/11/13", "7/11/13", "8/11/13", "9/11/13", "10/11/13", "11/11/13", "12/11/13", "13/11/13", "14/11/13", "15/11/13", "16/11/13", "17/11/13", "18/11/13", "19/11/13", "20/11/13", "21/11/13", "22/11/13", "23/11/13", "24/11/13", "25/11/13", "26/11/13", "27/11/13", "28/11/13", "29/11/13", "30/11/13", "1/12/13", "2/12/13", "3/12/13", "4/12/13", "5/12/13", "6/12/13", "7/12/13", "8/12/13", "9/12/13", "10/12/13", "11/12/13", "12/12/13", "13/12/13", "14/12/13", "15/12/13", "16/12/13", "17/12/13", "18/12/13", "19/12/13", "20/12/13", "21/12/13", "22/12/13", "23/12/13", "24/12/13", "25/12/13", "26/12/13", "27/12/13", "28/12/13", "29/12/13", "30/12/13", "31/12/13", "1/01/14", "2/01/14", "3/01/14", "4/01/14", "5/01/14", "6/01/14", "7/01/14", "8/01/14", "9/01/14", "10/01/14", "11/01/14", "12/01/14", "13/01/14", "14/01/14", "15/01/14", "16/01/14", "17/01/14", "18/01/14", "19/01/14", "20/01/14", "21/01/14",...