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
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.
The website I am building requires to have grid of images where one image is in the middle no matter how many images there are in the grid. This is in fluid layout and images are supposed to be editable by website admin and only height is fixed.
Image explanation:
I was thinking to use something as Masonry or Packery but those don't provide any centred layout options. What approach would you take to sort this out?
To approach this problem, I would have each row of images be inside of a container. Then you could absolutely position the container based upon calculations to center the "stamp."
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 am creating a web application using the jQuery Mobile framework for iPad. In my application I need to display some charts, so I am using Javascript amCharts to draw charts.
In my application, on one page, I want to display a line chart, a bar chart and a HTML table. For a time, only one element will display. Either it will be a line chart or a bar chart or an HTML table. So I created three divs and put the charts and the HTML table in each div. I show or hide the divs via a menu selection. Please look at the dummy application.
It is working perfectly in desktop browsers and Android tablets. When I test it on iPad, it is not working. It displays only the first line chart. If I change it to bar chart then it does not display the chart.
I am hiding and showing divs in javascript like this:
document.getElementById('barChartDiv').style.display='block';
document.getElementById('lineChartDiv').style.display='none';
document.getElementById('tableDiv').style.display='none';
So why does the second chart not appear on iPad? Please tell me what I am doing wrong. Is there any issue in jQuery Mobile and amCharts frameworks?
Any web link or source code would be appreciated.
Try to call chart.validateNow() after you change display style of a div.
I have a few different Google Charts that i want to put inside the sections of a jQuery accordion. The problem is that all the charts that are not inside the first part of the accordion are smaller for some reason. Something about the accordion is shrinking these charts. I do not want them to shrink. Does anyone know what I can do to keep them from shrinking?
See this example which illustrates the problem: http://jsfiddle.net/dN3LL/
Thanks!
EDIT
So from the answer provided by brandwaffle, I considered that the graphics should render before the divs are collapsed into accordion form, so I simply put the $('#accordion').accordion(); line right after the graphs are finished rendering, and it works! See the fiddle: http://jsfiddle.net/dN3LL/4/
I've had this happen to me with various different pieces of content in the past. I think the problem happens because the content is rendered in a collapsed container, so it defaults to the smallest possible size (I've seen this with content in flexible-width divs inside of the accordion as well). The best solution I can offer for an across-the-board resolution is to hook whatever google chart generation (or other content display) to the accordionchange event that jQueryUI's Accordion offers: http://jqueryui.com/demos/accordion/
If you use the accordionchange event, the Google Chart will render itself after the accordion has switched to the correct section, which should eliminate any problems you're having as a result of the chart trying to render into a squished (i.e. unopened) container. There may be a better CSS fix for this, but I haven't found one yet.
one workaround is, load chart first and then run accordion code once chart load complete or run accordion code after 1-2 sec (setTimeout)