jqplot line - tooltip - javascript

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. :)

Related

Show two tooltips on d3.curveLinearClosed?

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.

How to use multiple Curve's Stroke style at The Same Time - ApexChart

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

How Cubism.js library works

I am very curious of how tooltip in Cubism.js works. http://square.github.io/cubism/
Since i am quite new to javascript, I will appreciate if someone gives me any hint. I am really interested in making tooltip in which data value shows by hovering cursor around the graph.
I have seen the library but could not find anything regarding the tooltip..
Thank you so much
The tooltips showing on the graph itself there are just spans above the canvas showing the graph.
The axis labels at the top is built using svg.

Highcharts Polar Chart - Make whole segment clickable / Change position of labels

I'm currently working on a Polar Chart that sits on top of the Google Map API. When you click a segment it zooms in, the polar chart disappears, and it shows the individual points within that segment. Here's a preview of it so far:
Everything works as expected from a technical point of view, I just need to make a couple of modifications to make it more useable:
1) Is it possible to get it so a user can click anywhere within the segment to trigger the next stage. At the moment you have to click the blue areas meaning it's quite tricky to click the smaller portions, especially when they're overlaid with labels.
2) In the example above, you can see the y-axis labels are all a bit squashed when nearer the centre. Ideally they'd be centred within the middle of the segment. Is it possible to position them in the centre of each segment?
Any help appreciated on this. I've gone through pretty much every option in the documentation so am suspecting I need to go one step further and maybe look at modifying the DOM directly.
Thanks in advance :)

jqplot highlighter a line when mouse is over it

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.

Categories

Resources