i am working in the d3 library and also in rickshaw. in my graph i have a tool tip which displays when hovered the graph bars. the thing is that, its getting hidden in the container when the last bar is in hovered. its getting hidden in the container. only partial tool tip is getting visible. is there any way to fix it or is there any changes to be made in CSS. here is my code:
the graph which i am trying to do is like this http://code.shutterstock.com/rickshaw/examples/lines.html . but i am putting this inside a container, so that the last tool tip is getting hidden inside the container.
Related
I have a bokeh project that looks very similar to this https://demo.bokeh.org/movies
Now I would like to make it possible to hide/unhide the column on the left.
I know how to hide it following the solution from here https://discourse.bokeh.org/t/hiding-bokeh-elements/4335/2
The problem is now where to put a button which would show the column again.
I thought of the following:
When hiding the column make another button visible which will allow to unhide the column. This is easy but adding a new widget to the layout would defeat the purpose of hiding the column since either way I would have a big button visible on the screen affecting the position of the figure. Is there some way of adding a new button widget which does not affect the whole layout?
Adding a new tool to the figure which would call the unhide the column. I am not sure though if this can be done easily.
Im having a small issue with my highcharts.
Oddly when i first view the page, the donut chart overlaps with my line chart but when i resize the window or open firebug it comes to its original position.
When i check the firebug console there are no errors related jquery or javascript.
also i have set the container width to 100% but none of the charts are becoming responsive...
Demo : http://vidznet.com/debug/
Can someone tell me why this is happening?
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... });
I'm trying to add tooltip to a chart in the following link Focus+Context via Brushing. And i was able to add the tooltip using the mouseon and mouseout event from this link. But the challenge is i cannot get the value on hovering, only the div is appearing. And the div appearing on all the parts of the area chart. I want to it to be appeared only on the edges while hovering. Someone please help me in this.
I have a table of data with some hover-activated popups. These popups are simply div elements with position: absolute and display: none initially set; a few lines of JavaScript then hide or show them based on mouse hovering. A flot line graph is attached to each popup.
This works great and fast, except for one hitch. Flot has a bug which causes the x-axis and y-axis labels to overlap at the lower-left corner when the graph is part of a popup like this. In short, the solution is to display the containing div before generating the graph.
I tried a solution in which I eliminated the initial display: none from the CSS for each popup div. I also eliminated the background-color and border style elements, effectively making these divs invisible. Then some simple jQuery generates the graphs and does the proper CSS styling for these popups (setting the background-color, border, etc.). This works, functionally. The graph labels are now correctly positioned. But it's slow. It easily triples the loading time of the page, which is unacceptable.
Simply adding display: none back into the initial CSS for the popup divs solves all the performance problems. So the jQuery code itself cannot be the bottleneck. But that of course causes the label formatting to be messed up again.
Does anybody know how to overcome this issue?
As you discovered, Flot must draw into a div that's attached to the DOM. I can't say for sure without an example, but I would guess that your slow performance is probably due to the fact that the divs, even if they have no content, are still on-screen, and so you're triggering a redraw whenever you change them.
Instead of hiding the background and border, simply absolute-position the div far off-screen, e.g. top:-9999px; left:-9999px. That way it's still in layout, so Flot can make its measurements, but the browser is smart enough not to redraw something off-screen.
I've solved the problem by just deferring the generation of each graph until the initial corresponding mouse hover event is fired. I also had to initially set the z-index of the containing divs to be -1 and then change this to 1 upon generation of the graph; otherwise the invisible div would "cover up" other page content, making it impossible to, say, click on links "behind" the div before the graph was generated.