I am creating a d3 bar chart that has a tooltip that triggers over each bar. I also want to have the tooltip trigger when the mouse is above or below the the bar not just when the mouse is truly over it. It seems like it would be easiest to create a larger rectangle with zero opacity, and then programmatically trigger the rollover on the target element. What would the best way to do this?
Related
I have a large d3 chart nearly 4000px x 9000px and I have one text box in which user gives input to search a particular node in chart.
I have used flesler's ScrollTo plugin of jQuery to scroll my screen but issue is when zoom in/out is there then it is not able to locate the given object i.e. it is not moving the svg instated it is scrolling only page.
Is there any way to scroll svg along to locate the node in center of screen?
code snippets of flesler's plugin I'm using is
$.scrollTo($(".mySelector'), 800,{queue:true,offset:{top:-100,left:-1000},margin:true});
Thanks.
I have gone through a lot of examples, but just could not find what I am looking for. I have a chart which has 54 little bar charts in it. I want to implement following zooming features:
1) By default, the chart is displayed in a svg container of size 400x400. On clicking the background of the svg container, the whole chart redraws/pops out itself to a bigger display, say 800x800, but without disturbing the other elements in the html page.
2) Each little bar chart has a separate container for itself in the svg. On clicking the bar chart, just that chart expands/pops out in a bigger display while rest of the chart is still of the same size.
How can these two features be implemented ??
Thanks in advance !
I think what you're describing is a modal div (or dialog) on top of your current page. If so, you'll need two copies of your charts. One is the original (400x400) and the other is the modal popover (800x800). Since the popover is a completely separate SVG, it can be zoomed differently (showing all 54 little bar charts or one bar chart).
Popover
The popover should be clipped so, if you're zooming to show one bar chart, the others will not be visible. You can refine it so when one bar chart is clicked, the popover only draws one bar chart at a time.
The popover can be a simple div with a high z-order or a dialog. Here's a jQuery dialog. There are many.
Click handlers
You also need click handlers on each chart group the the main SVG group. Alternatively, you could have one click handler for all the bar charts and calculate when you are over the background or an individual bar chart.
g.on('click' , function(d){ ...do the zoom... });
We're trying to come up with a way to trigger the tool-tip events on jquery charts such as this one from rickshaw by controlling the event from a jquery ui slider along the bottom (x) axis.
Therefore as a user slides the slider along the axis, the chart behaves as though the mouse was being dragged left to right across it. To simplify things the slider and the chart would be the same width. Can anyone suggest a way i might be able to make this happen in jquery/javascript?
Thanks!
For example; if I had a flot canvas graph and I wanted to be able to view a closeup of one of the areas, I want to be able to zoom into a specific area and have a scrollbar appear for horizontal and vertical panning so every section can be viewed. Is this possible?
You may want to use the zoom CSS property. Here is a little example of it in action.
As for the scroll bars, you could try placing the zoomed element within a parent which has overflow: scroll; set.
I hope this helps.
Anything is possible, but flot doesn't support that by itself. Your best bet would be to use the panning and zooming functions built into flot (via the navigate plugin), but then for the scrollbars, you might have to overlay some fake scrollbars (perhaps using a div with overflow:scroll, as #Wolfy87 suggested) and hook them up to the flot graph.
Flot triggers plotpan and plotzoom events when the graph has moved, so you would use them to keep your scrollbars in sync.
I haven't seen anyone do this before, so I can't point you towards an example. But the code doesn't seem unreasonable to put together.
Ok this question may sound a bit convoluted, or at least esoteric, but I'll try my best to elucidate.
In my charting application I have a div which is used as a popup tool tip. This tooltip appears when you hover over a datapoint and gives you some information. I used z-index to make the tooltip render above the underlying chart div. However, the underlying chart has interactivity with mouse events, so is it somehow possible to have the underlying chart register mouse events even though the mouse is hovering over the tooltip?
You could capture the mouse event, taking note of the coordinates, then add these coordinates to the real position of the tooltip relative to the page. Then you can re-fire a fake MouseEvent using these coordinates, minus the coordinates of the underlying div element, at the underlying element.
While I agree with the answer regarding capturing the mouse events, I think there is a workaround. Simply position the tooltip div a few pixels off of the mouse cursor. That way it never appears underneath the mouse cursor and it would not be clickable.
I do not know if this is practical or not in your situation, but you could append the tooltip as a child element to the data point. That way it is still part of the chart.
Actually, on browsers that support css3, pointer-events is the simplest solution. :)