The only errors I see on that page are on solCenterDashboard.aspx, lines
952 and 959: "documentGetElementsByName" and "MoveSiteTitle" are not
defined.
The PieChart doesn't draw correctly if the user doesn't select either of
the "Received" or "Closed" radio buttons (as the data returns all 0's),
which might throw that error in older versions of IE (I only have IE 11 to
test on here ATM); Firefox, Chrome, and IE 11 don't throw any errors - they
silently fail to draw the chart. You may wish to require your users to
select one of the radio buttons.
The only other thing I noticed is that you use HTML-style comment tags
inside your javascript:
<!-- 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);
I doubt that is causing your error, but you should use // or /*...*/comment
tags inside javascript.
On Tuesday, May 13, 2014 10:56:09 AM UTC-4, TheInnovator wrote:
>
> Hi,
>
> This is really bugging me.
>
> My chart works fine when dates are entered but on the bottom left of the
> page, there is a little yellow icon indicating a javascript error.
> http://isaac.issharepoint.com/Web%20Part%20Page/solCenterDashboard.aspx
>
>
> Here's part of the error.....
> Webpage error details
>
> User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1;
> Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR
> 3.0.30729; Media Center PC 6.0; .NET CLR 1.1.4322; .NET4.0C; .NET4.0E)
> Timestamp: Tue, 13 May 2014 14:52:44 UTC
>
>
> Message: Script error
> Line: 0
> Char: 0
> Code: 0
> URI:
> https://www.google.com/uds/api/visualization/1.0/ce05bcf99b897caacb56a7105ca4b6ed/format+en,default+en,ui+en,table+en,corechart+en.I.js
>
>
> Message: Script error
> Line: 0
> Char: 0
> Code: 0
> URI:
> https://www.google.com/uds/api/visualization/1.0/ce05bcf99b897caacb56a7105ca4b6ed/format+en,default+en,ui+en,table+en,corechart+en.I.js
>
>
>
>
> Here's my code. Any ideas?
>
> <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 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++;
> });
> }
> });
>
> var qry = "<Query>" +
> "<Where>" +
> "<And>" +
> "<Gt>" +
> "<FieldRef Name='StartDate' />" +
> "<Value Type='DateTime'>"+beginDate+"</Value>" +
> "</Gt>" +
> "<Leq>" +
> "<FieldRef Name='StartDate' />" +
> "<Value Type='DateTime'>"+endDate+"</Value>" +
> "</Leq>" +
> "</And>" +
> "</Where>" +
> "</Query>";
>
>
> $().SPServices({
> operation: "GetListItems",
> async: false,
> listName: "Ticketing System",
> CAMLViewFields: "<ViewFields><FieldRef
> Name='Issue_x0020_Type'></FieldRef><FieldRef
> Name='StartDate'></FieldRef><FieldRef
> Name='TicketCategory'></FieldRef></ViewFields>",
> CAMLQuery: qry,
> completefunc: function (xData, Status) {
> $(xData.responseXML).SPFilterNode("z:row").each(function() {
> for (var x=0; x < ticketArray.length; x++)
> {
> //alert("type: "+$(this).attr("ows_TicketCategory"));
> //if (valSplit($(this).attr("ows_TicketCategory")) == ticketArray[x].Title)
> if ($(this).attr("ows_Issue_x0020_Type") == 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">
> <tr><td style="font-weight:bold">Begin Date:</td><td><input type="text"
> id="beginDate" style="background-color:#99FFCC"></td></tr>
> <tr><td style="font-weight:bold">End Date:</td><td><input type="text"
> id="endDate" style="background-color:#99FFCC"></td></tr>
> <tr><td colspan="2" align="center"><button type="text" id="submitDates"
> onclick="getDatesFunc(); return false;">Submit</button></td></tr>
> </table>
>
> <table align="left">
>
> <tr>
> <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 /><div id="vizTbl" style="width: 230px; height:
> 500px;"></div></td></tr>
> </table>
> </td>
> </tr>
> </table>
>
>
>
>
--
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/d/optout.
