Add/Remove nodes in a line graph in jqPlot - javascript

Is it possible to start with a plot (in jqPlot), either as a function or a list of points, and make it possible for the user to add or remove nodes on the graph? Ideally, it would keep the line/curve the same and just add another node, though with some curves that obviously won't be possible. It isn't crucial that the existing nodes stay in the same place; in fact, it is crucial that the nodes remain equidistant along the x-axis. I'm using Can someone point me in the right direction?

Related

How to draw edges on top of nodes in Vis?

I am using vis.js's network diagram to draw a flowchart. I have some arrows that I need to overlap on top of some nodes. However, the arrows get drawn underneath the nodes. Is it possible to bring the arrows to the front of the nodes or draw nodes before the arrows?
I can provide some code and screenshots if anyone asks.
Thank you all in advance.
In vis.js edges connect "central points" of nodes and the nodes' shapes are usually displayed above those points. There's no concept of z-index indeed although one can deal with that for nodes. Discussion and workaround for nodes can be found at https://github.com/almende/vis/issues/3146 (basically one can change the order of nodes and re-render, the last node is shown on top, the first on bottom etc), but I'm not aware of workarounds for edges if there's any.

Have D3 force directed graph form a specific shape?

I'm wondering if there is a way to have a D3 force graph form a specific shape. Here's what I mean. This what the graph looks like right now.
What I want is to be able to have the nodes form a shape such as this:
(ultra pro ms paint skills)
So I want all the nodes to be inside the black line, forming this shape. Is there a way to do this inside d3?
No, you can't do this directly with the D3 force layout. It doesn't allow for any additional constraints. What you can do is enforce this layout yourself in the tick handler function:
force.on("tick", function() {
// iterate over all nodes, check if they're in a position they shouldn't be in
// if so, adjust the position
});
That said, you almost certainly don't need the force layout in this case. As suggested in the comments, it would be easier to manually position the nodes along the shape that you want. Again, there's no support in D3 to do that.

Surround Highcharts points

I'm working on a project where we have some Highcharts graphs populated from database; one of them is an scatter graph and we need to surround the points placed on the outside area of the graph.
We need a graph like this but we need the area surrounding the outside points of the scatter; is there a easy way to do this with Highcharts?
We need it to work on IE11 (client's specs).
We can do it with a new polygon serie to make by getting it from codebehind or from database, but that may take too much development time and will slow down the queries. So we need to know if there is an easier way to do it via Highcharts or Javascript
Thanks in advance.
I am not very familiar with Highcharts, but i could not find such functionality in their API. However there is an easy algorithm to solve your problem.
All you need is to have an array containing the border elements and connect the points from this list like here.
Finding those points is not too hard. Compute the linear equation between two extreme points (like the one on the very top and very right). The resulting formula looks like f(x) = m*x + b
Now you check for all points within that x-range if their y-coordinate is higher than this line (or lower when doing it with the point on the very bottom). If so just add them to your border array and continue with the other extreme points.

Multiple forces in d3

Hi I have the following graph.The rectangles represent groups where the nodes inside or on the border of the rectangle are restricted to that rectangle. I am using d3 force layout to layout the nodes but then restrict them to the bounding rectangles in the tick.
What I need is,
1. One force layout to handle the nodes as they currently do
2. A second force layout that handles the rectangles in the graph, so that rectangles don't overlap with each other.
It would be an added bonus if the rectangles could also be stopped from overlapping with nodes that are outside the rectangles to avoid confusion.
Can anyone point me to an example that does something similar or code something up quickly to demonstrate how this can be achieved.
Thanks.

Draw vertical line when two lines cross in Highcharts

I have a temperature line graph, and I want to draw a red vertical line when the two temperatures (surface temp and dew point) cross. So far what I do is I draw a vertical rectangle on top of my graph at places I calculated it crosses.
It works correctly, but there are a few downsides to this :
The line kind of stands out of the graph ... we can tell I added it later and not in the graph itself;
The pixels are hardcoded, if I change the graph width it might not be good (I could probably fix this, but still)
I would like a little tooltip when I highlight a line, but since it's a simple rectangle, it just sits there and is not dynamic at all.
What would be my best option to integrate this line better un my graphs?
Thanks!
plotLines are your best way to draw the line - http://api.highcharts.com/highcharts#xAxis.plotLines
Two things:
1) The difficult part will be calculating where the lines cross. if they do not cross at a data point, which they most likely won't, there will need to be some guesswork involved, as there is no value you can retrieve from the chart to tell you the axis value where they cross.
2) if you are using separate y axes for these two series, which I assume you must be since they are completely different units and scales, then the point where the lines cross will be COMPLETELY arbitrary and meaningless, as where they cross will be strictly a matter of how the scaling for each axis is set up, and the values have no actual correlation to each other.

Categories