I have a modal dialog where I show 3 fusion charts in it, but only 2 are displayed when the modal opens. To see the 3rd one we have to scroll down. Now I have a print icon and on its click I export all three graphs to create a PDF.
The code is like this (using CoffeeScript):
#primaryChartObject = getChartFromId("fusionChartsInstanceCompareCurrent");
if #primaryChartObject && #primaryChartObject.hasRendered()
#primaryChartObject.exportChart({});
#upstreamChartObject = getChartFromId("fusionChartsInstanceCompareUpstream");
if #upstreamChartObject && #upstreamChartObject.hasRendered()
#upstreamChartObject.exportChart({});
#differenceChartObject = getChartFromId("fusionChartsInstanceCompareDifference");
if #differenceChartObject && #differenceChartObject.hasRendered()
#differenceChartObject.exportChart({});
The charts start exporting, but on the modal dialog, the progress bar is shown only for the visible charts. When I scroll down, the 3rd one's progress bar is shown, but 1st one's is paused. I have to move up and down a couple of times to make sure all the graphs are exported. And then the exported pdf appear properly.
The problem is if user doesn't know about this scrolling, then he/she is never going to get the PDF of the chart. How can this be solved ?
The exporting of the charts, which are not in the viewable portion of the browser naturally does not take place as the Flash charts are not rendered.
Related
I have placed four charts in my application and one of them gets misaligned after the browser window is maximized from restore.
The chart box remains small and legends fall outside the box which never goes back to original position after maximize. The only difference in this chart is that grouped categories have been used.
Have tried in other browsers as well.
Please refer the below image for the issue.
I have a web-page that contains a table of videos and pictures, which when any one of these items is clicked, the clicked item shows in a floating pop-up display area, but currently this area shows near the top of the web-page, so is often partially off screen when the user has the web-page scrolled so that the table of videos and pictures is fully scrolled into view, and so the user has to scroll the page up to view the floating pop-up display area, away from the row item they clicked in the table, where they can edit information concerning that item.
I would rather that the pop-up display area be displayed near the top of the viewport, so that it can fully be seen without the user having to scroll it into view, and the table of videos and pictures now under the pop-up display stay where it was before the user clicked any of the items in the table.
I've seen this topic Set element to top of viewport in javascript [duplicate], but I don't want to fix the display area, as the user should be able to scroll the web-page normally, and the pop-up display area move with the rest of the elements on the page.
Once this is accomplished, I will want to make the pop-up area draggable, so the suggested solution(s) should be compatible with doing this. I plan on using How TO - Create a Draggable HTML Element rather than using a jQuery or other type library. This way I can optimize the code for the pop-up element that is the only draggable item on the page.
Thank you
I was also facing the same issue. Then I found a CSS trick which I used.
.elements:nth-last-child(-n + 3) {
// Insert CSS you want to apply
}
.elements:nth-last-child(n + 3) {
// Insert CSS you want to apply
}
It helped me achieve the desired solution. Without any change in JavaScript and View. You just have to do calculations with n number.
For reference you can use below documentation -
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child
I have one window with border layout. In center I am using panel on which loading grids based on the selection of tabs from west side. Now the problem is when I am loading grid then grids are one on top of another. And then I need to scroll down to check complete grid. I want to see grid in panel if suppose i sellect second tab, first grid should move up and second grid should come into view.
I have used many methods but not getting success.
One of the code where I am getting bit of success,
onSelectionBtnClick : function(btn){
grid = me.someGrid(headersNode);
me.gridContainer.setLoading(false);
grid.body.dom.scrollIntoView(); // This line is for view
}
Here grid is coming in view but only in debugger, once I come out from debugger It coming same as previous. Can any body suggest what I am doing wrong.
I want a image gallery similar to the design as show in fiddle example. It has been customized to look more what we are looking for but i have two issue with this right now
Popup is not aligned in the middle of the page. i tried changing few properties but that didnt work
How can i add working Next Prev button functionality to this gallery so that users dont have to click each time to view the next phone. I had looked at other galleries but each had one of the other problem when i tried to customize them.
I had tried to customize this gallery but i had same it i need to show image in a fixed box 600x300 pixel with image on left & text on right of the image.
I also tried to modify Magnific popup almost change the script to work but this also had an issue as it always start the galley from first image itself irrespective of which image users click on http://codepen.io/anon/pen/LvFxH
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... });