We use Highcharts for our reports. On click of a chart, a new tab/window should open. I am able to achieve that by handling the click event in chart. But I am unable to make cursor as pointer.
Yes,
this is possible. See cursor.
Example (from that link).
Basically you set cursor option for the series:
plotOptions: {
series: {
cursor: 'pointer',
events: {
click: function() {
alert('You just clicked the graph');
}
}
}
}
If you want to make the whole chart clickable then you need to handle mouse hover/over. But then you may lose detail on where you are clicking (want to click series point but now you cant because you captured it on the "top" layer).
Related
I've created a board game website where you are supposed to guess a word and then the points are displayed on a bar chart using chartjs. Currently, when hovering over a bar, it shows the amount of points by default. What I want to do is show both the amount of points and then also a list of what words that team have guessed correctly. So, in essence, can I change the hover text on a chartjs? And if so, how?
Thanks in advance!
I think you are referring to the tooltip which is showed when hovering the data elements.
You can change the data to show leveraging on tooltip callbacks, described in the doc: https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-callbacks
plugins: {
tooltip: {
callbacks: {
label: () => 'my text'
}
}
}
I am trying to use the leaflet-draw tool for two different things:
as a "regular" tool to create new geometries
if I draw a line, I perform some calculations with turf.js, giving me points nearby.
I've set up two individual draw controls for each purpose. For the second, I have all but the draw:polyline disabled. The problem: I save my elements with the
map.on('draw:created', function(){...});
"command". But this way I (or the eventhandler, respectively :)) cant differentiate, if the line was drawn with the first or the second button. So basically i can use the draw tool either for one thing or the other. Is there a way where I can use the same tool for different applications on the same map?
Thanks for any hints or work arounds.
An alternative would be to use Leaflet-Geoman instead of Leaflet-Draw.
There you can create copies of Draw instances and add them a new shape name:
// copy a rectangle and customize its name, block, title and actions
map.pm.Toolbar.copyDrawControl('Polygon', {
name: 'PolygonCopy',
block: 'custom',
title: 'Display text on hover button',
actions: ['cancel', 'removeLastVertex', 'finish'],
});
And then you can check the shape name in the create event:
// listen to when a new layer is created
map.on('pm:create', function(e) {
console.log(e)
if(e.shape === 'Polygon'){
alert('Original Polygon')
}else if(e.shape === 'PolygonCopy'){
alert('Copy Polygon')
}
});
https://jsfiddle.net/falkedesign/r0sm9auo/
Is there any possibility of disabling the click not to further collapse the tree or close the tree. This is the example the echarts example. See this link. I am trying this since long time. The documentation is not clear. Can anybody help me out on this? I dont want the end user to click on the circles to expand or collapse.
https://echarts.apache.org/examples/en/editor.html?c=tree-radial
Just disable mouse events with silent: true.
series: [{
//...
silent: true,
//...
}]
There is a property expandAndCollapse inside series, default value is true. Set it to false which does exactly what you asked.
I want to show popup on a point when user mouse over on point in series in highcharts. I got clientx value 0 when I move the cursor on a point but when I click on a point I get correct client x and client y values. I am unable to find the solution for this. I there any way to do this? or I need to fire click event when I hover over a point to get correct client x and client y coordinates. I am using gwt .
Thanks
Write your function in
point: {
events: {
mouseOver: function () {}
}
}
refer fiddle here
I've been through the Dojo docs as well as the API and tried Google but can't find a solution to my problem, I hope anybody here can help me out.
I'm trying to create a dijit.form.select programmatically (using Dojo 1.4) and connect to the "onClick"-event of the widget.
Here's a part of my code:
var dataSelect = new dijit.form.Select({
id : "myselect",
name : "myselect",
labelAttr: "label",
labelType: "html"
},
"selectid");
dataSelect.addOption({value: "value", label: "first item label"});
dojo.connect(dataSelect, "onClick", function() {
alert("clicked!");
});
What it does: A select-box is created replacing an input-field with the ID "selectid", an option "first item label" is created. Everythings all right until here.
Then I connect to the "onClick"-event of the select, which is supposed to load more options via AJAX (but will just display an alert for testing purposes in this example).
The problem: When I click on the little arrow next to the dropdown, the event is fired (OK). But when I click on the select box itself (the area containing the option), the event is NOT fired the first time I click it (unless I clicked on the arrow before).
When I click the select box a second time (and every time after that), the event will fire!
I've tried to use "onFocus" instead of "onClick" which does work, but then the dropdown will not open when first clicked, even if I use the "openDropDown"-function (which does work when connecting to "onClick"!).
Is it me, did I run into a Dojo bug or is it a strange feature I just don't get?
Any help is appreciated.
Greetings,
Select0r
Here is a cross-browser solution:
var sizeSelect = new dijit.form.Select({
id: "sizeSelect",
name: "state",
options: size,
onChange: function(val) {
dojo.style(dojo.byId("textInput"), {"fontSize":val});
}
}, "sizeSelect");
Try to connect not to the widget itself but to it's dom node:
dojo.connect(dataSelect.domNode, "onclick", function() {
alert("clicked!");
});
Select (which extends _HasDropDown) has fancy code to handle:
mouse down on select widget
mouse move to one of the options
mouse up
Maybe that's canceling the click event.
Maybe you can connect to _loadChildren() instead.
The root cause for this issue is that the _onDropDownMouseDown method of dijit._HasDropDown will manipulate the dom node, which cause the e.target of onmousedown and onmouseup changes for the first initialization.
As we know, the onclick event will be triggered only when the target of onmousedown and onmouseup are the same target.
So in this case, the onclick event is not triggered.
It seems that in Dojo 1.5, the problem still remains.