Highcharts Flags | Highchart @ A Humble Opinion

http://ahumbleopinion.com/ Jugal Thakkar http://jugal.me/

by J. Albert Bowden

HTML

<script src="http://code.highcharts.com/stock/highstock.src.js"></script>
<script src="http://code.jugal.me/js/jugalsLib.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<div id="control">
    <div id="container"></div>
    <div id="sidebar"></div>
</div>

CSS

#container{
  width:75%;
  float:left;
}
#sidebar{
  width:25%;
  float:right;
  max-height: 400px;
  overflow-y: auto;
}
#control{
  height: 300px;
}
#sidebar li {
  padding-left: 10px;
  text-decoration: none;
  list-style-type: none;
}
#sidebar .content,#sidebar .timestamp {
  display: none;
}
#sidebar li.highlight .content,#sidebar li.highlight .timestamp {
  display: block;
}
#sidebar li.highlight {
  border-left-style: solid;
  border-left-color: green;
  border-left-width: 5px;
}
span.timestamp {
  text-align: right;
}
span.title {
  font-weight: bolder;
}

JavaScript

var chart;
var selectFlag = function (title) {
    $('#sidebar li.highlight').removeClass('highlight');
    var $target = $('li[name="flag-' + title + '"]');
    $target.addClass('highlight');
    $target.scrollintoview();
};
var chartingOptions = jugalsLib.getBasicChartOptions();
chartingOptions.series[0].id = 'series0';
var flagSeriesA = {
    "name": "Flags On Series",
        "type": "flags",
    onSeries: 'series0',
    allowPointSelect: true,
    point: {
        events: {
            select: function () {
                selectFlag(this.title);
            }
        }
    },
    stackDistance: 20
};
var oneDay = 24 * 60 * 60 * 1000;
var oneDayAgo = new Date().getTime() - oneDay;
var oneWeekAgo = new Date().getTime() - 7 * oneDay;
var tenDaysAgo = new Date().getTime() - 10 * oneDay;
var nineDaysAgo = new Date().getTime() - 9 * oneDay;
var eightDaysAgo = new Date().getTime() - 8 * oneDay;
var oneMonthAgo = new Date().getTime() - 30 * oneDay;
var sixMonthsAgo = new Date().getTime() - 180 * oneDay;
flagSeriesA.data = [{
    x: sixMonthsAgo,
    title: '6M-S',
    content: 'Six Months <a href="#">Ago</a> (Series)'
}, {
    x: oneMonthAgo,
    title: '1M-S',
    content: 'One Month <a href="#">Ago</a> (Series)'
}, {
    x: tenDaysAgo,
    title: '10D-S',
    content: '10 Days <a href="#">Ago</a> (Series)'
}, {
    x: nineDaysAgo,
    title: '9D-S',
    content: '9 Days <a href="#">Ago</a> (Series)'
}, {
    x: nineDaysAgo,
    title: '8D-S',
    content: '8 Days <a href="#">Ago</a> (Series)'
}, {
    x: oneWeekAgo,
    title: '1W-S',
    content: 'One Week <a href="#">Ago</a> (Series)'
}, {
    x: oneDayAgo,
    title: '1D-S',
    content: 'One Day <a href="#">Ago</a> (Series)'
}];

var flagSeriesB = {
    "name": "Flags on Axis",
        "type": "flags",
    allowPointSelect: true,
    point: {
        events: {
            select: function () {
                selectFlag(this.title);
            }
        }
    }
};

flagSeriesB.data = [{
    x: sixMonthsAgo,
...