How can I set default range selected without using the:
rangeSelector:{
selected: 3
}
The reason why I want to do that is that I am trying to develop a custom range selector of my own. Also can I also ask why I'm getting a broken chart once I press the YTD again. Here is a link to my Fiddle and my sample code:
$(function () {
$.getJSON('.php?filename=aapl-c.json&callback=?', function (data) {
$('.zoom_controls a').click(function (e) {
e.preventDefault();
// OK, pretty ugly :)
var call = 'zoom' + $(this).attr('data-range');
// I have two globally accessible charts here:
if ($(this).attr('data-chart') == 'line') {
lineChart[call]();
} else {
candleChart[call]();
}
$(this).addClass('active');
});
var proto = Highcharts.Chart.prototype;
proto.zoomToD = function (delta) {
var chartMin = this.xAxis[1].min;
var chartMax = this.xAxis[0].max;
var min = chartMax - delta;
if (chartMin < min) {
// this.xAxis[0] is the view, this.xAxis[1] is the navigator
this.xAxis[0].setExtremes(min, chartMax);
this.yAxis[0].setExtremes(this.series[0].dataMin, this.series[0].dataMax);
return true;
}
this.xAxis[0].setExtremes(chartMin, chartMax);
this.yAxis[0].setExtremes(this.series[0].dataMin, this.series[0].dataMax);
return false;
};
proto.zoom3m = function () {
return this.zoomToD(2592000 * 3 * 1000);
};
proto.zoom6m = function () {
return this.zoomToD(2592000 * 6 * 1000);
};
proto.zoom1y = function () {
return this.zoomToD(2592000 * 12 * 1000);
};
proto.zoom2y = function () {
return this.zoomToD(2592000 * 24 * 1000);
};
proto.zoom3y = function () {
return this.zoomToD(2592000 * 36 * 1000);
};
proto.zoom5y = function () {
return this.zoomToD(2592000 * 60 * 1000);
};
proto.zoom10y = function () {
return this.zoomToD(2592000 * 120 * 1000);
};
proto.zoomYtd = function () {
var chartMin = this.xAxis[1].min;
var chartMax = this.xAxis[1].max;
var min = chartMax - 2592000 * 12 * 1000;
if (chartMin < min) {
this.xAxis[0].setExtremes(min, chartMax);
return true;
}
this.xAxis[0].setExtremes(chartMin, chartMax);
return false;
}
/*And then I define some stuff that instantiates Highcharts.StockChart objects, e.g.:*/
lineChart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
type: 'area'
},
series: [{
id: "data",
name: 'HP',
data: data,
color: '#7BA6A5',
tooltip: {
valueDecimals: 2
}
}],
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
year: '%Y',
month: '%m',
week: '%b %e'
},
gridLineWidth: 1
},
yAxis: {
opposite: false,
minorTickInterval: 'auto'
},
rangeSelector: {
enabled: false
},
scrollbar: {
enabled: true
},
navigator: {
enabled: true
}
});
lineChart.scroller.xAxis.labelGroup.hide();
lineChart.scroller.xAxis.gridGroup.hide();
lineChart.scroller.series.hide();
lineChart.scroller.scrollbar.hide();
lineChart.scroller.scrollbarGroup.hide();
lineChart.scroller.navigatorGroup.hide();
lineChart.scroller.scrollbarTrack.hide();
$.each(lineChart.scroller.elementsToDestroy, function (i, elem) {
elem.hide();
});
lineChart.rangeSelector.zoomText.hide();
/*$.each(lineChart.rangeSelector.buttons, function () {
this.hide();
});*/
/*lineChart.rangeSelector.inputEnabled = false;*/
});
});
Any help or guide would be appreciated.
How can I set default range selected without using the:
rangeSelector:{
selected: 3
}
The reason why I want to do that is that I am trying to develop a custom range selector of my own. Also can I also ask why I'm getting a broken chart once I press the YTD again. Here is a link to my Fiddle and my sample code:
$(function () {
$.getJSON('http://www.highcharts./samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
$('.zoom_controls a').click(function (e) {
e.preventDefault();
// OK, pretty ugly :)
var call = 'zoom' + $(this).attr('data-range');
// I have two globally accessible charts here:
if ($(this).attr('data-chart') == 'line') {
lineChart[call]();
} else {
candleChart[call]();
}
$(this).addClass('active');
});
var proto = Highcharts.Chart.prototype;
proto.zoomToD = function (delta) {
var chartMin = this.xAxis[1].min;
var chartMax = this.xAxis[0].max;
var min = chartMax - delta;
if (chartMin < min) {
// this.xAxis[0] is the view, this.xAxis[1] is the navigator
this.xAxis[0].setExtremes(min, chartMax);
this.yAxis[0].setExtremes(this.series[0].dataMin, this.series[0].dataMax);
return true;
}
this.xAxis[0].setExtremes(chartMin, chartMax);
this.yAxis[0].setExtremes(this.series[0].dataMin, this.series[0].dataMax);
return false;
};
proto.zoom3m = function () {
return this.zoomToD(2592000 * 3 * 1000);
};
proto.zoom6m = function () {
return this.zoomToD(2592000 * 6 * 1000);
};
proto.zoom1y = function () {
return this.zoomToD(2592000 * 12 * 1000);
};
proto.zoom2y = function () {
return this.zoomToD(2592000 * 24 * 1000);
};
proto.zoom3y = function () {
return this.zoomToD(2592000 * 36 * 1000);
};
proto.zoom5y = function () {
return this.zoomToD(2592000 * 60 * 1000);
};
proto.zoom10y = function () {
return this.zoomToD(2592000 * 120 * 1000);
};
proto.zoomYtd = function () {
var chartMin = this.xAxis[1].min;
var chartMax = this.xAxis[1].max;
var min = chartMax - 2592000 * 12 * 1000;
if (chartMin < min) {
this.xAxis[0].setExtremes(min, chartMax);
return true;
}
this.xAxis[0].setExtremes(chartMin, chartMax);
return false;
}
/*And then I define some stuff that instantiates Highcharts.StockChart objects, e.g.:*/
lineChart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
type: 'area'
},
series: [{
id: "data",
name: 'HP',
data: data,
color: '#7BA6A5',
tooltip: {
valueDecimals: 2
}
}],
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
year: '%Y',
month: '%m',
week: '%b %e'
},
gridLineWidth: 1
},
yAxis: {
opposite: false,
minorTickInterval: 'auto'
},
rangeSelector: {
enabled: false
},
scrollbar: {
enabled: true
},
navigator: {
enabled: true
}
});
lineChart.scroller.xAxis.labelGroup.hide();
lineChart.scroller.xAxis.gridGroup.hide();
lineChart.scroller.series.hide();
lineChart.scroller.scrollbar.hide();
lineChart.scroller.scrollbarGroup.hide();
lineChart.scroller.navigatorGroup.hide();
lineChart.scroller.scrollbarTrack.hide();
$.each(lineChart.scroller.elementsToDestroy, function (i, elem) {
elem.hide();
});
lineChart.rangeSelector.zoomText.hide();
/*$.each(lineChart.rangeSelector.buttons, function () {
this.hide();
});*/
/*lineChart.rangeSelector.inputEnabled = false;*/
});
});
Any help or guide would be appreciated.
Share Improve this question asked Jun 10, 2014 at 10:03 a_miguel6687a_miguel6687 5293 gold badges10 silver badges22 bronze badges2 Answers
Reset to default 12Simply use:
xAxis: {
min: timestampFrom,
max: timestampTo
}
About your second issue, if you are doing multiple updates, then you should be disabling animations for all execpt last one. See fixed demo: http://jsfiddle/Gpb56/3/
I solved it by setting an initial setExtremes function. Please take a look at my updated Fiddle