When my iframe's onReadyevent is fired, I draw a flot graph in it (the iframe is inside an ext component). But the graph gets drawn with the wrong spacing (labels are in the wrong place - either to far away from the axis or on the wrong row, both causing those annoying scroll bars to show up). However, the graph redraws itself correctly with the same data whenever the onWindowResize event is fired.
Could something happen AFTER the onReady event that changes the size of the iframe (making the flot graph suddenly the wrong size)? Why would the graph draw incorrectly for the onReady event and not for the onWindowResize event?
I don't think this has anything to do with flot (a JS charting library that works on jQuery) itself...
Could you use onLoad?
Are there images [set without explict width and heights] that could be loading after onReady causing the dimensions to change?
Related
I am working with charts that must resize dynamically. On calling the chart.setSize(containerWidth, containerHeight, boolean) method everything seems to resize appropriately except the svg element "highcharts-series-group". This element seems to remain fixed at the size that it had when the chart was created. The end result is that the parts of the graph that are outside of its "view box" are hidden.
Below are two images showing demonstrating this:
1: I minimized the screen for the initial creation of the chart
2: In the second image I have fully expended the browser further and applied the chart.resize() method which seems to work except as the image shows the "highcharts-series-group" svg element of the graph has not changed with this resulting in most of the group being hidden as it resizes beyond the "highcharts-series-group" boundaries.
Am I missing something?
EXTRA INFO:
The only work around I have managed right now for this is to destroy the chart and to recreate it whenever the window resize event is triggered.
This would be all good except this gives a bad user experience as the chart "blinks" when it is destroyed and then created.
The issue was the version. My organization was using version 2.0.2. Just updated to the latest (5.0.5) and the issue vanishes.
I wrote this script, and when I move the slider, the squares should instantly resize. They dont. It takes a few seconds. Any ideas?
Here's a link to my code: code on github gist. . Why does it delay?
You should add paper.view.draw() after you resize the squares so paper will update the canvas. It's redrawing internally but not updating the canvas.
There might be an issue with using on("change") as well - see this issue: onchange event on input range not triggering
I'm using the UI-Calendar directive for Full Calendar and I have some resizing issues. The div that the calendar is in can change size based on an event which changes the div's class and thereby it's size. When this happens, the calendar redraws incorrectly. I can detect when the trigger occurs, but this seems to be inside the digest loop, i.e. before the element has actually changed sizes, so telling fullcalendar to redraw at this point is not helping.
Neither does jQuery.resize seem to fire (either by using angular's jqlite or the real jQuery). BTW, window resize does fire.
Currently, I'm solving it with a a $timeout every 100ms to check if the size has changed, which is a rather gross hack.
How can i either get notified when a div has resized or hook into the end of the digest loop, so that I see the size change reflected?
The resize event only fires when it's bound to the window (except for IE, where you can bind it to any HTML element). Here, more about that.
Checkout http://marcj.github.io/css-element-queries/ for an efficient solution.
I have some charts/graphs that I'm using the google visualization api to display. Initially i have set the display of their container to none. Once the user clicks a button I use javascript to make the container's display property to block. I'm seeing two strange behaviors when I do this
When I do it this way, the charts display improperly( they are smaller in size which causes some of the text labels to run over each other or off the chart). However, if I don't turn the display property to none initially then they work just fine.
When the charts are messed up and I press F12 (either on ie or chrome) to open the inspector, these charts magically redraw themselves to the proper size again.
Is there a way to either fix the 1st issue or somehow use javascript to emulate the redraw that is happening when I open the inspectors?
You can try following options:
1) Change your container div's display property to '' (empty parenthesis) instead of block
OR
2) After you change the display property to block, force the window resize event.
You could use the jQuery resize() method, like this:
$(window).resize();
Drawing charts inside hidden divs causes the Visualization API's dimension detection algorithms to break, which is why your charts are messed up. The fix is to draw the charts while the divs are visible, then hide the divs after the charts have drawn. You can use "ready" event handlers for your charts to accomplish this:
google.visualization.events.addListener(chart, 'ready', function () {
document.querySelector('#myChartDiv').style.display = 'none';
});
I tried to resize the window using scripts, but I found that some browsers did not support this. In the end, I ended up removing the container div from the DOM using jQuery and then appending it again when I wanted to display it. This preserved the correct sizes of the graphs
$tab3 = $('#tab3').remove();
then when I wanted to display it (the div of class panes is the original parent to the div of id tab3)
$('.panes').append($tab3);
I have a d3 plot where I want to dynamically change some of the points. Here is what the plot looks like before I change anything:
now if I go into the chrome console and try to change any of the circle properties (or removing it from the DOM), e.g. $($0).attr("r", "20") I get a square/box appearing over my plot, which disappears if I zoom in/out of the browser window or resize the browser window.
Any ideas why this is happening and how to prevent it?
In order to help debug I just copied the svg html (generated by d3) and posted it to codepen . I set up a click event to illustrate the problem, so click on any of the points to see the bug.