Solved: JavaScript Error in SharePoint

Hi All,

I am using Google charts with my SharePoint 2010 site and it works fine. The only problem that's bugging me is that in the bottom left corner of the IE 8 browser, there is a yellow icon (Error on page) which signifies a JavaScript error. I can't figure out what it all means. Here is a link to the site: http://isaac.issharepoint.com/Web%20Part%20Page/solCenterDashboard.aspx (Select any date ranges in May)

Here's my code
<script type="text/javascript" src="http://isaac.issharepoint.com/Script/jquery-1.8.2.min.js" language="javascript"></script>
<script type="text/javascript" src="http://isaac.issharepoint.com/Script/jquery.SPServices-0.7.2.min.js" language="javascript"></script>
<script type="text/javascript" src="http://isaac.issharepoint.com/Script/utilityFunctions.js" language="javascript"></script>
<link rel="stylesheet" href="http://isaac.issharepoint.com/Script/jquery-ui-1.10.4.custom.css">
<script type="text/javascript" src="http://isaac.issharepoint.com/Script/jquery-ui-1.10.4.custom.js" language="javascript"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<style>
.conformanceAlternate
{
	background-color:#BDBDBD
}
.conformanceFooter
{	
	font-weight:bold;
}

#vizTbl tr:last-child {
    font-weight: bold;
}

#vizTbl tr:last-child td {
    background-color: #a7d5b3;
}

</style>

<script type="text/javascript">
//_spBodyOnLoadFunctionNames.push("getDatesFunc");
//The Google Visualization library implements several classes and methods that you'll need to manipulate all charts
google.load("visualization", "1", {packages:["corechart", "table"]});

//Functionality for the calendar dates
 $(function() {  
	$( "#beginDate" ).datepicker( { dateFormat: 'yy-mm-dd',
								  changeMonth: true,      
								  changeYear: true

	} );
	$( "#endDate" ).datepicker( { dateFormat: 'yy-mm-dd',
								  changeMonth: true,      
								  changeYear: true
	} );	
 });
 

 //Declare an array
 var ticketArray = new Array();
function getDatesFunc()
{	

		//Get the dates to compare and subtract
		var beginDate = $('#beginDate').datepicker("getDate");
	    var endDate = $('#endDate').datepicker("getDate");
		var radioSelection = jQuery( 'input[name=received]:checked' ).val() 
			
		var compDate = endDate - beginDate;
		if(compDate<0) 
		{
			alert("Begin Date must be before End Date.");
			return false;
		}	
		else
		{
			//Get the actual Dates entered by the user
			var beginDate = $('#beginDate').datepicker({ dateFormat: 'yy-mm-dd' }).val();
			var endDate = $('#endDate').datepicker({ dateFormat: 'yy-mm-dd' }).val();
		}
		
    // Initialize data object to hold chart data for the Table
    var dataTbl = new google.visualization.DataTable();
    dataTbl.addColumn('string', 'Ticket Type');
    dataTbl.addColumn('number', 'Total Count');	
	
	// Initialize data object to hold data for pie chart
    var dataPie = new google.visualization.DataTable();
    dataPie.addColumn('string', 'Ticket Type');
    dataPie.addColumn('number', 'Total Count');		
	
var i = 0;
$().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "TicketType",
	CAMLViewFields: "<ViewFields><FieldRef Name='Title'></FieldRef></ViewFields>",
	CAMLQuery: "<Query><OrderBy><FieldRef Name='Title' /></OrderBy></Query>",
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
			ticketItem = new Object();
			ticketItem.Title = $(this).attr("ows_Title");
			ticketItem.TotCount = 0;		
			 
			ticketArray[i] = ticketItem;
			i++;
      });
     }
  }); 	
  
if (radioSelection=="Received")
{  
var qry = "<Query>" +
	"<Where>" +
		"<And>" +
			"<Gt>" +
				"<FieldRef Name='ReceivedDate' />" +
					"<Value Type='DateTime'>"+beginDate+"</Value>" +
			"</Gt>" +
			"<Leq>" +
				"<FieldRef Name='ReceivedDate' />" +
					"<Value Type='DateTime'>"+endDate+"</Value>" +
			"</Leq>" +
		"</And>" +
	"</Where>" +
"</Query>";
}
else
{
var qry = "<Query>" +
	"<Where>" +
		"<And>" +
			"<Gt>" +
				"<FieldRef Name='ResolutionDate' />" +
					"<Value Type='DateTime'>"+beginDate+"</Value>" +
			"</Gt>" +
			"<Leq>" +
				"<FieldRef Name='ResolutionDate' />" +
					"<Value Type='DateTime'>"+endDate+"</Value>" +
			"</Leq>" +
		"</And>" +
	"</Where>" +
"</Query>";
}

$().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "Ticketing System",
	CAMLViewFields: "<ViewFields><FieldRef Name='TicketType'></FieldRef><FieldRef Name='ReceivedDate'></FieldRef></ViewFields>",
	CAMLQuery: qry,
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() { 	  
		for (var x=0; x < ticketArray.length; x++)
		{		
			if (valSplit($(this).attr("ows_TicketType")) == ticketArray[x].Title)
			{					
						ticketArray[x].TotCount += 1;
						x++;												
			}
		}			
      });
     }
  });	
  
	  var totalConfRecCount = 0;	
	  //Data for table chart
	  $.each(ticketArray, function (index, value) {																													
        dataTbl.addRow([ticketArray[index].Title, ticketArray[index].TotCount]);
		totalConfRecCount += ticketArray[index].TotCount;
    }); 
		dataTbl.addRow(["Total Count", totalConfRecCount]);
		
		//Data for pie chart
		$.each(ticketArray, function (index, value) {																													
        dataPie.addRow([ticketArray[index].Title, ticketArray[index].TotCount]);
    }); 
		
    var options = {
        pieSliceText: 'value',
		is3D: false,
        legend: {
            position: 'labeled'
        },
    	  width: 700,
		  height: 400,
        chartArea: {
            height: '85%',
            width: '90%'
        },
        pieStartAngle: 90
    };

		var tblOption = {
			showRowNumber: true,
			height:305,
			width:200,
			alternatingRowStyle: true,
			cssClassNames: {
            tableRow: 'conformanceAlternate',
			selectedTableRow: 'conformanceFooter'
			}
		};
<!-- Step 4 - Instantiate the Chart class -->
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));    
  	  var table = new google.visualization.Table(document.getElementById('vizTbl')); 
		   

<!-- Step 6 - Call chart.draw() function, passing in 'data' and 'options'	-->	
        chart.draw(dataPie, options);  
		  
		table.draw(dataTbl, tblOption);	
}

</script>
<table align="center" border=0 width="25%">
	<tr><td style="font-weight:bold">Begin Date:</td><td><input type="text" id="beginDate" style="background-color:#99FFCC"></td>
		<td>
			<input name="received" type="radio" value="Received" />
		Received</td></tr>
	<tr><td style="font-weight:bold">End Date:</td><td><input type="text" id="endDate" style="background-color:#99FFCC"></td>
		<td>
			<input name="received" type="radio" value="Closed" />
		Closed</td></tr>
	<tr><td colspan="3" align="center"><button type="text" id="submitDates"  onclick="getDatesFunc(); return false;">Submit</button></td></tr>
</table>

<table align="left">
	<td>
		<table>
			<tr><td><div id="chart_div" style="width: 700px; height: 80px;"></div></td></tr>
		</table>
	</td>
	<td>
		<table id="conformTbl">
			<tr><td><br /><br /><br /><br /><div id="vizTbl" style="width: 400px; height: 450px;"></div></td></tr>
		</table>
	</td>
</table>
Open in new window