I'm using the drag-able line chart from the FusionCharts PowerCharts package.
I need to get the data of the graph and send it to server-side for further processing after user has moved a draggable point. This is easy to do with the Submit-button built in to the graph but I want this to happen without the user having to click the Submit button.
Based on the documentation (especially on the the events) it seems that the chart will not fire any events when the user has moved a point in the graph.
So now I'm trying to figure out the best way to get notified of the user-made changes to the graph?
One option would be to periodically call a JS function that would get the graph's data and check if it has changed since the last check. However this feels pretty ugly and inefficient and I don't currently know how to implement the continuous polling in JS.
I'm now leaning towards just to listening for a mouse up event on the element where the graph is and then check changes to previous state of the graph. This should work although the user will probably often click on the graph without actually dragging a point in it.
Am I missing some other obvious solutions here?
There are a couple of things I would like to put forward before we reach solution:
Polling is always a bad idea. And polling at a short interval is worse. However, if you do not need to react spontaneously on drag of the data-point, a high-interval polling will do. For your information, polling is done on JavaScript either by using setInterval function or by using recursive setTimeout.
In case you want to track mouse events, keep a note that in case you are rendering Flash charts, you need to ensure that the wMode (window mode) parameter of the chart is NOT set to "window". In "window" wMode, the browser does not track mouse-events when hovered over the chart. To change wMode of a chart, ensure you execute chartInstance.setTransparent(false) or chartInstance.setTransparent(true) before rendering the chart.
The mouse-event method that you have planned will not help you since you will not know whether user had clicked on the data-point. Hence this method is ruled out.
Thus, you are left with polling. :(
Update (after the first comment by Janne):
Using a combination of both to check for data change when drag event occurs on chart is the right solution.
Related
I am building a plugin for Grafana. In this plugin, I load a model with a .fbx extension, using threejs, orbitcontrols and FBXLoader. The plugin gets data from Grafana and uses this to update the Roll, Pitch and Yaw of the model.
However, because I have added controls, it is possible to zoom in/zoom out or to look at the model from a different angle.
Now I want to create a button that gets the model back to its initial orientation when it is clicked on. I think I have to make a button that calls a function backToInitial() or something, and then this function has to change the position and rotation of the camera (so not from the model itself?) to its initial state. I have tried multiple things, but nothing has worked yet. I am having the most trouble with putting the button in the right place and adding an event listener that reacts when the button is clicked (because the html and js are in separate files).
Does anyone know if this idea is logical and how to do this?
Thanks a lot in advance!
I am wondering about how async actions like animations work when you do actions like delete an item, and so came up with this sort of thought process and would like feedback to see if it makes sense from an industry best practice perspective.
There are two layers:
The reactive layer.
The rendering layer.
The reactive layer occurs instantly and can be done with traditional event dispatching.
This is where you create and delete data and it all happens instantaneously.
The state machine gets notified of these instant reactive changes.
Then the state machine "transitions". This process occurs over a period of time, assuming there are some async things that occur (animations, network requests, etc.). This is what people mean when they say "action queue".
Then the rendering layer pics up stuff off the action queue and renders it. This way there is sort of a delayed reaction to the underlying instant reactive layer.
My question is if the reactive layer needs to handle async as well. For example, deleting something.
Say an item is deleted, and you want to animate it out. There are a few ways to do this:
Queue up a delete action, then animate it out first. When animation is complete, then do the actual delete. If animation is interrupted (cancel the delete), then the delete is never performed.
Delete the item instantly (reactive layer). The animation layer keeps a reference to the item around, so can still do its animation even though from the global place it is deleted. If the animation is cancelled, then you would have to do an "undo" sort of thing which is more complex.
If (1) is the way to go, then there is no reactive layer, and everything is implemented with a sort of action queue in mind. This makes it harder to make reusable code because everything is tied to the action-queue idea.
If (2) is the way to go, then there are two copies of the data, the global copy, and the local copy, which is kept in sync asynchronously. This makes it easier to have reusable code but makes it more complicated to reason about.
Wondering if any of this makes sense, and if any of these approaches is better practice in the industry (or if there is an alternative I didn't address that makes more sense).
Put another way, there are two main ways to do it:
Eager: Delete it now, okay everyone we've deleted it, time to come back inside. And wait for everything to trinkle back in to call it "done".
Cautious: Announce "we are going to delete it", then wait til everything is done and comes back inside to actually do the delete.
Wondering how games and apps and such handle this sort of thing.
Update
After thinking about it a different way, maybe it would be more like the swaying of kelp in the ocean:
https://www.youtube.com/watch?v=gIeLCzR8EgA
By that I mean, there is a base layer that is immediate (does the create/delete), then there are some intermediate layers with copies of all the transactions that occurred (create/delete), that the rendering layer uses to animate create/delete. So the original data is always in sync, but the rendering layer uses a sort of older version of the data with a chain of all the changes taking place.
reactive layer -> transaction layer -> rendering layer.
Another option is flagging as delete, then only after animations are complete actually do the delete, but that seems hacky.
Update
Another version:
Reactive version
Always has the latest data. (a)
Rendering version
Has the last data (b), plus a chain of changes leading to (a).
As rendering completes, it applies the changes to (b), so eventually it is like (a).
from my experiece as Unity Game Developer the right decision is in the middle, as for the physics in game engine are approximated because the sensation of a things semi-perfect is pretty like a perfect one.
The explanation is because the more realistic and real-life like is your goal the more you need resources, not only CPU and GPU but cash too.
after this strange preamble I quote for the flag options, the method applicated is not much different than a normal Garbade Collector, you mark a no more usefull item and when the Garbage collector come he free the ram space used by this object, so this new space can be reused.
The same process is done by a lot of engine, and the destroy operation appens before the rendering calculations.
The final goal is always to reach a good in-between solution.
There is the possibility to force the instant destruction in every moment of the engine computation process, but this solution is always deprecated.
With the animation the way u typically use is to Destroy (setting flag to be destructed) at the end of the animation or in the last few frames.
At least you can use some tricks to make the fade more enjoyable (like particles).
The real problem is when you have to destroy object over the net (multiplayer games), in this case you have to establish what is the more attendible machine and pick that to calculate physics and interaction, this machine is always the server or the at least the host(depending on the game type).
I know that the question was marked as javascript question, but i couldn't resist to answer.
I enclose also a page from the unity documentation about the Destruct function were explain how they menage to remove item from a game enviroment:
https://docs.unity3d.com/ScriptReference/Object.Destroy.html
Have a nice day! and good coding.
I'm doing a project on CodeCademy and I want to know how can I make a <canvas> that takes user input to draw anything that the user wants to draw.
I have seen people do this but it draws like as if it is creating lines.
To give an example, whenever I tap anywhere in that the user have made it creates a line from the last point where I had left drawing to where I have tapped.
I do not want this.
Also, will I need to enable this by giving each pixel personal attention for precision?
If yes, then how do I make a loop for that?
Sorry for a lot of questions in a question.
EDIT : I also want the user to be able to delete what he/she made by one click at a button. And please explain the way each thing works in the code except for general syntax.
What you need to do is to "record" all of the mouse events as a user interacts with the canvas. When a mouse down event is fired, create an array containing the initial x,y coordinates. When a mouse move event is fired, append the x,y coordinates of that to the array (testing to make sure they're different to the last one). Finally when the mouse up event is fired you can "store" that array into another array of undo's.
Within your requestAnimationFrame function you need to enumerate through all of these arrays and draw them on screen. To improve performance you only need to keep 6 array's worth of plots and can buffer everything prior to that as a static element.
To really improve performance, rather than recording mouse move, you need to fire off a record function every 100ms or so to grab the current position of the mouse cursor.
The link above gives you a decent starting point, but it's not a 5 minute code job :)
I have made a small app that allows the user to create rectangles, and drag them around.
The implementational details are that the "green" workspace area you see is a Marionette CollectionView
and when you are drawing boxes, you're essentially instantiating new rectangle models and rendering views for them. HTML-wise, the rectangles are child nodes of #workspace.
Here's a working demo (on dropbox since jsfiddle keeps failing me all the time)
From what I know,in order to avoid the creation of a new rectangle while I'm moving around an already existing one, I need to stopPropagation of the mousedown/mousemove/mouseup events (That's what I'm using in the first place to determine if the user is dragging, to acquire mouse pointer position, calculate rectangle properties, and append the rectangle view on mouseup)
The problem is that although I stopPropagation for mousedown/mousemove/mouseup, apparently the mouseup event doesn't fire and the rectangle keeps following the cursor even after the mouse button has been released.
Also dragging a rectangle around is not as smooth as I would expect, but a bit glitchy. I'm suspecting that there must be either something horrible that I've done (most likely), or a conflict between how I'm handling events and how jQuery and jQuery UI are. (I need to comply, but I don't know how).
Please enlighten me!
In the end I've decided to write a short jQuery UI plugin that would take care of all the calculations and would allow me better control over event handling.
For more information about what I ended up doing check this post
This may be a bit obscure, but I'm developing a viewer app that chunks up a large dataset and then allows it to be viewed using dygraphs, where new data chunks are loaded on either side as you pan through it.
The trouble is, when you update the graph as it's being panned, it seems to lose its y-axis range. You can see this on the dynamic update demo on the official site:
http://dygraphs.com/tests/dynamic-update.html
If you shift-drag to pan, you'll see the plot (and y-axis) disappear as new data is added. To prove the error, run this in the Chrome console, and you'll see [ NaN, NaN ] output as the plot disappears:
window.setInterval(function() { console.log(window.g.yAxisRange()); }, 200);
Now, there would be various workarounds involving timers, but ultimately this seems like a bug in the dygraphs library itself. Is there an easy way to patch in a fix? Alternatively, if there's a way to tell when a pan is in progress, I could simply avoid altering the data set until I know that the user is not in the middle of a pan—but there's no official callback or flag for this, and it looks like the internal isPanning flag has been carefully hidden on a local-scope context object, where it's safe from my prying eyes.
What's the quickest way to patch or monkey-patch this problem?
This was a bug in dygraphs which is now fixed. If you download the latest version (either from github or dygraphs.com), you'll no longer have this issue.
If you want the gory details, here's the fix:
https://github.com/danvk/dygraphs/commit/97583b90be3e80c95654d010db8a4b3f8813bb7a
The panning code was storing data in objects that didn't belong to it, and when updateOptions() got called, those objects were destroyed and chaos ensued.