I'm making a line chart in oCanvas, and I need to show the data of a point of the line, when the user hovers that point with his mouse! Is there like a built-in function for it do it itself, or do I have to make it myself? (I didn't find any useful info on the docs section of the website, and that's why I came here, just in case someone has done it before me and knows how to do it!). I have the data I need to display when the user hovers the point, I just can't get find a hover function. After that I need to show something like a tooltip, that's gonna contain the data. Thank you very much for your help, it is really useful to me! Here's the website: http://ocanvas.org/
oCanvas is a general purpose library, so there is no built-in feature for that. To make hover work, you need to listen to events (mouseenter and mouseleave): http://ocanvas.org/docs/Events/Mouse
When you detect mouseenter you will need to show the tooltip object in the correct position. When you later detect mouseleave you will need to hide the tooltip.
Related
I'm trying to have the data for the box under the mouse appear on hover like the 2D charts. There do not seem to be any interactive examples that I could find showing this and figuring it out from the API is eluding me. I'd also like to get the box that is clicked on by the mouse but the onMouseClick event added to the box series 3D that I tried as a starting point does not seem to do anything.
unfortunately BoxSeries3D or 3D series in general do not support any user interactions at the time. The same event methods as for 2D exist, but they don't do anything.
The development of new or missing LCJS features is adjusted in real time according to existing user needs, so it is a good thing that you asked this. If you are a licensed user, or would be interested in getting closer to the development to voice your requirements, please contact us
Trying to make it so few axis would turn off by default (onLoad). I thought about using AmCharts events on ready.
But I cant find any documentation for ether an event toggleOff or what so. Nor something that AmCharts would have via default. The only thing that crossed my mind was, making a custom legend item that would toggle off on, but that's not efficient.
If you want to show/hide axis results on creation, use someAxis.hidden = true;, if you want to hide whole graph use - showGraph(YourGraph), hideGraph(YourGraph) there is no need to add event listeners, unless your doing some kind of complex check, then go ahead, but hidden = true should do fine in most case scenarios, I am pretty sure you can all ways update it anyways and then validate Data.
I'm trying to figure out what is the best way to begin creating an effect like (https://howifight.53.com) where the background is scrollable/draggable in all directions.
I know the technology behind this is pixi.js however, I can't seem to dig out how this effect is achieved. Any pointers in a good direction would be awesome.
First, you need to set up the page and styles.
You need a containing element to contain the HTML you're moving around (using overflow:hidden). Then you need an element within that to actually move around with JavaScript.
Then you need to implement some drag/drop functionality. Capture mousedown, then capture mousemove and update on each requestAnimationFrame, then stop dragging with mouseup is triggered.
That's a very basic overview, but I've mocked up an example for you to look at: jsFiddle. Feel free to ask any questions.
I'm trying to do a menu of sorts with a d3.js treemap. It mostly works, but I'm having a few glitches that I can't pinpoint.
Basically, sometimes my chart doesn't zoom correctly and instead of seeing the children take the whole SVG area, they show up "unzoomed".
I suspect it must have something to do with the animation's timing vs. some data manipulation for hiding/showing the different nodes, but can't actually figure it out. Other thing I thought might be borking up the behavior relates to the click events being registered by both "parent" and "children" nodes.
I have a similar example setup in JSBIN.
So, I was wondering how I could register/unregister click events in the parent/child nodes on zoom - if that's even the problem - and also if there was a simpler or less-error prone way to change the nodes' visibility.
Any help is welcome!
Well, this might be a bit unorthodox, but I found a way to overcome this.
Basically, instead of trying to mess around with event registering/unregistering, I simply ran the zoom only if the click wasn't from the node at the current zoom level.
So, in my zoom function, I wrapped the zoom handling in an if check:
function zoom(d) {
if(node!=d){
// the rest remains the same
}
}
Either way, I still think that this was happening due to the source elements where the click events were coming from being overlapped in the SVG area - simply put, the click event was being triggered by several overlapping elements, being the first (topmost) in the SVG tree order triggered inadvertently.
Here's a working version.
Hope this helps someone else!
EDIT: This solution isn't perfect, though. Now sometimes the click just doesn't do anything - But it's better than borking the UI. If anyone has other ideas, they're welcome.
I'm working on updating data dynamically with a click while maintaining a mouseover scrubber to highlight (i.e. append) the data to text elements. I am able to get the initial data and scrubber to work based on this helpful tutorial: http://www.d3noob.org/2014/07/my-favourite-tooltip-method-for-line.html.
My next step was to update my data (i.e. paths and axis) based on a button click. I used this tutorial: http://www.d3noob.org/2013/02/update-d3js-data-dynamically-button.html. However, I am only able to update the paths and axis but the mouseover event is till capturing the old data.
Maybe I still haven't fully grasped the idea of enter, update, exit? Anyone know how to update the mouseover scrubber when the path elements update via the mouse click?
On D3js's website there are plenty of tutorials that explain very clearly how enter, update,and exit work. Personally I prefer this one.
Hope it helps.