barchart scroll
by igor_nov
HTML
<script type="text/javascript" src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
var colors = [
'#7a1f1f',
'#005028',
'#1a676a',
'#5c5c5c'
]
var dateRange = [
{
y: 1,
low: Date.UTC(2013, 11, 31),
high: Date.UTC(2015, 11, 31),
color: colors[0]
}
];
$('#container').highcharts({
scrollbar: {
enabled: true
},
legend: {
enabled: false
},
chart: {
renderTo: 'container',
type: 'columnrange',
//height: 200,
inverted: true,
events: {
load: function(e) {
/* $(".highcharts-tracker rect").popover({trigger:'hover', placement:'top', title:'Title!', content:'Content'}).hover(function() {
$('.popover').appendTo($(document.body));
});
*/
/*
$(".highcharts-tracker rect")
.hover(function() {
console.log(this);
$(this).attr('data-content', 'Random number: ' + Math.random());
})
.popover({trigger:'hover', placement:'top'}).hover(function() {
$('.popover').appendTo($(document.body));
});
*/
}
}
},
tooltip: {
formatter: function() {
console.log(this);
console.log(this.point.series);
if(this.point.type === 'release') {
return '<b>' + this.key+'</b><br/>'
+ Highcharts.dateFormat('%e - %b - %Y', ...