The problem is that you are assigning the return value of the draw call to
a variable called "chart", and then trying to call the draw method of this
variable (which doesn't exist):
var chart = new
google.visualization.LineChart(document.getElementById('chart_div')).draw(data,
{
// chart options
});
// chart is undefined, since the draw method doesn't return anything
chart.draw(data, options);
Either remove the chart.draw(data, options); line, or use this instead:
var chart = new
google.visualization.LineChart(document.getElementById('chart_div'));
// chart contains the chart object
chart.draw(data, options);
On Tuesday, February 25, 2014 4:47:59 AM UTC-5, Vikas Parab wrote:
>
> 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.
