Chart not rendering

[TheInnovator]

Can somebody please help me figure out why my page refreshes without drawing my table chart?
Enter in just the first two dates and click submit.  It's supposed to render a google chart but the page just refreshes
You can enter the following dates "10/2013" and "11/2013".
http://isaac.issharepoint.com/Web%20Part%20Page/508Dashboard.aspx

Here's my code:

<script type="text/javascript">

anArray = new Array();
$(function() {  
	$('#autoThisMonth').monthpicker();
	$('#autoLastMonth').monthpicker();
	$('#manThisMonth').monthpicker();
	$('#manLastMonth').monthpicker();
		
	$('#autoLastMonth').change(function() {
		autoLastMonthDate = $('#autoLastMonth').val();	
	});

	// AND HERE
	$('#autoThisMonth').change(function() {		
		autoThisMonthDate = $('#autoThisMonth').val();
	});
	var i=0;
	$().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "508 File Types",
	CAMLViewFields: "<ViewFields><FieldRef Name='Title'></FieldRef></ViewFields>",
	CAMLQuery: "<Query><OrderBy><FieldRef Name='Title' /></OrderBy></Query>",
    completefunc: function (xData, Status) {
	//alert(xData.responseXML.xml);
      $(xData.responseXML).SPFilterNode("z:row").each(function() { 
			scannedItems = new Object();
			scannedItems.Title = $(this).attr("ows_Title");
			scannedItems.totalPages = 0;
			scannedItems.totalPassed = 0;
			scannedItems.totalFailed = 0;
			scannedItems.score = 0;		
			 
			anArray[i] = scannedItems;
			i++;
      });
     }
  }); 
	});


function getMonthsFunc()
{	
alert("HELLO");
alert("Auto This Month: "+autoThisMonthDate);
alert("Last Month: "+autoLastMonthDate);
	//Initialize each table for Automatic and Manual
	    // Initialize data object to hold chart data for the Table
	
			

	alert("Call Function");
	readyPieChart(autoThisMonthDate, "Automatic");
	readyPieChart(autoLastMonthDate, "Automatic");
	
	
	
}
	
function readyPieChart(autoMan, Type)
{
alert("In pie chart function: "+autoMan+" Type: "+Type);
	//This Month Automatic	
    var thisAtutoMonthDataTbl = new google.visualization.DataTable();
    thisAtutoMonthDataTbl.addColumn('string', 'File Type');
    thisAtutoMonthDataTbl.addColumn('number', 'Total Pages');	
	thisAtutoMonthDataTbl.addColumn('number', 'Total Passed');	
	thisAtutoMonthDataTbl.addColumn('number', 'Total Failed');	
	thisAtutoMonthDataTbl.addColumn('number', 'Score');	
    thisAtutoMonthDataTbl.addColumn('number', 'Variance of Total Pages');	
	thisAtutoMonthDataTbl.addColumn('number', 'Variance of Total Passed');	
	thisAtutoMonthDataTbl.addColumn('number', 'Variance of Total Failed');	
	thisAtutoMonthDataTbl.addColumn('number', 'Variance of Score');		
	
	//Last Month Automatic
    var dataTbl = new google.visualization.DataTable();
    dataTbl.addColumn('string', 'File Type');
    dataTbl.addColumn('number', 'Total Pages');	
	dataTbl.addColumn('number', 'Total Passed');	
	dataTbl.addColumn('number', 'Total Failed');	
	dataTbl.addColumn('number', 'Score');	
    dataTbl.addColumn('number', 'Variance of Total Pages');	
	dataTbl.addColumn('number', 'Variance of Total Passed');	
	dataTbl.addColumn('number', 'Variance of Total Failed');	
	dataTbl.addColumn('number', 'Variance of Score');		
	
	
	//This Month Manual
    var dataTbl = new google.visualization.DataTable();
    dataTbl.addColumn('string', 'File Type');
    dataTbl.addColumn('number', 'Total Pages');	
	dataTbl.addColumn('number', 'Total Passed');	
	dataTbl.addColumn('number', 'Total Failed');	
	dataTbl.addColumn('number', 'Score');	
    dataTbl.addColumn('number', 'Variance of Total Pages');	
	dataTbl.addColumn('number', 'Variance of Total Passed');	
	dataTbl.addColumn('number', 'Variance of Total Failed');	
	dataTbl.addColumn('number', 'Variance of Score');		
	
	//Last Month Manual
    var dataTbl = new google.visualization.DataTable();
    dataTbl.addColumn('string', 'File Type');
    dataTbl.addColumn('number', 'Total Pages');	
	dataTbl.addColumn('number', 'Total Passed');	
	dataTbl.addColumn('number', 'Total Failed');	
	dataTbl.addColumn('number', 'Score');	
    dataTbl.addColumn('number', 'Variance of Total Pages');	
	dataTbl.addColumn('number', 'Variance of Total Passed');	
	dataTbl.addColumn('number', 'Variance of Total Failed');	
	dataTbl.addColumn('number', 'Variance of Score');	
	
	var spltDte = autoMan.split("/");
	var monthDte = spltDte[0];
	var yearDte  = spltDte[1];
	
	var qry = "<Query>" +
				  "<Where>" +
					"<And>" +
					  "<Eq>" +
						"<FieldRef Name='Title' />" +
							"<Value Type='Text'>"+monthDte+"</Value>" +
					  "</Eq>" +
					  "<Eq>" +
						"<FieldRef Name='Year' />" + 
							"<Value Type='Text'>"+yearDte+"</Value>" +
					  "</Eq>" +
					"</And>" +
					"</Where>" +
			  "</Query>";
	
	$().SPServices({
		operation: "GetListItems",
		async: false,
		listName: "508 Dashboard Data",
		CAMLViewFields: "<ViewFields><FieldRef Name='Title'></FieldRef><FieldRef Name='Year'></FieldRef><FieldRef Name='FileType'></FieldRef></ViewFields>",
		CAMLQuery: qry,
		completefunc: function (xData, Status) {
		alert(xData.responseXML.xml);
		  $(xData.responseXML).SPFilterNode("z:row").each(function() {			
				for (var x=0; x < anArray.length; x++)
				{		
					if (valSplit($(this).attr("ows_FileType")) == anArray[x].Title)
					{					
						anArray.totalPages += $(this).attr("ows_TotalScanned");
						anArray.totalPassed += $(this).attr("ows_TotalPassed");
						anArray.totalFailed += $(this).attr("ows_TotalFailed");
						x++;												
					}
				}
		  });
		 }
	  }); 	
	
	  //Data for table chart
	  $.each(anArray, function (index, value) {																												
        thisAtutoMonthDataTbl.addRow([anArray[index].Title, anArray[index].totalPages, anArray[index].totalPassed, anArray[index].totalFailed, anArray[index].score]);	

				var tblOption = {
			showRowNumber: true,
			height:305,
			width:200,
			alternatingRowStyle: true,
			cssClassNames: {
            tableRow: 'Alternate',
			selectedTableRow: 'Footer'
			}
			};
			
		var table = new google.visualization.Table(document.getElementById('ThisAutoMonth')); 
		
    }); 
		//thisAtutoMonthDataTbl.addRow(["Total Count", totalConfRecCount]);	

	table.draw(thisAtutoMonthDataTbl, tblOption);	
	  
	
}
	
</script>

<table style="width: 75%">
				<tr>
								<td colspan="3">Automatic Scan Results</td>
				</tr>
				<tr>
								<td style="width: 210px">This Month:&nbsp;<input type="text" id="autoThisMonth" style="background-color:#99FFCC"></td>
								<td style="width: 238px">Last Month:&nbsp;<input type="text" id="autoLastMonth" style="background-color:#99FFCC"></td>
								<td><button type="text" id="submitDates"  onclick="getMonthsFunc(); return false;">Submit</button></td>
				</tr>
				<tr>
								<td style="width: 210px"><div id="ThisAutoMonth"></div></td>
								<td style="width: 238px">TABLE CHART</td>
								<td>PIE CHARTPIE CHART</td>								
				</tr>
</table>

<br />
<br />
<br />

<table style="width: 75%">
				<tr>
								<td colspan="3">Manual Scan Results</td>
				</tr>
				<tr>
								<td style="width: 217px">This Month:&nbsp;<input type="text" id="manThisMonth" style="background-color:#99FFCC"></td>
								<td style="width: 224px">Last Month:&nbsp;<input type="text" id="manLastMonth" style="background-color:#99FFCC"></td>
								<td><button type="text" id="submitDates"  onclick="getDatesFunc(); return false;">Submit</button></td>
				</tr>
				<tr>
								<td style="width: 217px">TABLE CHART</td>
								<td style="width: 224px">TABLE CHART</td>
								<td>PIE CHARTPIE CHART</td>

				</tr>
</table>

[Andrew Gallant]

I think that the page is calling a form submission when you click those buttons (as if they were "submit" type inputs).  According to Chrome's DOM inspector, there are 5 click event handlers (not including the in-line "onclick" declaration) on those buttons.  Some seem innocuous, but others are obfuscated, so I can't tell what they are doing.  If there is a form submission firing, then that would explain why the page reloads (as the form's "action" attribute points back to the same URL).

As an aside, you have two buttons with the same ID; you should change the ID's so they are unique.

[Isaac Sogunro]

I was missing the table corechart package but, the table appears and then disappears.

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/q1dkNg2xOQk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--
-Isaac-

http://twitter.com/#!/feedy0urmind
You are today where your thoughts have brought you; you will be tomorrow where your thoughts take you.
- James Allen

[Isaac Sogunro]

Nevermind, I changed the function around

[Isaac Sogunro]

Take a look now.

How do I round off the score column in a google table chart?

The javascript Round() is not working in this instance.

[Andrew Gallant]

Use a NumberFormatter:

var formatter = new google.visualization.NumberFormat({pattern: '#.##'}); // show 2 decimal places
formatter.format(data, 4); // format column 4 in DataTable "data"

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--
-Isaac-

http://twitter.com/#!/feedy0urmind
You are today where your thoughts have brought you; you will be tomorrow where your thoughts take you.
- James Allen

--
-Isaac-

http://twitter.com/#!/feedy0urmind
You are today where your thoughts have brought you; you will be tomorrow where your thoughts take you.
- James Allen

[Isaac Sogunro]

I tried to format the fourth column to show as a percentage but, it's not working.

Here's what I did:

    var thisAtutoMonthDataTbl = new google.visualization.DataTable();

    thisAtutoMonthDataTbl.addColumn('string', 'File Type');

    thisAtutoMonthDataTbl.addColumn('number', 'Total Pages');

thisAtutoMonthDataTbl.addColumn('number', 'Total Passed');

thisAtutoMonthDataTbl.addColumn('number', 'Total Failed');

thisAtutoMonthDataTbl.addColumn('number', 'Score');

var formatter = new google.visualization.NumberFormat({pattern: '###%'}); 

formatter.format(thisAtutoMonthDataTbl, 4); // format column 4 in DataTable "data"

 //Data for table chart

 $.each(anArray, function (index, value) {

        thisAtutoMonthDataTbl.addRow([anArray[index].Title, Number(anArray[index].totalPages), Number(anArray[index].totalPassed), Number(anArray[index].totalFailed), anArray[index].score*100]);

 }); 

 

 var table = new google.visualization.Table(document.getElementById('ThisAutoMonth')); 

var tblOption = {

showRowNumber: true,

height:305,

width:200,

alternatingRowStyle: true,

cssClassNames: {

            tableRow: 'Alternate',

selectedTableRow: 'Footer'

}

};

 table.draw(thisAtutoMonthDataTbl, tblOption);

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

[Isaac Sogunro]

I also tried

var formatter = new google.visualization.NumberFormat({ 

  pattern: '#%', 

  fractionDigits: 2

});

formatter.format(thisAtutoMonthDataTbl, 4); // format column 4 in DataTable "data"

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

[Andrew Gallant]

You have to format the data after you enter it.  Move the formatter code below your $.each(...) call.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.