Google Charts Only Render when Browser Zoom At 100% - google-chrome

Question

Webpage contains five tabs of contents; initial tab has an account/profile form on it, three others are records for the account and the fifth one contains Google Charts with Google Analytic data in it.
The google charts are nothing complicated; a line chart, a pie chart, and two geo charts. Using Google Chart code and standard JavaScript and PHP. The only complicated thing was building/persisting the chart strings in a MySQL database so they could be retrieved without having the overhead of the Google Analytic call.
When first coded up the tab page, noticed the chart tab was not rendering, and that turned out to be problem where the charts would not render in a DIV where display:none. The initial tab was display:block, but the others were display:none. Was able to solve this by moving the DrawChart() call into the 'activate tab' code vs using the google.charts.setOnLoadCallback(drawChart) within the chart code.
This seems to work fine EXCEPT when the browser is other than 100%.
Firefox at 100%
If you render the page at 100% and zoom the page in and out, all is fine. However, if you set the page to other than 100%, reload the tab page, then select the metrics tab, you get a variety of results, none of which are desired.
Chrome produces the following:
Chrome at 80%
Firefox is similar:
Firefox at 80%
Have found one post talking about finding min/max values of each axis which I can understand if the chart boundaries are changing like zooming ONLY the chart, but with page zoom, the relative canvas is still the same size.
Here is the starting code for the GA METRIC tab and the first linechart. Again, the drawChart() call is in tab control code so the normal callback is commented out. This was due to the timing problem mentioned earlier.
<div id="GA_Metrics" class="tabcontent">
<div id="header"><span style="font-size:10px;font-weight: bold;">Record No: 007101</span></div>
<div id="postings_gametric_container_linechart" class="container"></div>
<div id="postings_gametric_container_piechart" class="container"></div>
<div id="postings_gametric_container_geoworld" class="container"></div>
<div id="postings_gametric_container_geousa" class="container"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages': ['corechart','geochart','table'],'mapsApiKey': 'keygoeshere'});
//google.charts.setOnLoadCallback(drawChart);
function drawLineChart()
{
var data = google.visualization.arrayToDataTable([[{type: 'date', label: 'Date'},
{type: 'number', label: 'SIA49775'},
{type: 'number', label: 'SIA51972'},
{type: 'number', label: 'SIA52931'},
{type: 'number', label: 'SIA53349'},
{type: 'number', label: 'SIA53350'}],
[new Date(2019,11,18),0,1,2,1,7],
[new Date(2019,11,19),0,0,0,1,0],
[new Date(2019,11,20),2,2,2,1,2],
[new Date(2019,11,21),2,4,3,6,1],
[new Date(2019,11,22),0,3,3,1,2],
[new Date(2019,11,23),2,2,5,1,7],
[new Date(2019,11,24),0,1,1,2,1],
[new Date(2019,11,25),2,2,4,0,4],
[new Date(2019,11,26),1,0,1,4,1],
[new Date(2019,11,27),1,0,2,0,1],
[new Date(2019,11,28),3,2,4,0,8],
[new Date(2019,11,29),2,1,2,3,1],
[new Date(2019,11,30),1,3,3,5,5],
[new Date(2019,11,31),2,1,0,2,0],
[new Date(2020,00,01),6,4,7,3,8],
[new Date(2020,00,02),2,3,4,0,6],
[new Date(2020,00,03),2,1,5,7,4],
[new Date(2020,00,04),0,0,0,1,0],
[new Date(2020,00,05),2,1,2,0,1],
[new Date(2020,00,06),1,2,3,2,7],
[new Date(2020,00,07),0,1,0,3,2],
[new Date(2020,00,08),1,1,4,0,4],
[new Date(2020,00,09),1,1,2,1,4],
[new Date(2020,00,10),3,2,4,2,9],
[new Date(2020,00,11),2,5,2,2,6],
[new Date(2020,00,12),0,0,1,1,1],
[new Date(2020,00,13),2,2,3,0,6],
[new Date(2020,00,14),4,4,2,3,8],
[new Date(2020,00,15),3,3,3,2,3],
[new Date(2020,00,16),0,3,2,1,1]]);
var options = {
title: 'Active Posting(s) PageViews (Last 30 Days)',
hAxis: {
format: 'M/d',
gridlines: {color: '#000080'}
},
vAxis: {
title: 'Page Views',
gridlines: {color: '#000080'}
},
pointSize: 3,
backgroundColor: '#cfcfcf',
chartArea:{width:'62%'}
};
/* Create instance of "Classic" Visualization Line Chart */
var chart = new google.visualization.LineChart(document.getElementById('postings_gametric_container_linechart'));
chart.draw(data, options);
Here is the code further down on the page that controls the tabs. This is where the drawChart() call had to go to avoid the display:none issue mentioned above.
<script>
function openPage(pageName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
//Moved the drawChart() call to this location so the call to render the chart comes AFTER the
//DIV is visible, otherwise, the chart does not render properly. See DECLARATION for explanation.
if(pageName == "GA_Metrics")
{
drawLineChart();
drawPieChart();
drawGeoWorldMap();
drawGeoUSAMap();
}
}
Googled the error messages in red for Chrome and Firefox which provided some details but nothing seemed to fit this problem. When the page is zoomed in or out and then reloaded, the drawChart() call happens again when you select the GA METRICS tab, so thought it would render appropriately, but alas not.
Thank you in advance for any possible solutions.
LarryG
UPDATE 20200211_1220C
Another interesting tidbit, using the Firefox Web Developer Tool, the DIV with the chart has a height of 1px. However, if you click on the GA METRIC tab (page not reloaded, but the openPage() call occurs passing in the GA METRIC tab), each time the height grows 1px. Therefore, after 40 clicks you can begin to see the charts form, so they are there ... the DIV height is just getting overridden when the zoom is not at 100%. See graphic link.
Firefox at 80% after 40 clicks of GA METRIC tab
20200214 UPDATE - Added code from affected page, cutting out all that was not necessary. This shows the relative placement of the tab control vs the openPage() and the metric charts. The openPage() is below the tab controls. Only thing below it is the footers and such.
<!-- DIV STARTS HERE -->
<button class="tablink" onclick="openPage('Account_Info', this, '#000080')" id="defaultOpen">Account Info</button>
<button class="tablink" onclick="openPage('Posts_Active', this, '#000080')">ACTIVE</button>
<button class="tablink" style="opacity:1.0;" onclick="openPage('Posts_SOLD', this, '#000080')">SOLD</button>
<button class="tablink" style="opacity:1.0;" onclick="openPage('Posts_NotSOLD', this, '#000080')">NOT SOLD</button>
<button class="tablink" style="opacity:1.0;" onclick="openPage('GA_Metrics', this, '#000080')">GA Metrics</button>
<div id="Account_Info" class="tabcontent">
</div>
<div id="Posts_Active" class="tabcontent">
</div>
<div id="Posts_SOLD" class="tabcontent">
</div>
<div id="Posts_NotSOLD" class="tabcontent">
</div>
<div id="GA_Metrics" class="tabcontent">
<div id="header"><span style="font-size:10px;font-weight: bold;">Record No: 019036</span></div>
<div id="postings_gametric_container_linechart" class="container"></div>
<div id="postings_gametric_container_piechart" class="container"></div>
<div id="postings_gametric_container_geoworld" class="container"></div>
<div id="postings_gametric_container_geousa" class="container"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Note: you will need to get a mapsApiKey for your project. "mapsApiKey" is the property name and is required no matter what you call your Key.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
google.charts.load('current', {'packages': ['corechart','geochart','table'],'mapsApiKey': 'API_KEY_GOES_HERE'});
//20190304LG: Noticed the chart was not rendering properly. Found StackOverFlow article where if the charts are in a "display:none" div like a tab
//they will not render properly. They will revert to google chart css which is usually 400x200px. The solution was to either make the
//chart call before the tabs/divs were set to display:none OR load them when the tab/div was activated. As a result, LG commented out
//the next line and put the drawChart() call in the ACCOUNT_MGMNT_TEMP.HTML file in the openPage() Javascript function. This seems to
//have fixed the problem.
//google.charts.setOnLoadCallback(drawChart);
//
//20200209LG: The Geo Strings sometimes contain an apostrophe such as ['Provence-Alpes-Cote d'Azur',1] which will prevent rendering.
// Added some str_replace code to escape those instances, but its bruteforce for now.
function drawLineChart()
{
var data = google.visualization.arrayToDataTable([[{type: 'date', label: 'Date'},
{type: 'number', label: 'SIA35512'},
{type: 'number', label: 'SIA39964'},
{type: 'number', label: 'SIA53391'}],
[new Date(2020,00,14),0,0,1],
[new Date(2020,00,15),0,0,0],
[new Date(2020,00,16),1,2,0],
[new Date(2020,00,17),0,0,0],
[new Date(2020,00,18),1,0,0],
[new Date(2020,00,19),0,1,0],
[new Date(2020,00,20),3,4,0],
[new Date(2020,00,21),2,3,1],
[new Date(2020,00,22),1,0,0],
[new Date(2020,00,23),1,0,0],
[new Date(2020,00,24),2,0,0],
[new Date(2020,00,25),0,0,0],
[new Date(2020,00,26),0,4,0],
[new Date(2020,00,27),6,0,0],
[new Date(2020,00,28),2,1,0],
[new Date(2020,00,29),1,0,0],
[new Date(2020,00,30),0,0,0],
[new Date(2020,00,31),1,1,0],
[new Date(2020,01,01),0,1,1],
[new Date(2020,01,02),0,1,0],
[new Date(2020,01,03),1,2,2],
[new Date(2020,01,04),3,2,1],
[new Date(2020,01,05),1,0,0],
[new Date(2020,01,06),0,1,0],
[new Date(2020,01,07),0,0,0],
[new Date(2020,01,08),1,1,0],
[new Date(2020,01,09),0,1,0],
[new Date(2020,01,10),1,0,0],
[new Date(2020,01,11),0,2,0],
[new Date(2020,01,12),2,0,0]]);
var options = {
title: 'Active Posting(s) PageViews (Last 30 Days)',
hAxis: {
format: 'M/d',
gridlines: {color: '#000080'}
},
vAxis: {
title: 'Page Views',
gridlines: {color: '#000080'}
},
pointSize: 3,
backgroundColor: '#cfcfcf',
chartArea:{width:'62%'}
};
/* Create instance of "Classic" Visualization Line Chart */
var chart = new google.visualization.LineChart(document.getElementById('postings_gametric_container_linechart'));
chart.draw(data, options);
}
function drawPieChart()
{
var data = google.visualization.arrayToDataTable([['Posting','Page Views'],
['35512',1395],
['39964',645],
['53391',80]]);
var options = {
title: 'Active Posting(s) % PageViews (Last 30 Days)',
backgroundColor: '#cfcfcf',
is3D: true
};
//Create instance of "Classic" Visualization Line Chart
var chart = new google.visualization.PieChart(document.getElementById('postings_gametric_container_piechart'));
chart.draw(data, options);
}
//20190321 LG - REPLACE the chart.draw with the geomap.draw. SEE this URL or your TEST_geo2.html file
function drawGeoWorldMap()
{
var data = google.visualization.arrayToDataTable([['Country','PageViews'],
['Australia',8],
['Belgium',11],
['Brazil',3],
['Canada',64],
['Czechia',8],
['Ecuador',3],
['Georgia',3],
['Germany',3],
['Italy',3],
['Malaysia',3],
['Mexico',3],
['New Zealand',3],
['Puerto Rico',3],
['Singapore',3],
['South Korea',3],
['United Kingdom',3],
['United States',1227]]);
var options = {
region: 'world',
displayMode: 'regions',
backgroundColor: '#cfcfcf',
colorAxis: {colors: ['green', 'blue']}
};
var chart = new google.visualization.GeoChart(document.getElementById('postings_gametric_container_geoworld'));
chart.draw(data, options);
}
function drawGeoUSAMap()
{
var data = google.visualization.arrayToDataTable([['State','PageViews'],
['(not set)',3],
['Aguadilla',3],
['Alabama',11],
['Alberta',3],
['Arizona',5],
['Arkansas',3],
['British Columbia',24],
['California',80],
['Canterbury',3],
['Colorado',16],
['Connecticut',37],
['District of Columbia',13],
['England',3],
['Flanders',11],
['Florida',61],
['Georgia',27],
['Guayas',3],
['Gyeonggi-do',3],
['Idaho',34],
['Illinois',16],
['Indiana',50],
['Iowa',5],
['Kansas',13],
['Kentucky',8],
['Liberec Region',5],
['Maine',16],
['Massachusetts',29],
['Michigan',85],
['Minnesota',50],
['Mississippi',8],
['Missouri',77],
['Montana',8],
['Nebraska',16],
['Nevada',3],
['New Hampshire',29],
['New Jersey',11],
['New South Wales',3],
['New York',101],
['North Carolina',32],
['North Dakota',11],
['Nova Scotia',5],
['Ohio',66],
['Oklahoma',5],
['Ontario',27],
['Oregon',13],
['Pennsylvania',56],
['Prague',3],
['Puebla',3],
['Quebec',5],
['Queensland',3],
['Rhineland-Palatinate',3],
['Rhode Island',5],
['Samegrelo-Zemo Svaneti',3],
['Selangor',3],
['Sicily',3],
['South Carolina',5],
['State of Sao Paulo',3],
['Tennessee',27],
['Texas',61],
['Utah',8],
['Vermont',3],
['Victoria',3],
['Virginia',21],
['Washington',27],
['West Virginia',3],
['Wisconsin',74]]);
var options = {
region: 'US',
backgroundColor: '#cfcfcf',
resolution: 'provinces',
displayMode: 'regions',
colorAxis: {colors: ['green', 'blue']}
};
var chart = new google.visualization.GeoChart(document.getElementById('postings_gametric_container_geousa'));
chart.draw(data, options);
}
/*
function drawGeoUSACityMap()
{
var data = google.visualization.arrayToDataTable([<!--GA_METRIC_GEOUSACITY_CALL-->]);
var options = {
region: 'US',
backgroundColor: '#cfcfcf',
displayMode: 'markers',
resolution: 'metros',
colorAxis: {colors: ['green', 'blue']}
};
var chart = new google.visualization.GeoChart(document.getElementById('postings_gametric_container_geousacity'));
chart.draw(data, options);
}
*/
</script>
</div>
<script>
function openPage(pageName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
//Moved the drawChart() call to this location so the call to render the chart comes AFTER the
//DIV is visible, otherwise, the chart does not render properly. See DECLARATION for explanation.
if(pageName == "GA_Metrics")
{
drawLineChart();
drawPieChart();
drawGeoWorldMap();
drawGeoUSAMap();
}
}
//INITIALIZATION of the TABS ... get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
<!-- DIV ENDS HERE -->