jqPlot Cursor follow series line - jqplot

I have a line graph using jqPlot with one series and several data points across it and smoothed lines. I'm using the Cursor plugin to show crosshairs and a tooltip to show x and y points.
Is it possible to have the cross hairs follow the line on the series? So the horizontal line would fix to the y position of the line and not following the mouse. I see you can get the x/y position of each data point but not of the lines inbetween points.
Thanks

If you are using the built in smoothing options the smoothed data points are stored at:
plotObj.series[0].renderer._smoothedPlotData
with pixel locations at:
plotObj.series[0].renderer._smoothedData

Related

Kendo Chart plot lines

I have a Kendo UI scatter plot representing trade volumes over a time series. The chart works well, but now I need to add a vertical plot line on the x-axis (time) at a specific time, representing a price-fluctuation point. Is it possible to draw such lines at a specific x-axis value, along with a label or tooltip explaining the data details? I see plot bands, but that seems not useful here.
Thanks in advance for any hints/suggestions.
I could add a new line series with points at (time, 0) and (time, y), but I would like to see if there is a better/API way before I go that route.

D3.js contour plot not working (Possible bug of d3 contour)

I am plotting a d3.js contour plot. I am following the same steps as shown in the link http://bl.ocks.org/mbostock/4241134 and https://gist.github.com/mbostock/4241134. But the problem is my code is not working. The size of my 2D matrix for contour plot is dx=82 and dy=141. My code is not plotting anything instead its hanging the browser. I wonder is there any size restriction of matrix on the contour plot? Do you have any idea?
Actually its not really a bug, it's just that the data is incompatible with the colour domain you have specified. For example, the colour domain runs from 95 to 195 and your data is all 10. So there is no intersection between the data and the contours. This is the failure mode.
If you change your contour domain or your data so that they intersect it will be fine.

Timing issue on multi-line chart?

I am working on a multi-line animated chart based on [Edit: not Bostock's] example:
http://bl.ocks.org/atmccann/8966400
I want the lines to appear synchronized by the date value on the x axis. If I slow down the graph (say to duration=15000) I can clearly see that in the very early part of the graph the green line is ahead of the black line. Then the black line moves ahead of the green line. Both start and end together.
The issue is accentuated in my chart where I am plotting 20 lines. Some are clearly ahead of the others when plotting. Lines with initial y values of zero shoot way ahead of those that climb to higher y values at the start.
How can I adjust the display so both lines paint for the same date at the same time?
The technique in the bl.ocks.org example (which, btw, is not Bostock's) is animating based on the length of the line, not it's position on the y-axis. If you want to animate based on the y-axis position, you'll have to use a different technique. Especially with 20 lines, I wouldn't recommend trying to dynamically update each line if they have a lot of points. You could do that if there aren't many points, though.
A simple approach would be to add a solid (white) rectangle to the chart that covers all the graph lines. Then animate the left position and width of that rectangle to reveal the lines over time.

How to create a tooltip for multiple points in a scatterplot with d3

I have a scatterplot created with d3. The circles/points are all the same size. The grid goes from 1-10 on both x and y axes. All points have x and y values of whole numbers (no decimals).
My problem is that I frequently have multiple data points with the same coordinates. Because the points are all the same size I can't tell how many points are at a single spot.
My points have tooltips, one for each data point. So, I was thinking that it's OK to show only a single point/circle if I can show a tooltip that contains information about all points with the same x/y coordinate. I can't think of a way to do that though because the tooltips seem to be generated for a single point, not "for all points at the same coordinate", or generated dynamically.
How can I do this?
As #LarsKotthoff mentioned, aggregating my data before rendering and adding a key function to identify each aggregate were the two steps needed to get everything working properly.

Drawing varying line widths with NSBezierPath?

I would like to create a vector object that can be drawn with a pen tablet and will honor the pressure information from the pen (by increasing/decreasing line width appropriately). Now I know how to get the pressure info out of the NSEvent, but of course NSBezierPath doesn't support varying line widths.
So I'm trying to generate a Bezier path that is the outline of my line, by calculating the perpendicular lines at the ends of the curve and connecting those with the very same curve. It nearly works in my little test project for a single curve segment:
https://github.com/uliwitness/WideningBezierPathTest
but this has one big issue: The line thins to barely 2 pixels in the middle (it should only go from 32 to 8). Does anyone know how I'd adjust the control points so the two edges of the line in the curved part are at roughly the same distance ?
Anyone have ideas? Suggestions? Useful articles?
Thanks to suggestions from others I've managed to cobble something together that works. I've committed the changes to the repository, but you can go back a few revisions if you want to see the older code. Here's what I do now:
I flatten the path using bezierPathByFlatteningPath. This gives me straight line segments.
I then calculate the start and end points of the perpendicular lines at the start and end of each line segment (these lines are as long as the line size should be at this point).
I create a bezier path containing a parallelogram consisting of the two perpendicular lines plus lines connecting them. This gives a smooth transition in line widths for each segment.
Once I have the segments, I draw the ending perpendicular lines of the path, plus the sides of each segment (but not the perpendicular lines between segments) into a new bezier path, which I can then fill to draw the stroke with the desired line width variations.
If you want to use this for printing or under HiDPI, you might have to muck with the "flatness" of the bezier path, but for 1x screen display it looks fine.

Resources