Highcharts Sample for Wattsmart

by Jayson Buquia

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="history-chart" style="min-width: 300px; height: 400px; margin: 0 auto"></div>
<div class="history-chart-buttons">Show my data for
    <label for="showDay">
        <input type="radio" name="seriesData" id="showDay" class="hide">	<span class="btn">
								TODAY
							</span>

    </label>
    <label for="showMOnth">
        <input type="radio" name="seriesData" id="showMOnth" class="hide" checked>	<span class="btn">
								THIS MONTH
							</span>

    </label>
    <label for="showYear">
        <input type="radio" name="seriesData" id="showYear" class="hide">	<span class="btn">
								THIS YEAR
							</span>

    </label>
</div>
        <div class="btn" id="colorUpdate">Update Colors</div>

CSS

.history-chart-buttons {
    text-align: right;
}
.history-chart-buttons .btn {
    background-color: #eee;
    border: 1px solid silver;
}
.history-chart-buttons input[type="radio"]:checked + .btn {
    background-color: #333;
    color: #fff;
}

JavaScript

$(function () {
    var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
        data1 = [ // set of dummy series ( year | month | year )
            {
                data : (function () {
                        var arr = [];
                        for ( var i = 0; i < 24 ; i++ ) {
                            var xVal = i < 11 ? i + 'am' : (i-12)+'pm';
                             arr.push([
                                     xVal,
                                     Math.random() * 150
                                 ]);
                             }            
                        return arr;
                    })()
            },
            {
               data : (function () {
                        var arr = [];
                        for ( var i = 0; i < 30 ; i++ ) {
                             arr.push([
                                     (i+1).toString(),
                                 i < 15 ? Math.random() * 150 : 0
                                 ]);
                             }            
                        return arr;
                    })()
            },
            {
                data : (function () {
                        var arr = [];
                        for ( var i = 0; i < months.length ; i++ ) {
                             arr.push([
                                     months[i],
                                 i < 4 ? Math.random() * 150 : 0
                                 ]);
                             }            
                        return arr;
                    })()
            }
        ],
        
        data2 = [ // set of dummy series ( year | month | year )
            {
                data : (function () {
                        var arr = [];
                        for ( var i = 0; i < 24 ; i++ ) {
                            var xVal = i < 11 ? i + 'am' : (i-12)+'pm';
                            arr.push({
                               ...