IE 8/9 not displaying hAxis and vAxis data for line Chart

[David82]

I am displaying a line chart with Fahrenheit temperature on left-side
vertical axis, date-time on horizontal axis.
Looking for help to display a right-side Celsius temperature vertical
axis.
When I use firefox v10 all data displays on hAxis and vAxis.
When I use IE 8 and IE 9 hAxis as well as vAxis data is not displayed.

Is anyone having similar problem ? Need help !!!!

following url will show line char problem
http://www.marcillo.com/chartdata.do?method=showChartHome

Following is the script part of the page:

<script type="text/javascript" src="https://www.google.com/jsapi"></
script>

<script type="text/javascript">

google.load("visualization", "1.1", {packages:["corechart"]});
var currentTime = new Date();
var aUrlValue = "<%=request.getContextPath()%>/chartdata.do?
method=getTemperature";
google.setOnLoadCallback( initChart );

function initChart(){
google.setOnLoadCallback( initChart );
var aszCurrentDatTime = new Date();;
document.getElementById('area1').innerHTML = aszCurrentDatTime;
document.getElementById("chart_div").style.display = 'none';
var aszNewURLData = aUrlValue+'&d='+escape(currentTime)+'&debug=Y';
var opts = {sendMethod: 'xhr'};
var query = new google.visualization.Query( aszNewURLData, opts);
query.setQuery('select C, sum(B) group by C');
query.send( handleQueryResponse );
}

function handleQueryResponse( response ) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' +
response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var chart = new
google.visualization.LineChart(document.getElementById('chart_div'));
var CharOptions = {'title':'Temperature Chart',width:500,height:
340,is3D:true,vAxis:{title:'Fahrenheit'},hAxis:{title:'Date Time'}};
chart.draw( data, CharOptions );
document.getElementById('chart_div').style.display = 'block';
}

</script>

[asgallant]

You'll need to create a second series with the temp data in Celsius (this can be auto-calculated via a DataView) and then create a second vertical axis.  Setting the lineWidth and pointSize to 0 for the second series prevents the second series from being interactive.  You'll have to configure the viewWindow for each axis to the same temperature range as well.  See an example I drew up here: http://jsfiddle.net/3ER74/ 

[David82]

I ran the javascript you provided and I see the two vAxis.
I will add the celcius data column to datatable returned and modify javascript to test.
Are you aware that under IE the axis data is not visible ?

[asgallant]

I assume that this line:

document.getElementById('chart_div').style.display = 'block';  

means that div was hidden before you made the draw call?  If so, then you need to unhide the div first, as the charts have issues drawing in hidden divs.

[David82]

Thank you for your help !
I got the line chart working see following URL,
I am now looking for help on how to fix the IE 8/9 not displaying the axis data.

    http://www.marcillo.com/chartdata.do?method=showChartLine5

I use visialization java classes to generate a datatable. I add the following collumns
 
       ArrayList<ColumnDescription> cd = new ArrayList<ColumnDescription>();
        cd.add(new ColumnDescription("date", ValueType.TEXT, "Date"));
        cd.add(new ColumnDescription("lower", ValueType.NUMBER, "Lowest"));
        cd.add(new ColumnDescription("celcius", ValueType.NUMBER, "celcius"));
        cd.add(new ColumnDescription("upper", ValueType.NUMBER, "Highest"));
        cd.add(new ColumnDescription("reading", ValueType.NUMBER, "Reading"));
        newData.addColumns(cd);

Following is javascript used in the html to display the line chart.

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1.1", {packages:["corechart"]});
    var currentTime = new Date();

    var aUrlValue = "<%=request.getContextPath()%>/chartdata.do?method=getTemperature&type=three";

    google.setOnLoadCallback( initChart );
    function initChart(){
        google.setOnLoadCallback( initChart );
        var aszCurrentDatTime = new Date();;
        document.getElementById('area1').innerHTML = aszCurrentDatTime;
        document.getElementById("chart_div").style.display = 'none';
        var aszNewURLData = aUrlValue+'&d='+escape(currentTime)+'&debug=Y';
        var opts = {sendMethod: 'xhr'};
        var query = new google.visualization.Query( aszNewURLData, opts);
        query.setQuery('select C, sum(B) group by C');
       query.send( handleQueryResponse );
  }

  function handleQueryResponse( response ) { 
    if (response.isError()) {   
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());   
        return; 
    } 
    var data = response.getDataTable();
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    var CharOptions = {
        'title': 'Temperature Chart',
        width: 500,
        height: 340,

        hAxis: {
            title: 'Date Time'
        },
        series: {
            0: {
                targetAxisIndex: 0
            },
            1: {
                targetAxisIndex: 1,
                visibleInLegend: false,
                pointSize: 0,
                lineWidth: 0
            }
        },
        vAxes: {
            0: {
                title: 'Fahrenheit',
                viewWindowMode: 'maximized'
            },
            1: {
                title: 'Celsius',
                viewWindowMode: 'maximized'
            }
        }
    };
    chart.draw( data, CharOptions);

    document.getElementById('chart_div').style.display = 'block';

    runDetail();
}

</script>

[asgallant]

Was I correct in assuming that you are drawing the chart in a hidden div?  If so, you need to unhide the div before you draw the chart, or you will have problems in IE.

[David82]

YES !  you are correct.  I had to issue the following

    document.getElementById('chart_div').style.display = 'block';

before I call the

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

     ...
    chart.draw( data, CharOptions );

Thanks You Again.
David Marcillo

[Sarah Irwin]

I am having the same issue and tried to use the above code and it didn't work. Attached is my code....

 var options = 

 {

 title: 'Simple <? echo $data_gran ?> MEM Chart for <? echo $server_name ?>',

 curveType: "function",

 width: 700, height: 400,

 vAxis: {title:'MEM Util %', maxValue: 100, minValue: 0}

 };

 

// Create and draw the visualization.

document.getElementById('chart002').style.display = 'block';

                                                        var chart = new google.visualization.LineChart(document.getElementById('chart002'));

draw(data, options);

 }

  

 google.setOnLoadCallback(drawVisualization);

</script>

[asgallant]

Can you post your whole code (including the HTML) or a link to the page?

[skirwin]

<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
CPU_Line_chart2
</title>

<!-- COMMENT: PHP makes variable available to the rest of the page-->
<? $server_name = $_GET["server_name"] ?>
<? $data_gran = $_GET["data_gran"] ?>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

</head>
<body style="font-family: Arial;border: 0 none;">
<h2> Capacity Vital Signs </h2>
<form action="http://lpil0219capan01/CPU_Line_chartsarah.php">
Server Name: <input type="text" name="server_name" ><br>
Data Gran: <select name="data_gran">
<option value="hourly">Hourly</option>
<option value="daily">Daily</option>
<option value="monthly">Monthly</option>
</select> <br>
<input type="submit" value="Submit">
</form>

<table border="0" width="100%" cellspacing="0" cellpadding="4">
<tr>
<td width="50%">
<div id="chart001" style="min-width:300px; min-height:300px; margin: 0 auto">

<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Date', 'MAX', 'MIN', 'AVG'],
<?
$sql = "if '$data_gran' = 'monthly' begin select convert(varchar,YEAR(effect_dte),4) + '-' + convert(varchar,left(datename(mm,effect_dte),3),4) as datestamp,[value_max],[value_min],[value_avg] from dbo.sys_stat_monthly a join METRIC b on a.METRIC_ID = b.METRIC_ID where sys_asset_id='$server_name' and metric_nam='cpu_busy_util'end ".
"else if '$data_gran' = 'hourly' begin select convert(varchar,YEAR(effect_dte),4) + '-' + convert(varchar,left(datename(mm,effect_dte),3),4) + '-'+ convert(varchar,left(datename(dd,effect_dte),3),4) + ' ' + convert(varchar,left(datename(hh,effect_dte),3),4) + ':00' as datestamp,[value_max],[value_min],[value_avg] from dbo.sys_stat_hourly a join METRIC b on a.METRIC_ID = b.METRIC_ID where sys_asset_id='$server_name' and metric_nam='cpu_busy_util' and EFFECT_DTE >= GETDATE() -7 end ".
"else if '$data_gran' = 'daily' begin select convert(varchar,YEAR(effect_dte),4) + '-' + convert(varchar,left(datename(mm,effect_dte),3),4) + '-'+ convert(varchar,left(datename(dd,effect_dte),3),4)as datestamp, [value_max],[value_min],[value_avg] from dbo.sys_stat_daily a join METRIC b on a.METRIC_ID = b.METRIC_ID where sys_asset_id='$server_name' and metric_nam='cpu_busy_util' and EFFECT_DTE >= GETDATE() -30 end ";

$odbc = odbc_connect('CapacityManagementProd', 'caprpt1', '1Cap9Man') or die('could not connect to database');
odbc_prepare($odbc, $sql) or die('could not exec SQL: ' . odbc_errormsg($odbc));
$res = odbc_exec($odbc, $sql) or die('could not exec SQL: ' . odbc_errormsg($odbc));

$counter = 0;
$data = array();
while (odbc_fetch_array($res))
{
$data['effect_dte'] = odbc_result($res, 1);
$data['max'] = odbc_result($res, 2);
$data['min'] = odbc_result($res, 3);
$data['avg'] = odbc_result($res, 4);

if($counter > 0) { ?>,<? }

?>
['<? echo $data['effect_dte']; ?>',<? echo $data['max']; ?> ,<? echo $data['min']?>,<? echo $data['avg']?>]
<?
$counter++;
}

?>
]);

var options =
{
title: 'Simple <? echo $data_gran ?> CPU Chart for <? echo $server_name ?>',

curveType: "function",
width: 700, height: 400,

vAxis: {title:'CPU Util %', maxValue: 100, minValue: 0}

};

// Create and draw the visualization.

document.getElementById('chart001').style.display = 'block';
new google.visualization.LineChart(document.getElementById('chart001')).
draw(data, options);
}

google.setOnLoadCallback(drawVisualization);
</script>

</div>
<small> </small>
</td>

<td width="50%" style="border-left:1px dotted #cccccc;">
<div id="chart002" style="min-width:300px; min-height:300px; margin: 0 auto">

<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Date', 'MAX', 'MIN', 'AVG'],
<?
$sql = "if '$data_gran' = 'monthly' begin select convert(varchar,YEAR(effect_dte),4) + '-' + convert(varchar,left(datename(mm,effect_dte),3),4) as datestamp,[value_max],[value_min],[value_avg] from dbo.sys_stat_monthly a join METRIC b on a.METRIC_ID = b.METRIC_ID where sys_asset_id='$server_name' and metric_nam= 'mem_used_pct'end ".
"else if '$data_gran' = 'hourly' begin select convert(varchar,YEAR(effect_dte),4) + '-' + convert(varchar,left(datename(mm,effect_dte),3),4) + '-'+ convert(varchar,left(datename(dd,effect_dte),3),4) + ' ' + convert(varchar,left(datename(hh,effect_dte),3),4) + ':00' as datestamp,[value_max],[value_min],[value_avg] from dbo.sys_stat_hourly a join METRIC b on a.METRIC_ID = b.METRIC_ID where sys_asset_id='$server_name' and metric_nam='mem_used_pct' and EFFECT_DTE >= GETDATE() -7 end ".
"else if '$data_gran' = 'daily' begin select convert(varchar,YEAR(effect_dte),4) + '-' + convert(varchar,left(datename(mm,effect_dte),3),4) + '-'+ convert(varchar,left(datename(dd,effect_dte),3),4)as datestamp, [value_max],[value_min],[value_avg] from dbo.sys_stat_daily a join METRIC b on a.METRIC_ID = b.METRIC_ID where sys_asset_id='$server_name' and metric_nam='mem_used_pct' and EFFECT_DTE >= GETDATE() -30 end ";

$odbc = odbc_connect('CapacityManagementProd', 'caprpt1', '1Cap9Man') or die('could not connect to database');
odbc_prepare($odbc, $sql) or die('could not exec SQL: ' . odbc_errormsg($odbc));
$res = odbc_exec($odbc, $sql) or die('could not exec SQL: ' . odbc_errormsg($odbc));

$counter = 0;
$data = array();
while (odbc_fetch_array($res))
{
$data['effect_dte'] = odbc_result($res, 1);
$data['max'] = odbc_result($res, 2);
$data['min'] = odbc_result($res, 3);
$data['avg'] = odbc_result($res, 4);

if($counter > 0) { ?>,<? }

?>
['<? echo $data['effect_dte']; ?>',<? echo $data['max']; ?> ,<? echo $data['min']?>,<? echo $data['avg']?>]
<?
$counter++;
}

?>
]);

document.getElementById('chart002').style.display = 'block';

var options =
{
title: 'Simple <? echo $data_gran ?> MEM Chart for <? echo $server_name ?>',
curveType: "function",
width: 700, height: 400,

vAxis: {title:'MEM Util %', maxValue: 100, minValue: 0},
hAxis: {title:' Date' }

};

// Create and draw the visualization.
document.getElementById('chart002').style.display = 'block';

var chart = new google.visualization.LineChart(document.getElementById('chart002')).
draw(data, options);

}

google.setOnLoadCallback(drawVisualization);
</script>

</div>
<small> </small>
</td>
</tr>

<tr>
<td width="50%" style="border-top:1px dotted #cccccc;">
<div id="chart003" style="min-width:300px; min-height:300px; margin: 0 auto"></div>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Disk', 'Used %'],
<?
$sql = " if '$data_gran' = 'monthly' ".
" begin ".
" select ".
" convert(date,effect_dte), ".
" substring(sys_asset_id,CHARINDEX('^',sys_asset_id)+1,810), ".
" value_max ".
" from SYS_STAT_MONTHLY a join metric b on a.metric_id = b.metric_id ".
" where METRIC_NAM = 'disk_space_used_pct' ".
" and substring(sys_asset_id,1,CHARINDEX('^',sys_asset_id)-1) = '$server_name' ".
" order by SYS_ASSET_ID ".
" end ".
" if '$data_gran' = 'hourly' ".
" begin ".
" select ".
" substring(sys_asset_id,CHARINDEX('^',sys_asset_id)+1,810), ".
" avg(value_max) ".
" from SYS_STAT_hourly a join metric b on a.metric_id = b.metric_id ".
" where METRIC_NAM = 'disk_space_used_pct' ".
" and substring(sys_asset_id,1,CHARINDEX('^',sys_asset_id)-1) = '$server_name' ".
" and EFFECT_DTE >= GETDATE() -3 ".
" group by SYS_ASSET_ID ".
" order by SYS_ASSET_ID ".
" end ".
" if '$data_gran' = 'daily' ".
" begin ".
" select ".
" substring(sys_asset_id,CHARINDEX('^',sys_asset_id)+1,810), ".
" avg(value_max) ".
" from SYS_STAT_Daily a join metric b on a.metric_id = b.metric_id ".
" where METRIC_NAM = 'disk_space_used_pct' ".
" and substring(sys_asset_id,1,CHARINDEX('^',sys_asset_id)-1) = '$server_name' ".
" and EFFECT_DTE >= GETDATE() -30 ".
" group by SYS_ASSET_ID ".
" order by SYS_ASSET_ID ".
" end ";

$odbc = odbc_connect('CapacityManagementProd', 'caprpt1', '1Cap9Man') or die('could not connect to database');
odbc_prepare($odbc, $sql) or die('could not exec SQL: ' . odbc_errormsg($odbc));
$res = odbc_exec($odbc, $sql) or die('could not exec SQL: ' . odbc_errormsg($odbc));

$counter = 0;
$data = array();
while (odbc_fetch_array($res))
{
$data['disk'] = odbc_result($res, 1);
$data['used'] = odbc_result($res, 2);


if($counter > 0) { ?>,<? }

?>
['<? echo $data['disk']; ?>',<? echo $data['used']; ?>]
<?
$counter++;
}

?>
]);

var options =
{
title: 'Simple <? echo $data_gran ?> Disk Chart for <? echo $server_name ?>',

curveType: "function",
width: 700, height: 400,

vAxis: {title:'Disk Util %', maxValue: 100, minValue: 0}

};

// Create and draw the visualization.

new google.visualization.ColumnChart(document.getElementById('chart003')).
draw(data, options);
}

google.setOnLoadCallback(drawVisualization);
</script>

</div>


</td>

<td width="50%" style="border-left:1px dotted #cccccc; border-top:1px dotted #cccccc;">
<div id="chart_4" style="min-width:300px; min-height:300px; margin: 0 auto">sector 4 within div</div>
Network Data going here!!!
</td>
</tr>
</table>

</body>
</html>

[asgallant]

Sorry, I need to see it after it has been rendered by the server (as I can't tell what your PHP code will output).  Open it in a browser, view the source, and post it here.

[skirwin]

<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
CPU_Line_chart2
</title>

<!-- COMMENT: PHP makes variable available to the rest of the page-->

['2013-Jan-27',50.0000 ,0.0000,1.3750]
, ['2013-Jan-28',34.0000 ,0.0000,2.2917]
, ['2013-Jan-29',22.0000 ,0.0000,0.4583]
, ['2013-Jan-30',4.0000 ,0.0000,0.0521]
, ['2013-Jan-31',34.0000 ,0.0000,1.8229]
, ['2013-Feb-1',35.0000 ,0.0000,1.4479]
, ['2013-Feb-2',11.0000 ,0.0000,0.6458]
, ['2013-Feb-3',50.0000 ,0.0000,3.3854]
, ['2013-Feb-4',50.0000 ,0.0000,0.6979]
, ['2013-Feb-5',44.0000 ,0.0000,2.7917]
, ['2013-Feb-6',42.0000 ,0.0000,0.9479]
, ['2013-Feb-7',45.0000 ,0.0000,0.4792]
, ['2013-Feb-8',35.0000 ,0.0000,0.7188]
, ['2013-Feb-9',29.0000 ,0.0000,1.5208]
, ['2013-Feb-10',35.0000 ,0.0000,2.6250]
, ['2013-Feb-11',37.0000 ,0.0000,0.4479]
, ['2013-Feb-12',44.0000 ,0.0000,3.1667]
, ['2013-Feb-13',35.0000 ,0.0000,0.3958]
, ['2013-Feb-14',40.0000 ,0.0000,0.4688]
, ['2013-Feb-15',44.0000 ,0.0000,1.4167]
, ['2013-Feb-17',25.0000 ,0.0000,0.7917]
, ['2013-Feb-18',35.0000 ,0.0000,4.3542]
, ['2013-Feb-19',50.0000 ,0.0000,2.3542]
, ['2013-Feb-20',26.0000 ,0.0000,0.4375]
, ['2013-Feb-21',0.0000 ,0.0000,0.0000]
, ['2013-Feb-22',35.0000 ,0.0000,1.0417]
, ['2013-Feb-23',32.0000 ,0.0000,1.6354]
]);

var options =
{
title: 'Simple daily CPU Chart for wpil0219capan01',

curveType: "function",
width: 700, height: 400,
vAxis: {title:'CPU Util %', maxValue: 100, minValue: 0}
};

// Create and draw the visualization.
document.getElementById('chart001').style.display = 'block';
new google.visualization.LineChart(document.getElementById('chart001')).
draw(data, options);
}


google.setOnLoadCallback(drawVisualization);
</script>

</div>
<small> </small>
</td>

<td width="50%" style="border-left:1px dotted #cccccc;">
<div id="chart002" style="min-width:300px; min-height:300px; margin: 0 auto">

<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Date', 'MAX', 'MIN', 'AVG'],

['2013-Jan-27',120.0000 ,113.0000,115.5521]
, ['2013-Jan-28',124.0000 ,109.0000,115.1319]
, ['2013-Jan-29',117.0000 ,110.0000,110.7500]
, ['2013-Jan-30',118.0000 ,111.0000,113.1875]
, ['2013-Jan-31',121.0000 ,83.0000,100.9479]
, ['2013-Feb-1',118.0000 ,95.0000,105.3125]
, ['2013-Feb-2',123.0000 ,114.0000,115.0660]
, ['2013-Feb-3',119.0000 ,100.0000,113.1667]
, ['2013-Feb-4',123.0000 ,109.0000,116.0729]
, ['2013-Feb-5',129.0000 ,113.0000,123.4583]
, ['2013-Feb-6',130.0000 ,115.0000,123.8854]
, ['2013-Feb-7',118.0000 ,108.0000,112.7708]
, ['2013-Feb-8',113.0000 ,107.0000,109.2813]
, ['2013-Feb-9',129.0000 ,107.0000,122.1354]
, ['2013-Feb-10',123.0000 ,107.0000,119.8021]
, ['2013-Feb-11',123.0000 ,122.0000,122.8125]
, ['2013-Feb-12',127.0000 ,110.0000,121.5625]
, ['2013-Feb-13',129.0000 ,110.0000,122.1979]
, ['2013-Feb-14',112.0000 ,109.0000,110.7917]
, ['2013-Feb-15',121.0000 ,111.0000,111.9792]
, ['2013-Feb-17',69.0000 ,61.0000,67.0104]
, ['2013-Feb-18',79.0000 ,52.0000,71.8854]
, ['2013-Feb-19',85.0000 ,67.0000,78.1875]
, ['2013-Feb-20',83.0000 ,69.0000,76.2500]
, ['2013-Feb-21',86.0000 ,82.0000,83.5729]
, ['2013-Feb-22',95.0000 ,82.0000,84.3646]
, ['2013-Feb-23',109.0000 ,84.0000,99.7292]

]);

document.getElementById('chart002').style.display = 'block';
var options =
{

title: 'Simple daily MEM Chart for wpil0219capan01',

['_Total',64.925925]
, ['C:',75.037037]
, ['E:',25.444444]
, ['HarddiskVolume2',14.000000]
]);

var options =
{
title: 'Simple daily Disk Chart for wpil0219capan01',

[asgallant]

In your case, you have 3 functions called "drawVisualization", so when the callback is initialted on google.load, only the last one is actually called.  Rename the functions so that they are different, and then use a single initializing function to call all three, and call the initializer in the load callback.  You can also get rid of the second and third calls to google.load and google.setOnLoadCallback - you only need to load the library once.

Here's an example of what your initializer might look like:

<script type="text/javascript">

google.load('visualization', '1', {packages: ['corechart']});

google.setOnLoadCallback(function () {

drawVisualization1();

drawVisualization2();

drawVisualization3();

});

</script>

[skirwin]

All of my charts are loading but just not the x and y axis along with the legend.

[asgallant]

Using the code you provided, I only see one chart.  Using the changes I suggested, I see all 3 charts, with axes, in all browsers.

[skirwin]

it seems to get cut off...ill try it in two posts...

[skirwin]

[skirwin]

In my webpage all of my charts are rendering but the issue is it will not render in IE8. Even when I go to the visualization playground in IE8 the code will not render. Is this an issue with Google chart code?

[asgallant]

The visualization API playground is disabled in IE 8.

Using the second post of your code, I do see all 3 charts, but I don't see the problem you outlined of the missing axes or legend.

I still recommend making the changes I posted above, as in the current method, you are making unnecessary requests to the google loader service.    

[Karen Berry]

THANK YOU! I was drawing into hidden divs as well for 4 different tabs. I drew the charts first, then hid the divs and stopped banging my head against the wall.