I made a custom tickPositioner (under xAxis), and I want to dynamically change it when zooming in. I tried to do so by adding a setExtremes event the following way:
xAxis: {
events: {
setExtremes: function () {
$("#container").highcharts().userOptions.xAxis.tickPositioner = function() {...};
}
},
but this doesn't work.
This worked:
xAxis: {
events: {
setExtremes: function() {
$("#container").highcharts().xAxis[0].update({
tickPositioner : function () {...}
});
}
},
Related
Good evening community, I would like you to help me with this logic problem about the functions in vanilla JS.
There is a global function, inside this i made several functions, I would like to know how to access each one independently of the input order.
I have created an example, am I following the right way?
var FEGlobal = {
FEHomepage: {
Init: function () {
this.Cursor();
},
Cursor: function () {
mouseOver();
mouseOut();
},
},
FEMedia: {
Init: function () {
this.MouseOver();
this.MouseOut();
},
MouseOver: function () {},
MouseOut: function () {},
},
BEGlobal: { Init: function () {} },
};
My idea is to make a custom mouseOver / mouseOut functions, what i need to use before they are defined. So in the Cursor function () i wish to call them inside that funcion.
Cursor: function () {
const projectOriginal = document.querySelectorAll("#project__original");
projectOriginal.forEach((element) => {
element.addEventListener("mouseover", function mouseOver() {}, false);
element.addEventListener("mouseout", function mouseOut() {}, false);
});
}
I would like to add 3 buttons(Hide/Remove/Settings) to the Legend:
Hide button should have onclick event to hide series/indicator,
Remove button should have onclick event to remove(not hide) series/indicator,
Settings button should have onclick event to show popup for edit settings of the series/indicator.
Code:
legend: {
enabled: true,
useHTML:true,
labelFormatter: function () {
return this.name + ' <button onclick="indicator_hide()">Hide</button>' + '<button onclick="indicator_remove()">Remove</button>' + '<button onclick="indicator_settings()">Settings</button>';
}
Code for button
function indicator_hide(){
if(chart.series[0].visible==true){
chart.series[0].visible=false
} else{
chart.series[0].visible=true
}
}
I created a chart, see the link below.
jsFiddle
https://jsfiddle.net/PaulJaker/7bLdjs4y/1/
It is easier to connect the click events with a series if you use load chart event to add event listeners. Then it is enough to call the right methods for a series.
chart: {
events: {
load: function() {
this.legend.allItems.forEach(item => {
const btns = item.legendItem.element.children;
btns[0].addEventListener('click', () => indicator_hide(item));
btns[1].addEventListener('click', () => indicator_remove(item));
btns[2].addEventListener('click', () => indicator_settings(item));
});
document.getElementById('popupClose').addEventListener('click', function() {
this.parentElement.style.visibility = "hidden";
});
}
}
},
legend: {
enabled: true,
useHTML: true,
labelFormatter: function() {
return this.name + ' <button>Toggle</button>' +
'<button>Remove</button>' +
'<button>Settings</button>';
}
}
Live demo: https://jsfiddle.net/BlackLabel/bu53n1sc/
API Reference: https://api.highcharts.com/highcharts/chart.events.load
As per the latest document in D3 JS funnel I have click event callback as referred by the documentation. But when I'm unable to access functions from inside angular component using this.try().
Here is the implementation, don't know how to implement it.
JS Code
const options = {
chart: { bottomPinch: 1, animate: 200, height: 300 },
block: {
// dynamicHeight: true,
// dynamicSlope: true,
highlight: true,
},
events: {
click: {
block(d) {
console.log(d.label.raw);
this.try(d.label.raw);
},
},
},
tooltip: { enabled: true, }
};
const chart = new D3Funnel('#d3Funnel');
chart.draw(data, options);
})
HTML
<div id="d3Funnel"></div>
It gives the error
ERROR TypeError: this.try is not a function
at SVGPathElement.block
I don't know how to resolve this.
Reference of library
https://github.com/jakezatecky/d3-funnel
block(d) { ... } is just a shorthand for block: function(d) { ... }, which would not lexically bind this.
If you replaced your event with an arrow function, such as block: (d) => { ... }, your code would be able to resolve this as you intend.
I have made a highcharts column chart in my react application, and am now trying to add an onClick event to the chart. My aim is that when the user click a column, I can obtain the values of the X and Y axis, and then call a function from the page.
The onClick event is achieved using plotoptions, as follows:
plotOptions={{
series: {
cursor: 'pointer',
point: {
events: {
click: () => {
this.fuction.call(this, 1);
}
}
}
}
}}
The problem with this is that I can call the function, but I cannot access the values of the column.
So, I try this:
plotOptions={{
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
console.log(this);
}
}
}
}
}}
This way, I can access the values on the column, through this but cannot call the function, as this does not hold the current page object.
My question is, how can I combine the two, so I can access the value of the selected column and call the function on the page?
I have tried this:
plotOptions={{
series: {
cursor: 'pointer',
point: {
events: {
click: function (e) {
console.log(this);
console.log(e);
}
}
}
}
}}
Which gives me the onClick event, and the column, but not the current page object.
I have also tried this:
plotOptions={{
column: {
cursor: 'pointer',
point: {
events: {
click: (e) => { console.log(this); console.log(e); }
}
}
}
}}
But this also does not give me what I need.
I am sure this is not very difficult, I just cannot find it, or the correct search term...
plotOptions={{
series: {
cursor: 'pointer',
point: {
events: {
click: (e) => { console.log(this); console.log(e.point.category); console.log(e.point.y); }
}
}
}
}}
Now this contains the current state of the page, and I can access the information from the column from e.point
Have you tried this ?
click: function(e) {
console.log(
e.yAxis[0].value, e.xAxis[0].value
)
}
You may find more infos following this link :
http://api.highcharts.com/highcharts/chart.events.click
In plotOption click event is like this
JS Bin demo
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
console.log('X: ' + this.x + ', Y: ' + this.y);
//call function passing this values as arguments
}
}
}
}
},
I am using the Highcharts. I want to print charts. Now the problem is I am getting the export button in the print page also which I do not want. How do I disable/hide that button in print page?
Try this fiddle- http://jsfiddle.net/6hyfk/34/
Here's highchart code
$(function () {
$('#container').highcharts({
series: [{
data: [1, 2, 3]
}]
});
$("#b").click(function() {
var chart = $('#container').highcharts();
chart.setSize(200,500, false);
chart.print();
setTimeout(function() {
chart.setSize(600,500, false);
}, 1000);
});
});
Thanks.
You can catch the beforePrint / afterPrint events and then manipulate on SVG elements.
chart: {
events: {
beforePrint:function() {
this.exportSVGElements[0].box.hide();
this.exportSVGElements[1].hide();
},
afterPrint:function() {
this.exportSVGElements[0].box.show();
this.exportSVGElements[1].show();
}
}
},
http://jsfiddle.net/v8cxe2ww/