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 chartsgoogle.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>
double click the yellow alert icon. It will open up a dialog that shows you details about the error. In this case I see the following over and over again:
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; InfoPath.3; .NET CLR 1.1.4322)
Timestamp: Wed, 14 May 2014 21:19:33 UTC
It does not show any error when debugging with the Developer Tools. Maybe it's a time-out issue since you load the js files from the internet. Place all script files and libraries into your site and see if that helps.
cheers, teylyn
buttonMASTER
This probably isn't helpful, but I got a different error than teylyn in IE8 when selecting a Begin Date of 2014-05-05, and End Date of 2014-05-15, and selecting the Closed radio button.
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727)
Timestamp: Thu, 15 May 2014 21:28:52 UTC
Different error (Permission denied), but it looks like the same file is causing the problem though.
Isaac
ASKER
I think it might be due to the files that is needed for the datepicker.
When I downloaded the files for the date picker functionality, there were a lot of files. http://jqueryui.com/datepicker/
I only added about 3 to the site and a few images.
Is there anything else I might need from the site?
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
double click the yellow alert icon. It will open up a dialog that shows you details about the error. In this case I see the following over and over again:
It does not show any error when debugging with the Developer Tools. Maybe it's a time-out issue since you load the js files from the internet. Place all script files and libraries into your site and see if that helps.
cheers, teylyn