I"m using afterSetExtremes event to retrieve min and max x and y coordinates. Then, I add this series upon range selection. The problem is the series is not shown upon load. The simplest solution would be to simulate a range select on chart load. Is this possible? If not, is it possible to add this same series upon load?
xAxis: {
events: {
afterSetExtremes: function(e) {
var points = e.target.series[0].points,
minPoint = points[1],
maxPoint = points[points.length - 1]
if(minPoint.y < maxPoint.y)
{
var series_color = 'green';
}
else{
series_color = 'red';
}
chart.addSeries({
data:[{x:minPoint.x,y:minPoint.y},{x:maxPoint.x,y:maxPoint.y}],
color: series_color,
dashStyle: 'shortdot',
id: 'trend'
});
while(chart.series.length > 3)
{
chart.get('trend').remove();
}
}
}
}
See jsfiddle to see how it's currently working: http://jsfiddle.net/kd3aLp6m/
In load event you can use fireEvent method to trigger the afterSetExtremes event. Also, to increase performance, you can set the redraw parameter in addSeries metohd to false in all calls except the first one.
chart: {
...,
events: {
load: function() {
Highcharts.fireEvent(
this.xAxis[0],
'afterSetExtremes', {
redraw: true
}
);
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/bdnho9uc/
API Reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts#.fireEvent
Related
I am trying to hide a node on click in network graph. How can I hide a node in Network graph using highcharts?
I already tried removing the node in the series and updating the chart. Is there a better way?
To hide a specific point on a click event use remove method:
plotOptions: {
networkgraph: {
...,
point: {
events: {
click: function() {
this.remove();
}
}
}
}
}
However, there is a bug in a networkgraph chart, related with remove method (reported here: https://github.com/highcharts/highcharts/issues/10565), so additionally you need to use a workaround:
Highcharts.wrap(
Highcharts.seriesTypes.networkgraph.prototype, 'generatePoints',
function(p) {
if (this.nodes) {
this.nodes.forEach(function(node) {
node.destroy();
});
this.nodes.length = 0;
}
return p.apply(this, Array.prototype.slice.call(arguments, 1));
}
);
Live demo: https://jsfiddle.net/BlackLabel/m9tjb481/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Point#remove
Is there a way to set a back button when the data is set from point.events.click , it seems that setting it in
Highcharts.setOptions({
lang: {
drillUpText: 'Back'
}
});
does not work when it is set up in point.events.click, I've tried a few options within events and most I can do is setup an alert.
http://jsfiddle.net/efiallo/bh6e4Lyq/1/
Drillup button works only when the Highcharts drilldown module is imported and used. You implemented your own drilldown mechanism so the drillup button needs to be taken care of manually.
I aggregated all chart's defaults restoring operations in the restore function:
function restore() {
setChart(name, categories, data);
drillupBtn.destroy();
}
Then I added button handling in the point.events.click:
click: function() {
var drilldown = this.drilldown,
chart = this.series.chart;
if (drilldown) { // drill down
setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
drillupBtn = chart.renderer.button("Drill up", 100, 100, function() {
restore();
}).add();
} else { // restore
restore();
}
}
Live demo: http://jsfiddle.net/kkulig/md416hec/
API reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button
I have two series of points on a Highcharts scatter plot. One of the series is draggable. The other has a click event:
events: {
click: function(e) {
if (e.point.v != 0) {
if (e.point.options.p != 0) {
location.href = 'newPage.php?pID=' + e.point.options.p;
}
}
}
},
When I drag a point from the first series and leave it (mouse-up) over a point from the second series, the click event fires and the page is redirected.
I don't want that click event to occur when dragging a point over it.
You can try using the custom events plugin for this, so that for the second series the event is 'mousedown' and not click. That should solve the problem.
plotOptions: {
series: {
point: {
events: {
mousedown: function () {
alert(this.y);
}
}
}
}
}
A working example.
NOTE: You need to be running the latest version of Highcharts for this to work, which 3.0.7
I am working on a 2 level column chart. I want to perform a task like showing an alert on clicking each bar on chart on drilldown series only. I have found this:
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
alert('Category: ' + this.category + ', value: ' + this.y);
}
}
}
}
}
It works fine, but it fires for parent series too. Can we force this click event to work only on 2nd level series (that appears after drilldown)?
Because the this value of your click event will be a object with no values if you click a parent, you could do a check for an x value (or similar) to see if it was a destroyed parent or you are clicking a currently available point. Make sure it's a value you know your point will have.
For example (JSFiddle):
var UNDEFINED;
$('#container').highcharts({
plotOptions: {
series: {
point: {
events: {
click: function() {
if(this.x != UNDEFINED)
alert("It's alive!");
}
}
}
}
}
// ...
});
If it only concerns a specific series you could also consider adding the event code to those specific series, instead of doing this general code for all series.
I'm binding a click event on every series point in order to get the data associated with the point.
plotOptions: {
series: {
point: {
events: {
click: function () {
console.log("that > ", this);
}
}
}
}
}
If I have a chart with no drilldown It works fine ( fiddle ).
However, if I define a drilldown ( fiddle ) i can only get the point data for the inner series. The point data is null for the slice i just clicked to drilldown.
this > c {series: null, name: null, y: null, drilldown: null, options: null…}
Is this a bug or am i missing something ?
It is a bug.
Reported to our developers here.
This happens because your click handler gets executed when the clicked element has already disappeared. Looks like a bug to me.
A quick fix would be to modify highcharts js/modules/drilldown.src.js around line 513 to look like this:
// Add the click event to the point label
H.addEvent(point, 'click', function () {
setTimeout(function() {
point.doDrilldown();
}, 100);
});
Here's a modified fiddle.