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.
Related
I want to implement ng-bootstrap tool-tip(or any other tool-tip if that works) which will be shown when user hover over the data present inside slickgrid cells.
I am also attaching a snapshot of expected functionality below. I need to show similar kind of black tool-tip with some information when user hovers over the slick-grid data.
This is not possible through formatters and when I am rendering an angular component inside grid cells so that I could easily use ngb-tooltip there, then the tooltip is getting cropped to the size of grid-cell's dimensions. Part outside the area of grid-cell isn't visible. Even high z-index not working for it to be visible.
Help me out in this by suggesting some methods to implement this.
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'm trying to use Leaflet.js to display a map inside a tabbed panel from Twitter Bootstrap, but is behaving in a strange way:
When I click on the tab containing the panel there is a gray layer on top of the map. If I drag and move the map I get to see other tiles, but not the initial ones.
Even more strange is that if I resize the browser, suddenly it works perfectly, until I reload again, so I would guess is a problem with the css, but I cannot find the problem.
Also, placing the map outside of the tabbed panel works great.
I tested in Firefox and Chrome, and both have the same issue.
I created a test in jsfiddle to see it "live": http://jsfiddle.net/jasalguero/C7Rp8/1/
Any help is really appreciated!
It's a complete hack from messing with the leaflet.js source code, but it works (at least in jsFiddle) http://jsfiddle.net/C7Rp8/4/
The idea is from Google Maps, to "resize" or "redraw" the map when its container div is resized.
The changes I made are:
add id link3 to the small tab in HTML
tab3
add a listener to this tab inside $(function() {
$("body").on('shown','#link3', function() {
L.Util.requestAnimFrame(map.invalidateSize,map,!1,map._container);
});
The requestAniMFrame line is taken from trackResize in leaflet.js
Update from the comments: Hi, I used map.invalidateSize(false); instead of L.Util.requestAnimFrame(... and this also seems to work. Just thought I'd point this out. Great answer though! – Herr Grumps
Bootstrap 3 has custom namespaced events, and so previous answers would work with:
$("body").on("shown.bs.tab", "#link3", function() {
map.invalidateSize(false);
});
Reference: Bootstrap Tabs