Is it possible to always show the values of the signals in the legend even when the mouse is not over the figure?
I think values appearing and disappearing when the mouse is not over the figure are a bit annoying and I would like to come up with a solution which:
Until the user goes over the figure with the mouse, the legend shows signal names and their values at x = 0
While the user moves the mouse on the figure the legend should work as usual (i.e. being interactive)
When the mouse is no longer over the figure the legend shows last values pointed
Would it be possible to get something like this? If yes, how?
EDIT: I found out there are callbacks sensitive to mouse events. In particular, highlightCallback and unhighlightCallback may be used to obtain what I want. Unfortunately, I do not find any example that shows how to change what's shown in the legend, I've only found examples which add HTML below the figure, like in this callback example.
The numbers in the legend reflect the current selection. If there's no selection, there will be no numbers. So try calling setSelection in unhighlightCallback.
Alternatively, use the new legendFormatter option. (Until v2 is released, this will require you to build dygraphs from HEAD.)
Related
I've developed an application to support drawing something like lines or points and adding some tags on the map using OpenLayers 3.
Many existing functions in OL3 enable me to draw and modify something.
But, when I select something I drew, I felt the need of a snapping function to make me select them more easily.
Unfortunately, current OL3 supports the snapping only for the drawing and modifying, like below:
var draw = ol.interaction.Draw({features: some_features});
var snap = ol.interaction.Snap({featrues: some_features});
map.addInteraction(draw);
map.addInteraction(snap);
Actually, I found that the snapping works by replacing ol.interaction.Draw to ol.interaction.Select, because I can select something I draw if I clicked points apart of them. But, the mouse pointer did not snap to them.
So, How can I implement select interaction with snapping function in OL3?
Added some codes to explain details.
See the link: https://jsfiddle.net/keltpower0/sej6z2q4/1/
After you draw some lines, you should click the very point where lines are placed if you select those lines.
I want to more easily select those lines with snapping function, like, if I move the mouse pointer near lines, the pointer "automatically" snap to the lines
Select with snapping sounds a bit weird to me. What about using the hitTolerance option of the select interaction ?
I was developing a solution for another question here on Stack Overflow (see Highcharts : selection) that has some simple slider elements (using input type="range") to change the categories shown in a column chart. Whenever the user changes the range in either slider element, the chart is redrawn using setExtremes().
I noticed that, in some instances, some of the x-axis labels disappeared, even when I moved the sliders back to their original positions. I've tinkered with a number of x-axis settings, including minPadding, startOnTick, and tickInterval, and none of them seem to solve "The Case of the Missing Labels."
The first screenshot below shows the chart when it's first loaded. All of the x-axis labels are present.
The second screenshot below shows the chart when I change one of the sliders. Some of the x-axis labels are now missing. It looks like they're being staggered.
Here's where the plot thickens: if I adjust the sliders to some other values, all of the labels come back:
Here's the fiddle I developed so you can see a live example of this behavior: https://jsfiddle.net/brightmatrix/uvat8u05/
I'm curious to know why this is happening, and what settings I could use to ensure that all x-axis labels are shown, regardless of what values the user chooses in the sliders.
Thank you very much!
Update: The responses from both Max Uppenkamp and Grzegorz Blachliński are valid and helpful solutions. What I also discovered by chance was that explicitly setting the slider values to integers using parseInt() solved this issue as well. It also helps in comparing both values to make sure a user doesn't choose an end date that is earlier than the start date.
This seems to be intended behavior of Highcharts, however inconsistent it may be.
According to this this should be fixed in current versions of Highcharts, but you might as well try this tick formatter solution.
Edit: If the above doesn't work for you, you might be able to solve the issue by rotating your labels:
http://www.highcharts.com/demo/column-rotated-labels/grid
I am trying to make a visualization using d3 which is basically a scatter plot with links between the points. (I have attached a .gif of the existing java based visualization)
The points can be added by double clicking other points. On hovering over a point, I wish to have links drawn between the point and all its partners on screen.
I have the part where on double clicking a node, its partners are added. What I need help with is drawing the links (primarily I am not able to understand how can I get the x1,y1,x2,y2 values required to draw the links).
This is what my DOM looks like:
I have seen a lot of examples online but somehow not able to figure the solution - if anyone could link me to a similar visualization or share a fiddle/ give some pointers on how this can be achieved I would be really grateful.
First the simple stuff: here are 2 mechanisms for drawing the lines.
Next, in terms of the data representation of the lines, check out how links are typically drawn when working with the force directed layout.
Important: Do not get distracted by the existence of the force layout in this example and by the fact that the force layout works with these links (which are passed into it by calling force.links(links)). That aspect of the example probably doesn't have an equivalent in what you're trying to achieve.
However, do notice how the links array is constructed —— with each element of the array being an object with pointers to source and target datums. In your case, you'll want to work with a similar links array, where source is the node under the mouse and target is a node that's connected to it. So you'll end up with an array of links who all have the same source datum but unique target datums.
You can then bind the links array (via the usual .data() method) to a d3 selection of line or path elements. Once you bind, you can use the usual enter, update, exit pattern to append, update and remove (on mouse out) the drawn lines.
Given a source and target datums, you can calculate the x and y of the endpoints in the same way you currently calculate the translation of each <g> element, presumably using a d3 scale.
I am working on a website that uses OpenLayers to draw a map and add layers of information on top of it. Everything works fine but one thing.
When I add a new layer of information, I want it to be on top of the other layers, but when add a layer of information before, I want to other layers to be on top.
My point is: The last clicked should be on top.
Right now, when I want to set the visibility of the layer to yes, this is was is triggered:
myLayer.setVisibility(true);
map.setLayerIndex(myLayer, 700);
I tried replacing the 700 by a really high value and it changed nothing. I also tried this:
map.raiseLayer(myLayer, map.layers.length);
But nothing seems to work. The layer still appears under the other layers...
Please if you have an idea, tell me.
Thanks in advance for the help!
PS: This is the website (not sure if you can see it):
http://labqc.wul.qc.ec.gc.ca/MetViewer/
To test, you have to select a layer on the left (images will be shown) then you click the (+) icon at the top-right to select the layer, and you add, let's say BV - Canada. Polygons will appear under the image insteaf of on top, I want the reverse situation.
.
You need to explicitly request that the layer redraws itself, after you have used the raiseLayer or setLayerIndex functions, as these functions do not automatically trigger a redraw: see http://trac.osgeo.org/openlayers/browser/trunk/openlayers/lib/OpenLayers/Map.js. A simple
this.redraw();
or
map.layers[layerIndex].redraw();
depending on where you are handling this from, should be enough.
So I am trying to devise a way to create a nifty chart in which the user can zoom. I want to try to create an effect that as the user zooms, the data will become more granular. For example, say we are looking at a count on a date/time.
when you're at default zoom, which is say 3 months, you will see 1 data point every 24 hours. I am trying to get it as you zoom in, and see a smaller chunk for that data to get more granular. Like if you're looking at a day, each hour will get its own data point.
Do you all think it's possible to achieve an effect like this using Jquery Flot? I have all of the data broken down into hours at the beginning, it's just a matter of calculating how much of it should be shown.
I already have the zoom functionality working, but just need to figure out how to make the data change as well.
Thanks!
Flot won't do this automatically; you would have to register a callback on zoom that iterates over the original array to pick out, i.e. every nth sample, then redraws the plot using the results.