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... });
Related
Let me preface with saying I have bar, pie and line charts where renderEnd all works fine.
I'm trying to modify the styling on a horizontal bar chart, which I can do fine either in the callback or renderEnd and the results can be seen in the browser. The problem occurs when resizing the window, all the custom styling is removed and the chart resets.
Testing render end with a simple console.log on all my other charts, the log fires each time the window is resized, as far as I understand renderEnd should, but on my horizontal bar chart this simply isn't the case and it only gets fired when the page loads.
Here's two plunker's of a horizontal bar chart and a vertical bar chart, if you open the console and watch the height (on horizontal) and width (on vertical) you can see that renderEnd only fires on load on the horizontal chart but fires on load and each time the window is resized on the vertical chart.
If anybody could help me out with this I'd greatly appreciate it!
Horizontal Bar Chart:
http://embed.plnkr.co/ua2IGvShEt2zZeyRTZA2/
Vertical Bar Chart:
http://embed.plnkr.co/eMS2abmdegS8hArklKdY/
Thanks.
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 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?
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 div report_container which is used to display a collection of dynamically generated charts. the charts are drawn using javascript (Yahoo UI library) and they are plotted on divs which are created dynamically using javascript as well ( because the number of charts varies) when I setreport_container styles overflow to scroll, the div scrolls but the charts which were drawn does not scroll at all. Any idea how can I make the charts scroll with the rest of the content?
EDIT: a screenshot from the console .. the highlighted div is the one where one of the charts start and is created by YUI