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.
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 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.
Is there a reason why there isn't a default browser context menu on google charts? And am I missing an option that could allow one?
The link that you have posted is of google's chart page i.e. https://developers.google.com/chart/
On this page the chart is rendered as SVG inside a div with the id="chart_div" which acts as chart area wrapper / container. Inside this div there are two more nested divs. The last nested div has its contextmenu event disabled thru javascript.
In order to test this, open the source in developer tools and add oncontextmenu="alert('hello');" to this div and then check try right-click.
Now for your question: Why? This is perhaps because Google Charts are interactive charts and lot of informational popups are dependent on hover and click. They must have thought to keep the chart area clean without any distracting context menus on it. Context menu might not have any useful purpose on the chart itself. However, this is only my speculation.
In my project I have a long scrolling page that has a project grid. when you click on a project, I ajax load that project, then slide open a window pushing the project grid down, displaying the chosen project. Each projects will have different heights based on the content. I need the content that shows below the project grid to always show at the end of the page. Currently when the grid slides open it slides right over the "footer" content (rough example at the bottom).
The skrollr documentation says that if the window resizes, you should call the refresh function.
I run this function on init, on project grid click, and I don't see the window adjusting to the new height of the content. The goal is to have the footer appear always a couple hundred pixels after the project grid whatever it's current height/position.
http://caava.elusiveform.com/example.html
I don't think this is related to skrollr. If you want the footer to appear after the content, then make sure it's there in the document flow. You are using position:fixed and mix it with other stuff. I recommend to first create the page without skrollr and then add animations using relative mode. The skrollr.css file you are using is outdated, it doesn't exist any more.
After you made sure the footer is correctly placed, then you can call refresh to make your animations work (they depend on data-end, which changes and needs to be recalculated). In your case, that would probably be enough:
s.refresh(document.getElementById('footer'));
Btw, the skrollr documentation says
Window resizing is handled by skrollr.
refresh is only needed when you change the DOM and skrollr can't detect that.
I am using the default example of the Kendo UI dataviz bar chart. When I zoom into the page, the graph starts to overlap over other elements on the page. Is there a way to make sure that everything in the div containing the graph does not overlap onto other divs. This is a huge problem as when viewed on a tablet, it is overlapping other elements.
How are you "zooming" in?
The KendoChart gets a fixed width when it is created - it's just an SVG. I'm not aware of a means to animate resizing it - you could change the height and width manually, or possibly just redraw the chart, but I imagine that would be fairly intensive and wouldn't animate well.