I am using jqplot to generate several line plots, and would like to add the highlight feature to it. In detail, once your mouse is over this line, it will highlight itself (change color). I have see this feature in bar plot (example). Is there a way to introduce this to line plot?
Here is the demo of my code.
This feature, at least to my knowledge, is not provided out of the box by the jqPlot. For this reason the 'easiest' is to add it yourself. I did something of this sort a while back. My approach was to use the jqplotMouseMove event and add the appropriate functionality there.
The idea of my approach is simple:
Get the distance of the mouse point from a line segment.
Then if it is smaller than the line's width - you found your line.
Draw the line in different colour on the highlighter's canvas (.jqplot-highlight-canvas), thus creating the highlight effect - for this canvas we need the highlighter plugin.
The working sample of the aforementioned idea is here.
PS: Thanks to Jonas Raoni Soares Silva, for the point to line distance function which saved lots of my time, and works great.
Related
I need your help!
I have to show a tooltip on the curve using d3, I already have that functionality and it does work, but now I have to show two separated tooltips on one curve.
Let me explain, I used to use this curve appearance, it is a simple d3 curve, and the tooltip works perfectly. And now need to use this curve appearance -
https://github.com/d3/d3-shape#curveLinearClosed
And I'd like to know how to show one tooltip on the bottom of the curve and a second on the top.
So far my implementation of the tooltip works only on the top, I think that happens because d3 draws the bottom line on its own.
So did anybody have a similar problem?
This is a picture how it should look like:
I do not need the code, I'd like to hear any thoughts or ideas about that.
I got a problem while using ApexChart and struggling so much on how do I could remove the one that I give 'X'?
So basically, what I want to achieve is like the light blue line that I draw.
On ApexChart, there's a specific styling for this - Curve's Stroke.
I want to use Stepline and Straight at the same time but I don't know how. So what I did is using 2 different series (dummy random data) with line and area chart type, then the first one using stepline curve and the second one is using straight.
It turned out I almost achieving what I need to do but, the problem is the 'X' blue mark.
I didn't want it like that. I want it just start a straight line after that specific last value/category/you know what I mean.
Is there any workaround for me to look? Can anyone help me?
I've been struggling about this for days and I'm getting crazy about it.
Reference: Apex Chart Demo's Docs
I'm working on a app that is based on vector data and using various boolean operations. For these boolean operation I'm using a library called clipper. Now I need to make a vector operation which I'm not sure how to do in Clipper. I have a straight line consisting of two points that always have to stay inside a closed polygon. What I mean by this is the following image. The green line is the closed polygon and the red line is the straight line. When the red line is outside the green polygon it needs to follow the contour of the green polygon.
I'm not sure how to archive this. Any suggestion on how to do this with clipper or maybe another library will be very helpful!
I don't know clipper, but I've seen examples of this using "dashed lines" around a vector image.
THe method is very simple, however.
Consider that your line is part of a "dashed line" around the border of the image.
To make it appear it only exists one line, the space between each dash has to be at least equal or greater than full_perimeter - dash_size.
In this example, the movement would be generated with an iteration over the offset where the dash is drawn to make it move around the picture.
I hope this helps, or points you in a way to solve this problem :D
I'm looking for a javascript charting library which would allow me to build an area chart with an ability to hover the portion between the two adjoining points on the graph curve. Basically like this:
Also as seen on this sample it would be really nice to smooth out the lines between points (use bezier curves instead regular straight lines).
Any help deeply appreciated.
Like #Duniyandn suggested, you can create two series and create rules about what to do with them on mouse interaction.
If you wanted a static section of red you could do it like this. e.g. http://jsfiddle.net/qXbsu/
But if you we're trying to have the highlighted section move with the mouse you could do something like this: http://jsfiddle.net/VuePw/2/#run though the matching of the smooth curves wouldn't be possible.
I use the tooltip formatter function to accomplish both of these because it's an easy proxy for a mousemove callback, not because it's the best way to do it.
I'd like to add a vertical line which will display a tooltip when hovering on it. I'd like to flag a company event this way however I can't really find a way to that with JqPlot.
Thanks in advance,
Lashus.
I think for this one you might use the approach I used to provide a line highlight option in jqPlot, details of which are in this answer. There you have the algorithm for detection when the mouse is over a line.
When you detect that the mouse just entered a line and the tooltip is not visible then build it and show it. Also do not forget to hide the tooltip when mouse moves out of the line. When implementing this part you will certainly find useful the code from this answer.
It shows how to add a custom tooltip on a stacked bar chart, but the code could be easily adopted to your needs.
PS: I assumed that the vertical line will be at some point drawn on some canvas by you (your code). If it is something else that you had on your mind saying vertical line then please explain. Otherwise good luck. :)