I have a highstock chart with navigator synced with 4 highcharts graphs. I'd like to initially display YTD on all 5 charts, but the following gives me an xaxis error. Looks like it needs to be set after all charts are rendered. I've tried several places to no avail.
rangeSelector: {
selected: 3
},
Any suggestions?
If it's not too much trouble,here's the site I'm working on. The code of 5 charts is too lengthy to display here. Click on any icon.
The problem is that setting rangeSelector.selected: 3 triggers your xAxis.events.setExtremes function, which refers to your other charts that have not yet been initialized, and it causes an error.
To fix this you could simply move your chart1 constructor to the end, and do the other charts first.
In short:
$('#container2').highcharts({
// ...
});
$('#container3').highcharts({
// ...
});
$('#container4').highcharts({
// ...
});
$('#container5').highcharts({
// ...
});
$('#container1').highcharts('StockChart', {
rangeSelector: {
selected: 3
},
xAxis: {
events: {
setExtremes: function (e) {
var thisMin = e.min,
thisMax = e.max,
chart2 = $('#container2').highcharts();
chart3 = $('#container3').highcharts();
chart4 = $('#container4').highcharts();
chart5 = $('#container5').highcharts();
chart2.xAxis[0].setExtremes(thisMin, thisMax);
chart3.xAxis[0].setExtremes(thisMin, thisMax);
chart4.xAxis[0].setExtremes(thisMin, thisMax);
chart5.xAxis[0].setExtremes(thisMin, thisMax);
}
}
},
// ...
});
Related
I have created my own master-detail chart following the Highcharts docs and this example: https://www.highcharts.com/demo/dynamic-master-detail
Eveything works fine but I would like to add a feature: When the chart is loaded the last 50 data points should automatically be selected in the master chart and thus shown in the detail chart.
I tried to manually trigger the selection event but it did not work out. Any idea how to solve this?
You can fire selection event in chart load event and set correct extremes:
chart: {
...
events: {
load: function() {
var points = this.series[0].points,
xAxis = this.xAxis[0];
Highcharts.fireEvent(this, 'selection', {
xAxis: [{
min: points[points.length - 51].x,
max: points[points.length - 1].x
}],
});
},
selection: function(event) {
...
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/xy8qug9h/
API: https://api.highcharts.com/highcharts/chart.events.load
I want to draw a line on a ohlc chart, but i dont want the new series to introduce gaps.
The first series (ohlc) should still place the candles in an nica way with constant gaps between them regardles of open-close times (i think its only the "ordinal" value that does this, but unfortunatelly you cant specify it at series level, but only axis level).
xAxis: {
ordinal: true
},
example:
http://jsfiddle.net/5r97owky/8/
Thank you for any help
The gaps are caused by ordinal option. You can create additional xAxis for line series:
Highcharts.stockChart('container', {
chart: {
events: {
load: function() {
var xAxes = this.xAxis,
extremes = xAxes[0].getExtremes();
xAxes[1].setExtremes(extremes.min, extremes.max, true, false);
}
}
},
xAxis: [{}, {
visible: false
}],
...
});
Live demo: http://jsfiddle.net/BlackLabel/1mbo2zp4/
API: https://api.highcharts.com/highstock/xAxis.ordinal
Am trying to generate a scientific bubble chart and it is suppose to be presented as a dashboard. The chart is intended to reflect bubbles and these bubbles will be changing in size and location using an ajax call.
I was able to do must of that, but am facing a performance issue. The ajax is returning an average of 80 to 150 items each presented by a Series of type bubble.
As such, am faced with two problems
1) The browser freezes at every request, I tried to make the javascript sleep between each add operation but did not solve the problem.
2) After the first ajax call, other calls will need to alter existing Series of their facts has changes. How can I retrieve an existing Series and change its values in case it needs to be altered?
$(function () {
function addPoint(chart){
$.get("{{ main_site_url }}/dashboard/likelihood/ajax/",
function(data) {
$.each(data, function(k, dic) {
var newSeries = new Highcharts.Series();
newSeries.type = 'bubble';
newSeries.id = dic.id
newSeries.data = [[dic.id, dic.views, dic.likes] ];
setTimeout(function() {
chart.addSeries(newSeries);
}, 2000);
});
}, "jsonp"
);
}
$(document).ready(function() {
$('#container').highcharts({
chart: {
type: 'bubble',
zoomType: 'xy',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var chart = this;
setInterval(function() {
addPoint(chart)
}, 3000);
}
}
},
title: {
text: 'Likelihood bubbles'
}
});
});
});
I'm working with Highchart.
I've got a multiple series graph in which each series have their own y-axis.
pretty much like this one (jsfiddle)
when we click on the legend item for a series, it hides it and the associated y-axis
(using showEmpty:false helped hiding also the name of the axes)
What I'm trying to achieve is hiding the y-Axis of a given series without hiding the series itself.
I tried to hide it by modifying the showAxis property like this :
serie.yAxis.showAxis = false;
but it doesn't work.
Anyone knows how I should do ?
EDIT : I managed to edit the text so I can remove the axis title by setting the text to null but its not enough to hide the whole axis and its values.
here's what i did to edit the text:
serie.yAxis.axisTitle.attr({
text: null
});
Highcharts 4.1.9+
Since 4.1.9, there is an option Axis.visible which can be used to show/hide an axis, demo: http://jsfiddle.net/3sembmfo/36/
Older versions of Highcharts
It's a new feature for Highcharts 3.0 - that allows to update axes in realtime: chart.yAxis[0].update(object) - as object takes the same options as for creating chart. For example:
chart.yAxis[0].update({
labels: {
enabled: false
},
title: {
text: null
}
});
And jsFiddle: http://jsfiddle.net/39xBU/2/
EDIT:
Use below snippet to hide/show axis by just calling axis.hide() and axis.show(). Live demo: http://jsfiddle.net/39xBU/183/
(function (HC) {
var UNDEFINED;
HC.wrap(HC.Axis.prototype, 'render', function (p) {
if (typeof this.visible === 'undefined') {
this.visible = true;
}
if(this.visible) {
this.min = this.prevMin || this.min;
this.max = this.prevMax || this.max;
} else {
this.prevMin = this.min;
this.prevMax = this.max;
this.min = UNDEFINED;
this.max = UNDEFINED;
}
this.hasData = this.visible;
p.call(this);
});
HC.Axis.prototype.hide = function () {
this.visible = false;
this.render();
HC.each(this.plotLinesAndBands, function (plotLine) {
plotLine.render();
});
};
HC.Axis.prototype.show = function () {
this.visible = true;
this.render();
HC.each(this.plotLinesAndBands, function (plotLine) {
plotLine.render();
});
};
})(Highcharts);
It's actually gotten simpler. You only have to set the yAxis title attribute to false:
yAxis: {
title: false
},
Here is an example: jsfiddle example
We can hide Yaxis label without hiding the y-Axis without hiding the series by returning the empty string as follows:
yAxis: {
title: '',
labels: {
formatter: function() {
return '';
},
style: {
color: '#4572A7'
}
}
},
For newer versions (I'm using the 6.2.0), the yAxis property has a parameter called gridLineWidth. Just set it to 0 and the grids for that axis are going to disappear. In this JSFiddle there is an example of it.
However, if you are in styled mode this it's trickier. Here, you have to set a className for the target axis and then set the CSS like this:
.highcharts-yaxis-grid {
&.right-axis {
path {
stroke: none;
}
}
}
For example, this will make dissapear the grids of the axis with a className set as right-axis. This allow to have different styles for the multiple axis.
In a scatter HighCharts plot, I want to set some properties only for some data points of my series. Here is a toy example:
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
series: [{
type: 'line',
data: [[1,1],
{x:3,y:2,marker:{enabled:false}},
[4,1]]
}]
});
});
});
I need (in decreasing order of priority) the second point to NOT have:
the marker (already done in my code, working);
the tooltip (tried but without success, I don't know how to do it working)
the line coming from previous point (tried but without success, I don't know
how to do it working)
Here is a jfiddle version.
For your second point, improvised from a similar answer:
Disable tooltip on certain points in Highcharts
tooltip: {
formatter: function() {
if (this.point.x != 1) { //enable for each point except the second point
return this.x;
}
else return false;
}
}
for your third point you might try to use a trick. If you set the y value as null, that point won't be displayed in the line. So draw your line, and enter two data with null y values to create a lonely point on the chart.
Here is an example: http://jsfiddle.net/8U8nx/14/