We are experiencing a similar bug to the one in the jsFiddle below.
When zooming in on the chart, the shaded rectangle does not go away. I don't think the onMouseUp event is working properly in certain cases.
http://jsfiddle.net/mihailiviu/od61d2z3/
Can someone tell us what is causing this and how we can avoid it?
This is how I create the chart:
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
// Create the chart
$('#container').highcharts('StockChart', {
chart : {
animation : false,
zoomType : 'xy',
events : {
redraw : function (event) {}
}
},
rangeSelector : {
selected : 1
},
title : {
text : 'AAPL Stock Price'
},
tooltip : {
enabled : false,
animation : false,
useHTML : true,
formatter : function () {
return false;
},
crosshairs : [true, true]
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});
Related
I have a map and want to detect whenever it is zoomed or panned by the user. I understand that best way to do this would seem to be with the afterSetExtremes event.
I'm using buttons to zoom but the user can double click to zoom in too and pan.
The event doesn't seem to fire though but I'm not sure what I'm doing wrong or if there is another event I should be using to achieve this. Here's a JSFiddle which is based on one of the Highmaps demos, just with the event added:
https://jsfiddle.net/nbymstxe/
What am I doing wrong?
Highcharts.getJSON('https://cdn.jsdelivr.net/gh/highcharts/highcharts#v7.0.0/samples/data/world-population-density.json', function (data) {
// Prevent logarithmic errors in color calulcation
data.forEach(function (p) {
p.value = (p.value < 1 ? 1 : p.value);
});
// Initialize the chart
Highcharts.mapChart('container', {
chart: {
map: 'custom/world'
},
title: {
text: 'Zoom in on country by double click'
},
mapNavigation: {
enabled: true,
enableDoubleClickZoomTo: true
},
colorAxis: {
min: 1,
max: 1000,
type: 'logarithmic'
},
xAxis: {
events: {
afterSetExtremes() {
console.log("Extremes set");
}
},
},
series: [{
data: data,
joinBy: ['iso-a3', 'code3'],
name: 'Population density',
states: {
hover: {
color: '#a4edba'
}
},
tooltip: {
valueSuffix: '/km²'
}
}]
});
});
I think that you can use the render callback to detect when user has zoomed or panned the chart.
events: {
render() {
console.log(this.mapView)
}
}
Demo: https://jsfiddle.net/BlackLabel/zpn5goaj/
API: https://api.highcharts.com/highcharts/chart.events.render
Can we disable zoom on highchart graph while graph is loading.
I have multiple graphs therfore would like to disable the zoom option until all graphs gets loaded.
It is possible to change zoomType of a chart dynamically, but it is not a part of official API. That way after all charts are loaded you will be able to change their zoomType from none to some.
$(function () {
$('#container').highcharts({
chart: {
zoomType: ''
},
xAxis: {
minRange: 1
},
series: [{
data: [1,2,3,4,5,6,7]
}]
});
function enableZoom(zoomType) {
var chart = $('#container').highcharts(),
zoomX = /x/.test(zoomType),
zoomY = /y/.test(zoomType);
chart.options.zoomType = zoomType;
chart.pointer.zoomX = zoomX;
chart.pointer.zoomY = zoomY;
chart.pointer.zoomHor = zoomX;
chart.pointer.zoomVert = zoomY;
}
$('#zoomX').click(function () {
enableZoom('x');
});
$('#zoomY').click(function () {
enableZoom('y');
});
$('#zoomXY').click(function () {
enableZoom('xy');
});
$('#noZoom').click(function () {
enableZoom('');
});
});
JSFiddle: http://jsfiddle.net/pearp126/
you can do so by simple setting zoomType as null in your chart config
zoomType: null
See the documentation here for more details
Basically the only thing you need to get done is removing the chart and replacing it with one with the settings you like.
See the code below:
var chart = $('#container').highcharts();
function renderChart(){
chart = new Highcharts.Chart(chart.options);
chart.render();
}
Once you want to enable zooming (or any other setting):
$('#container').highcharts().options.chart.zoomType = 'xy';
renderChart();
To be honest I'm not sure what happens to the old chart. Hopefully it's just overwritten and doesn't it impose a big memory issue.
I created a fiddle you can find here
Basically you can stop the "selection" event (zoom), when the loading label of the chart is displayed.
Using the default Highcharts function .showLoading() for show the loading label, and the default variable loadingShown, for verify is the loading label is displayed or not.
So, by using the function .showLoading(), let's say before doing an AJAX request, and validating with the variable loadingShown if the loading label is displayed or not, we can stop the selection event.
Another way, is to use a thirdparty loading mask, and add it to the chart's container.
In the next example you'll find how to cancel the zoom using the .showLoading() function and how to use jQuery plugin: pLoading https://github.com/joseshiru/p-loading (for show the loading mask)
$(function () {
var setEvents;
var chart;
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'x',
events: {
selection: function () {
//Quit the selection event, while the loading spinner is displayed.
if (chart.loadingShown) {
return false;
}
}
}
},
title: {
text: 'USD to EUR exchange rate over time'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: data
}]
});
});
setEvents = function () {
var $showLoadingBtn = $('.show-loading');
var $hideLoadingBtn = $('.hide-loading');
var $showExternalMask = $('.show-toggle-mask');
var $hideExternalMask = $('.hide-toggle-mask');
$showLoadingBtn.on('click.showLoading', function () {
chart.showLoading();
});
$hideLoadingBtn.on('click.hideLoading', function () {
chart.hideLoading();
});
$showExternalMask.on('click.toggleMask', function () {
$('#container').ploading({action: 'show'});
});
$hideExternalMask.on('click.toggleMask', function () {
$('#container').ploading({action: 'hide'});
});
}();
});
Example in jsfiddle: http://jsfiddle.net/8p2fzbxw/3/
In my code, I am loading many files during navigation of chart but i want to include feathure like zoomType and hover and mousever on some specific files. For example, i am changing zoomType='x' of chart by reading sample.json file.
$(function() {
var chart;
var options = {
chart : {
type : 'polygon',
renderTo : 'container',
zoomType:''
},
title : {
text : ''
},
credits: {
enabled: false
},
$.getJSON('sample.json', function(data) {
options.series=data;
options.chart.zoomType='x'; /*including zoom feature only for sample.json file*/
var chart = new Highcharts.Chart(options);
});
But this code does not work. How can i fix this error?
See the working demo
I am setting 'x' for default series and zoomtype 'y' for next json data (when you click plus icon), see your previous code and demo at plunker link
$("#container").html("<div style='style:margin:0 auto'>Loading Data</div>") ;
$.getJSON('data10.json', function(data) {
options.series=data;
options.chart.zoomType='x';
chart = new Highcharts.Chart(options);
});
Take a look at this jsfiddle:
http://jsfiddle.net/P8hrN/
$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
// Create the chart
$('#container').highcharts('StockChart', {
yAxis: [{
lineWidth: 1,
opposite: true
}],
rangeSelector : {
selected : 1,
inputEnabled: $('#container').width() > 480
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});
I use "opposite: true" to display the y-axis on the right. But I want also the labels (numbers) to be on the right of the axis, not inside the series area.
At the moment, the numbers are on the left, so the series touches the "450" label.
Any ideas?
You need to set align:'left', so anchor-point for label will be on a left side. See demo and docs.
Does anyone know how to programmatically update the dates in the rangeSelector?
Here is a fiddle of my chart http://jsfiddle.net/ibike365/jneQh/1/
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container'
},
rangeSelector : {
selected : 1
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
},function(chart){
console.log(chart.rangeSelector);
});
});
I have a use case where I need to be able to set specific start and end dates for the selected range when I load the chart, but I'm not having much luck. When I inspect the chart.rangeSelector property in the console, I don't even see what to update.
Thanks for any help!
I figured it out:
chart.xAxis[0].setExtremes(startDate.getTime(), endDate.getTime());