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
}
}
}
}
},
Related
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
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 () {...}
});
}
},
I would like to add a label to a link by doing a doubleclick on the link. So this is my attempt:
paper.on({
'cell:pointerdblclick': function(cellView, event, x, y){
if (cellView.model.isLink()) {
cellView.model.label(0, {
position: .5,
attrs: {
rect: { fill: 'white' },
text: { text: 'my label' }
}
});
}
},
});
The problem is, that by doing a doubleclick there is also a vertex beeing created at the same time. How can I prevent that?
Or what would be another simple way to let users add a label for a link?
As shown in the docs (http://jointjs.com/api#joint.dia.LinkView:addVertex) just add this part to joint.dia.Paper:
interactive: function(cellView) {
if (cellView.model instanceof joint.dia.Link) {
// Disable the default vertex add functionality on pointerdown.
return { vertexAdd: false };
}
return true;
}
I have an HighCharts line plot in which the user can click points using this code:
plotOptions: {
series: {
point: {
events: {
click: function(event) {
// some processing
}
...
I want to change the color of the selected point.
I know that I could write :
marker: {
states: {
select: {
fillColor: 'red',
...
But, in my case, I really need to do this inside click, How can I do it ?
You can always use the update function for that:
plotOptions:{
series:{
marker:{
states:{
select:{
lineColor:'red',
fillColor:'red'
}
}
},
point:
{
events:{
click: function(){
this.setState("select");
this.update({
marker:{
fillColor:'red',
lineColor:'red',
}
})
}
}
}
}
},
When this refers to the point the user clicked.
As you can see, I composed a custom "select" state with some custom properties, and applied this state when user clicks a point. I also used update in order to change the point marker attributes, so I make sure the point reserves the new attributes after the state is no longer active:
http://jsfiddle.net/gprevqdf/2/
I'm slowly trying to slug my way through learning OOJS by building an accordion toggle and I'm having a hard time.
EDIT: Slowly getting there. I've got the toggle functioning how I want to. Unfortunately I'm calling the add / remove class incorrectly(?).
I'm currently calling it like:
accordion.ELEMENTS.TRIGGER.click(function() {
if ($(this).parent().hasClass(accordion.CLASSES.OPEN)){
$(this).parent().removeClass('open')
}
else {
$(this).parent().addClass('open');
}
});
And I would rather call it via the EVENTS.OPEN & EVENTS.CLOSE or even throw both of this into the EVENTS.BIND and have BIND sort out whether or not if it is open or not :
Here's a JSFiddle, I'm trying to bind the EVENTS.OPEN and EVENTS.CLOSE instead of trying to find the parents.
var accordion = {
ELEMENTS: {
HOME: $('.js-accordion-toggle'),
TRIGGER: $('.js-accordion-trigger'),
PANEL: $('.js-accordion-panel')
},
CLASSES: {
OPEN: 'open'
},
EVENTS: {
OPEN: function() {
if (ELEMENTS.HOME.hasClass(accordion.CLASSES.OPEN)) {
console.log(this + "open");
ELEMENTS.HOME.addClass(accordion.CLASSES.OPEN);
}
else {
console.log("this should close");
this.close();
}
},
CLOSE: function() {
accordion.ELEMENTS.HOME.removeClass(accordion.CLASSES.OPEN);
},
//BIND: function() {
// accordion.ELEMENTS.HOME.each(function() {
// accordion.EVENTS.OPEN();
// });
//}
},
fn: {
attachEvents: function() {
accordion.ELEMENTS.TRIGGER.click(function() {
console.log(this);
if ($(this).parent().hasClass(accordion.CLASSES.OPEN)){
$(this).parent().removeClass('open')
}
else {
$(this).parent().addClass('open');
}
});
}
},
init: function() {
accordion.fn.attachEvents();
}
}
accordion.init();
I managed to get your original fiddle to work by invoking accordion.init() after your object definition. I also had to replace your line 37 with accordion.ELEMENTS.PANEL.addClass(accordion.CLASSES.OPEN); to get rid of some undefined object error.
As for your new codes, you can simplify your codes by removing the if..else statement in line 19 and 22 with jQuery.toggleClass, to make it looks like:
$(this).closest(toggleHome).toggleClass(toggleClass);