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.
Related
I'm implementing a button to generate a report (plot some charts). Those charts are hidden() before pressing the button, since I'm using bootstrap scrollbar is also hidden. After pressing the button I call show() on divs that charts are defined and call chart render function, after divs are shown scrollbar is also created but chart.reflow() for some reason is getting inaccessible and it won't trigger, so exporting button and credits are getting cropped by scrollbar.
https://jsfiddle.net/bernardo0marques/m6jqa79r/24/
If you resize the window manually the .reflow() is called and it gets fixed. Any workaround or sugestion?
Actually the issue which you are struggling to is not related to triggering the chart.reflow. In the provided demo you are trying to trigger chart.reflow before the chart has been initialized - check your dev console.
The true issue is related to your button position. You have used the style="float: left;" attribute for your button element, which sets the left position of the button in the window - which is also a container for the first chart and that creates the complication while calculating initial positions of some chart elements - here is a demo where is easier to see what I am talking about: https://jsfiddle.net/BlackLabel/L70xh95g/
So you will need to find the other CSS styles which wouldn't disturb the chart rendering. In regular block pattern everything works fine:
https://jsfiddle.net/BlackLabel/dwrje7f0/
I just deleted the style="float: left;"
I have multiple dygraphs plots, which I would like to group in a collapsible jQuery widget, so that one could only show some groups of graphs. Sadly, this only works if the collapsible div is expanded at the start, if I start collapsed, the graph will not be drawn after expanding.
Although not a real solution, I could start with all all elements expanded. However, if the collapses some graphs and switches pages in between, they same problem occurs.
Here is a jsFiddle which shows the problem - set data-collapsed="false" and the graph will be drawn.
You might try calling g.resize() or g.updateOptions() on all the charts when the widget expands. These should be no-ops, but their effect is to force dygraphs to recalculate the size of its container <div>, which has changed due to the expanding widget.
To my knowledge, there's no way to tell from JavaScript when a DOM Element becomes visible or is resized in ways other than window resizes. This affects other JS libraries as well.
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.
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?