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.
Related
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?
My problem is that I have a highchart in a div, using dotnethighcharts I am setting the height of the chart container div depending on the number of Y-Axis values. So what happens is the div expands and I scroll down the page to see all of the bars. This is working as intended in Firefox, but in Chrome when I select Print from the Highcharts options dropdown and exit the print preview window, the divs scroll ability breaks and I can't see the whole graph.
I have googled endlessly about this issue and have found nothing that might help. I wonder if there is a way to override the Chrome print preview functionality using javascript, so that when I click Print in the highchart the Chrome print window doesn't open.
Any ideas?
Thanks,
H
I have a Dojo Content Layout Pane on my Page and inside that there is an image which is being formed inside my Python code. The images is made from multiple small segments. Now what I have to do is to show different tooltips on different segments of the image. What I did was that I associated the image to a and each area has different tooltip. Now the problem is that when the Content Pane is resized, then it resizes the image as well but the coordinates in remain the same so the tooltips get screwed up. Is there any way to change the coordinates when the resizing is done? Because what I think is that when resizing is being done, then DOJO is handling it and the internal onresize event us not triggered.
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 was flirting with an idea of making a bookmark app which might let users bookmark only a section of a page like in this image. They will click twice on the page to mark two horizontal lines. Area between these lines will be highlighted to show the selected portion of the page.
I will be saving the y-coordinates of the two lines. That's it.
But what if:
The user opens the bookmark in a bigger or smaller screen afterwards. The webpage will re-size to fit the new width and some of the elements will definitely change their position. Then the coordinates will mismatch and wont show the original selected area.
The page content on the url changes later on.
The webpage is responsive. Then the mobile view will be completely different. It might not contain some of the elements from the original normal monitor screen.
Solution for problem 2 can be that we save a permanent copy of the page and then set coordinates on it. I have figured out this part of saving the webpage to a single html file which looks very much like the original.
And for 1 and 3 points I am thinking if it can be possible to somehow fix the width of the webpage to show against the screen width. i.e. just stretch or shrink the original page width according to the screen width. Is there a way to do this? I did some experimentation with viewport meta tag but it didn't work.
Do you guys have any idea? Anything else according to you that can go wrong? Any extra add-on?