Google graphs load extremely rarely when bookmarked based on jQuery

Question

I use Google line chart almost exactly as a demo - only the data has changed - inside this jQuery tab plugin is unchanged. Maybe in 50% of cases, the chart will load at a speed of 400x200, even if it is set to load at 700x250. The containing div will have the correct width and height, but the chart displayed by the API will load inside this 400x200 area.

I suspect this is because tabs are not displayed when the API tries to display. Because of this, he tries to display in something that he considers to be zero, and therefore forces himself to the lowest resolution by default.

My thought is that if the graph display can be delayed until the corresponding tab is clicked, this will solve the problem. Unfortunately, I have no idea how to do this, and my research has not been fruitful. The closest I could find was this stream , but I did not find any real answers there.

I would be grateful for any advice if you have, and I would be happy to follow up with additional information if necessary.

Answer 1

change chart parameters to set width and height as needed

var options = { title: 'Company Performance' ,width:900 ,height:500 }; 

Answer 2

Displaying diagrams in a hidden div (which, apparently, are unallocated tabs of the UI interface), with the ability to render the visualization API, so you want to do one of two things: either display all the diagrams before creating the instances of the tabs or (as you noticed) link event listeners to draw charts the first time you open a tab. Setting the height and width in the chart parameters is not enough to solve the problem in all browsers.

I went through the easytabs documentation and it looks like you should do something like this:

 // draw chart(s) in your default open tab // track which tabs you've drawn charts in var chartsDrawn = { tab1: true, tab2: false, tab3: false // etc }; $('#tab-container').bind('easytabs:after', function (e) { if (e.tab == 'tab-2' && !chartsDrawn.tab2) { // draw chart(s) in tab 2 chartsDrawn.tab2 = true; } else if (e.tab == 'tab-3' && !chartsDrawn.tab3) { // draw chart(s) in tab 3 chartsDrawn.tab3 = true; } // etc }); 

Answer 3

This is how I decided to use angular-bootstrap https://angular-ui.imtqy.com/bootstrap/

 <div class="google-chart" google-chart chart="chartObject1" on-ready="displayGoogleCharts()"></div> <tab heading="Past Week" select="googleChartSizeFix()"> googleChartSizeFix = function() { $('svg').parent().css({ opacity:"0" }); $(window).resize(); }; displayGoogleCharts = function() { $('svg').parent().css({ opacity:"1" }); }; 

Each time a tab is selected (the googleChartSizeFix function is launched), the Google Chart is set to transparency (opacity = 0, so it does not disappear with hide (), but retains its size because its contents are transparent), followed by a resizing of the window, this makes Google Chart match the div that contains it, using a width of 100% and a height of 100%:

 "options": { "chartArea": { "width":'100%', "height":'100%' } } 

and finally, after the Google Chart is ready (after resizing), the displayGoogleCharts function is launched, and the google chart opacity is reset to 1, so the content is displayed again.

Answer 4

I came across this “feature” of Bootstrap tabs. When cutting and pasting multiple tabs into my HTML, I accidentally left the <div class = active "tab> in the active state for all tabs. As a result, the contents of all tabs were displayed sequentially on the first tab, but left when you switched tabs.

My solution for hidden tabs is to define them as active, and then remove the “active” class from the div after calling chart.draw.

 <div class="tab-pane active" id="myid" role="tabpanel"> <script type="text/javascript"> // all the chart stuff chart.draw(data, options); $('#myid').removeClass('active'); </script> </div> 

I see that jQuery tabs also use the "active" class. Perhaps this trick will work too.

Answer 5

I solved this problem by disabling the bootstrap class in the element containing the chart, and then, after loading the chart, then applied the bootstrap class.

For example, suppose we want to set a collapsible object with a diagram in it:

  <a href="#div-id" data-toggle="collapse"> Expand </a> <div id="div-id" class="future-collapse"> <div id="some-chart"></div> </div> 

And then in your scenario:

 /** * Callback function EG google.charts.setOnLoadCallback(drawChart); */ function drawChart(){ // Drawing the charts draw_some_chart(); // Applying the collapse class to our elements with the future-collapse class $('.future-collapse').attr('class', 'collapse'); } function draw_some_chart(){ // Draw your charts }