Hi asgallant,
Thanks for response and solution but that won't work.
Please find below herewith complete html demo which throws same error in
browser console window.
In firefox's Error console window it says:
x TypeError: chart is undefined
x TypeError: chart1 is undefined
And
In IE's (11) console window it says:
SCRIPT5007: Unable to get property 'draw' of undefined or null reference
SCRIPT5007: Unable to get property 'draw' of undefined or null reference
Kindly take a look and guide.
Thanks
---------------------------------------------------------------------
<!DOCTYPE HTML>
<html>
<head>
<title>Google Line Chart Demo</title>
<style type="text/css">
#maskLayer
{
font-family:Arial;position:fixed;top:0;right:0;bottom:0;left:0;margin:auto;margin-top:0px;width:100%;height:100%;
background:url("/arms_images/transparent.gif")
center;z-index:0;visibility: hidden;
}
#divPopup
{ position:fixed;top:0;right:0;bottom:0;left:0;margin:10px
0px 0px 150px;padding:30px;width:750px;
height:450px;background-color:Gray;visibility:hidden;z-index:1;
}
#chartDataSales
{ margin-left:auto;margin-right:auto;width:800px;}
</style>
</head>
<body>
<a style='font-size:12px;text-decoration:none;'
href='javascript:fnShowGraph("sales");' >User Graph</a>
<a style='font-size:12px;text-decoration:none;margin-left:15px;'
href='javascript:fnShowGraph("sales");' >Sales Graph</a>
<div id="maskLayer">
<div id="divPopup" style="text-align:center;">
<div id="chart_div" style="width: 700px; height:
450px;"></div>
<div id="saleschart_div" style="width: 700px; height:
450px;"></div>
<input type="button" value="Close" onclick="HidePopup();"
style="margin-top:3px;" />
<span style="color:#FFF;">
(Hover on a point to see exact data per month)
</span>
</div>
</div>
<script type="text/javascript"
src="/js/jquery/jquery.min.1.7.1.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi";></script
>
<script language="javascript" type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
google.setOnLoadCallback(drawChartSales);
/*google.setOnLoadCallback(function() {
drawChart();
drawChartSales();
});*/
function drawChartSales() {
var sChartData =
"[['Year','2010',{type:'string',role:'annotation'},'2011',{role:'annotation'},'2012',{role:'annotation'},'2013',{role:'annotation'},'2014',{role:'annotation'}],['Jan',0,'',0,'',177455,'',455203,'',1601067,''],['Feb',0,'',0,'',177455,'',502298,'',1601067,''],['Mar',0,'',0,'',177503,'',504746,'',,''],['Apr',0,'',0,'',211954,'',515992,'',,''],['May',0,'',0,'',219845,'',524279,'',,''],['Jun',0,'',0,'',220291,'',530911,'',,''],['Jul',0,'',0,'',223788,'',536148,'',,''],['Aug',0,'',0,'',227528,'',797180,'',,''],['Sep',0,'',0,'',263063,'',1327206,'',,''],['Oct',0,'',0,'',362060,'',1486428,'',,''],['Nov',0,'',127266,'',439343,'',1598417,'',,''],['Dec',0,'',177455,'',449909,'',1598417,'',,'']]";
var data =
google.visualization.arrayToDataTable(eval(sChartData));
var options1 = {
backgroundColor: "#ccc"
,colors: ['red', 'green', 'blue', 'yellow', 'orange']
,vAxis:{
baselineColor: '#fff'
,gridlineColor: '#fff'
},
hAxis: {
baselineColor: '#f00'
}
};
var formatter = new google.visualization.NumberFormat({ prefix:
'$' });
formatter.format(data, 1);
formatter.format(data, 3);
formatter.format(data, 5);
formatter.format(data, 7);
formatter.format(data, 9);
var chart1 = new
google.visualization.LineChart(document.getElementById('saleschart_div')).draw(data,
{
series: {// set the options for all series
0: { lineWidth: 1, pointSize: 5 },
1: { lineWidth: 1, pointSize: 5 },
2: { lineWidth: 1, pointSize: 5 },
3: { lineWidth: 1, pointSize: 5 },
4: { lineWidth: 1, pointSize: 5 }
}
, title: 'Sales Tracker'
, vAxis: { format: "$#,###" }
});
chart1.draw(data, options1);
}
function drawChart() {
var sChartData =
"[['Year','2010',{type:'string',role:'annotation'},'2011',{role:'annotation'},'2012',{role:'annotation'},'2013',{role:'annotation'},'2014',{role:'annotation'}],['Jan',0,'',0,'',2,'',187,'',349,''],['Feb',0,'',0,'',2,'',209,'',357,''],['Mar',0,'',0,'',3,'',223,'',,''],['Apr',0,'',0,'',4,'',229,'',,''],['May',0,'',0,'',100,'',238,'',,''],['Jun',0,'',1,'',145,'',288,'',,''],['Jul',0,'',1,'',158,'',293,'',,''],['Aug',0,'',1,'',173,'',294,'',,''],['Sep',0,'',1,'',178,'',347,'',,''],['Oct',0,'',1,'',182,'',363,'',,''],['Nov',0,'',2,'',182,'',367,'',,''],['Dec',0,'',2,'',184,'',368,'',,'']]";
var data =
google.visualization.arrayToDataTable(eval(sChartData));
var options = {
backgroundColor: "#ccc",
colors: ['red', 'green', 'blue', 'yellow', 'orange'],
vAxis: {
baselineColor: '#fff'
,gridlineColor: '#fff'
},
hAxis: {
baselineColor: '#f00'
}
};
var chart = new
google.visualization.LineChart(document.getElementById('chart_div')).draw(data,
{
series: {// set the options for all series
0: { lineWidth: 1, pointSize: 5 },
1: { lineWidth: 1, pointSize: 5 },
2: { lineWidth: 1, pointSize: 5 },
3: { lineWidth: 1, pointSize: 5 },
4: { lineWidth: 1, pointSize: 5 }
}
, title: 'Current Users'
});
chart.draw(data, options);
}
function fnShowGraph(sGraph) {
if (sGraph == "users") {
document.getElementById('chart_div').style.visibility =
'visible';
document.getElementById('chart_div').style.display = 'block';
document.getElementById('saleschart_div').style.visibility =
'hidden';
document.getElementById('saleschart_div').style.display =
'none';
}
else {
document.getElementById('chart_div').style.visibility =
'hidden';
document.getElementById('chart_div').style.display = 'none';
document.getElementById('saleschart_div').style.visibility =
'visible';
document.getElementById('saleschart_div').style.display =
'block';
}
ShowPopup();
}
function ShowPopup() {
document.getElementById('maskLayer').style.visibility = 'visible';
document.getElementById('divPopup').style.visibility = 'visible';
}
function HidePopup() {
document.getElementById('chart_div').style.visibility = 'hidden';
document.getElementById('saleschart_div').style.visibility =
'hidden';
document.getElementById('maskLayer').style.visibility = 'hidden';
document.getElementById('divPopup').style.visibility = 'hidden';
}
</script>
</body>
</html>
On Monday, February 24, 2014 10:42:41 PM UTC+5:30, asgallant wrote:
> First, you should not have two callbacks from the google loader. Use a
> single callback that then calls the two draw functions:
>
> google.setOnLoadCallback(function () {
> drawChart();
> drawChartSales();
> });
>
> Fix that and then see if the error persists. If you are still having
> problems, post the full code along with a sample of the contents of
> sChartData.
>
> On Monday, February 24, 2014 9:52:58 AM UTC-5, Vikas Parab wrote:
>>
>> Hi Everybody,
>>
>> I am showing two google line chart on page and they works fine.
>>
>> Only problem is that, in Firefox Browser console, I am getting error
>> saying,
>>
>> TypeError: chart is undefined (for one chart.)
>>
>> For other chart also showing same error
>>
>> TypeError: chart1 is undefined
>>
>> Few parts of my code:
>>
>> google.load("visualization", "1", { packages: ["corechart"] });
>> google.setOnLoadCallback(drawChart);
>> google.setOnLoadCallback(drawChartSales);
>>
>> function drawChartSales() {
>> var sChartData = document.getElementById("chartDataSales").value;
>>
>> var data =
>> google.visualization.arrayToDataTable(eval(sChartData));
>>
>> var options1 = {
>>
>> backgroundColor: "#ccc"
>> , colors: ['red', 'green', 'blue', 'yellow', 'orange']
>> , vAxis: {
>> baselineColor: '#fff'
>> , gridlineColor: '#fff'
>>
>> //, format: "$#,###"
>> },
>> hAxis: {
>> baselineColor: '#f00'
>> }
>> };
>>
>> var formatter = new google.visualization.NumberFormat({ prefix:
>> '$' });
>> formatter.format(data, 1);
>> formatter.format(data, 3);
>> formatter.format(data, 5);
>> formatter.format(data, 7);
>> formatter.format(data, 9);
>>
>> var chart1 = new
>> google.visualization.LineChart(document.getElementById('saleschart_div')).draw(data,
>> {
>> series: {// set the options for all series
>> 0: { lineWidth: 1, pointSize: 5 },
>> 1: { lineWidth: 1, pointSize: 5 },
>> 2: { lineWidth: 1, pointSize:
>> 5/*,visibleInLegend: false*/ },
>> 3: { lineWidth: 1, pointSize: 5 },
>> 4: { lineWidth: 1, pointSize: 5 }
>> }
>> , title: 'Sales Tracker'
>> , vAxis: { format: "$#,###" }
>>
>> });
>>
>> chart1.draw(data, options1);
>> }
>>
>> Code for other chart is also same except div id and chart variable.
>> (above is chart1 and other is only chart)
>>
>> Please guide how I can remove those error from error console.
>>
>> Thanks,
>>
>>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
