...

View Full Version : Cannot apply plugin to specific table, not pulling info from user input



Drew012
07-05-2012, 08:39 PM
I am new to javascript and programming and I am trying to use the jQuery.visualize.js plugin. I have all my directories set up and correctly referenced them. When I use the example index.html files everything works. There are two problems, it creates two graphs instead of one (I comment on the code of the graph I want to use). Also, I looked at the code for the plugin and it looks like it is set up to just scrape the information from a static <table> element. I believe the reason it isn't working is there is no static information to pull on the page since I use a function to calculate the user input.

Any tips would be great, like I said I am new to this and I know the code is sloppy right now because I basically tried to incorporate the plugin with my html page without changing it.





<!DOCTYPE html>
<head>
<meta name='viewport' content='user-scalable=no, width=device-width' />
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
<title>Wheel of Life Assessment</title>
<link rel='stylesheet' media='all' href='css/main.css' />
<link rel='stylesheet' media='only screen and (max-width: 800px)' href='css/mobile.css' />



<script type="text/javascript" src="http://filamentgroup.github.com/EnhanceJS/enhance.js"></script>
<script type="text/javascript">
// Run capabilities test
enhance({
loadScripts: [
{src: 'js/excanvas.js', iecondition: 'all'},
'https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js',
'js/visualize.jQuery.js',
'js/example.js'
],
loadStyles: [
'css/visualize.css',
'css/visualize-dark.css'
]
});
</script>





</head>

<SCRIPT TYPE='text/javascript' LANGUAGE='JavaScript'>

function startup() {
addOptions("Q1");
addOptions("Q2");
addOptions("Q3");
addOptions("Q4");
addOptions("Q5");
addOptions("Q6");
addOptions("Q7");
addOptions("Q8");
addOptions("Q9");
addOptions("Q10");
addOptions("Q11");
addOptions("Q12");
addOptions("Q13");
addOptions("Q14");
addOptions("Q15");
addOptions("Q16");
addOptions("Q17");
addOptions("Q18");
addOptions("Q19");
addOptions("Q20");
addOptions("Q21");
addOptions("Q22");
addOptions("Q23");
addOptions("Q24");

document.getElementById("Q1").focus();
}

function addOptions(selectid) {
var optn;
for (var i = 1; i <= 100; i++) {
optn = document.createElement("OPTION");
optn.text = i;
optn.value = i;
var listbox = document.getElementById(selectid);
listbox.add(optn,null);
}
}

function updateCounts(countId) {
var tallyTable = document.getElementById("Tally");
if (countId == "Q1" || countId == "Q9" || countId == "Q17") {
var nSocial = 0;
nSocial = parseInt(document.getElementById("Q1").value);
nSocial += parseInt(document.getElementById("Q9").value);
nSocial += parseInt(document.getElementById("Q17").value);
tallyTable.rows[0].cells[1].firstChild.data = nSocial;
}
else if (countId == "Q5" || countId == "Q13" || countId == "Q21") {
var nFinancial = 0.0;
nFinancial = parseInt(document.getElementById("Q5").value);
nFinancial += parseInt(document.getElementById("Q13").value);
nFinancial += parseInt(document.getElementById("Q21").value);
tallyTable.rows[0].cells[4].firstChild.data = nFinancial;
}
else if (countId == "Q2" || countId == "Q10" || countId == "Q18") {
var nSpiritual = 0.0;
nSpiritual = parseInt(document.getElementById("Q2").value);
nSpiritual += parseInt(document.getElementById("Q10").value);
nSpiritual += parseInt(document.getElementById("Q18").value);
tallyTable.rows[1].cells[1].firstChild.data = nSpiritual;
}
else if (countId == "Q6" || countId == "Q14" || countId == "Q22") {
var nProfessional = 0.0;
nProfessional = parseInt(document.getElementById("Q6").value);
nProfessional += parseInt(document.getElementById("Q14").value);
nProfessional += parseInt(document.getElementById("Q22").value);
tallyTable.rows[1].cells[4].firstChild.data = nProfessional;
}
else if (countId == "Q3" || countId == "Q11" || countId == "Q19") {
var nPhysical = 0.0;
nPhysical = parseInt(document.getElementById("Q3").value);
nPhysical += parseInt(document.getElementById("Q11").value);
nPhysical += parseInt(document.getElementById("Q19").value);
tallyTable.rows[2].cells[1].firstChild.data = nPhysical;
}
else if (countId == "Q7" || countId == "Q15" || countId == "Q23") {
var nCommunity = 0.0;
nCommunity = parseInt(document.getElementById("Q7").value);
nCommunity += parseInt(document.getElementById("Q15").value);
nCommunity += parseInt(document.getElementById("Q23").value);
tallyTable.rows[2].cells[4].firstChild.data = nCommunity;
}
else if (countId == "Q4" || countId == "Q12" || countId == "Q20") {
var nFamily = 0.0;
nFamily = parseInt(document.getElementById("Q4").value);
nFamily += parseInt(document.getElementById("Q12").value);
nFamily += parseInt(document.getElementById("Q20").value);
tallyTable.rows[3].cells[1].firstChild.data = nFamily;
}
else if (countId == "Q8" || countId == "Q16" || countId == "Q24") {
var nMental = 0.0;
nMental = parseInt(document.getElementById("Q8").value);
nMental += parseInt(document.getElementById("Q16").value);
nMental += parseInt(document.getElementById("Q24").value);
tallyTable.rows[3].cells[4].firstChild.data = nMental;
}
}

</SCRIPT>

<body onLoad='startup();'>
<div class='content'>
<center>

<b>Wheel of Life Assessment</b><br /><br />

<table id='Tally' border='0'>
// This is the graph I want the plugin invoked upon
<tr><td align='left' width='35%'>SOCIAL: </td><td align='right' width='10%'>0</td> <td width='10%'>&nbsp;&nbsp;</td> <td align='left' width='35%'>FINANCIAL: </td><td align='right' width='10%'>0</td></tr>
<tr><td align='left'>SPIRITUAL:</td><td align='right'>0</td> <td>&nbsp;&nbsp;</td> <td align='left'>PROFESSIONAL:</td><td align='right'>0</td></tr>
<tr><td align='left'>PHYSICAL: </td><td align='right'>0</td> <td>&nbsp;&nbsp;</td> <td align='left'>COMMUNITY: </td><td align='right'>0</td></tr>
<tr><td align='left'>FAMILY: </td><td align='right'>0</td> <td>&nbsp;&nbsp;</td> <td align='left'>MENTAL: </td><td align='right'>0</td></tr>
</table>


<hr />
<table id='Questions' border='0'>
<tr><td>1.</td><td align='left'>I have several close friends. </td> <td><select id='Q1' tabindex='1' onchange='updateCounts("Q1")'><option value='0'>0</option></select></td></tr>
<tr><td>2.</td><td align='left'>I meditate/pray daily. </td> <td><select id='Q2' tabindex='2' onchange='updateCounts("Q2")'><option value='0'>0</option></select></td></tr>
<tr><td>3.</td><td align='left'>I exercise vigorously daily. </td> <td><select id='Q3' tabindex='3' onchange='updateCounts("Q3")'><option value='0'>0</option></select></td></tr>
<tr><td>4.</td><td align='left'>I enjoy time spent with my family. </td> <td><select id='Q4' tabindex='4' onchange='updateCounts("Q4")'><option value='0'>0</option></select></td></tr>
<tr><td>5.</td><td align='left'>I have set financial goals. </td> <td><select id='Q5' tabindex='5' onchange='updateCounts("Q5")'><option value='0'>0</option></select></td></tr>
<tr><td>6.</td><td align='left'>I am satisfied with my career. </td> <td><select id='Q6' tabindex='6' onchange='updateCounts("Q6")'><option value='0'>0</option></select></td></tr>
<tr><td>7.</td><td align='left'>I am involved in the community. </td> <td><select id='Q7' tabindex='7' onchange='updateCounts("Q7")'><option value='0'>0</option></select></td></tr>
<tr><td>8.</td><td align='left'>I enjoy reading books. </td> <td><select id='Q8' tabindex='8' onchange='updateCounts("Q8")'><option value='0'>0</option></select></td></tr>
<tr><td>9.</td><td align='left'>I make friends easily. </td> <td><select id='Q9' tabindex='9' onchange='updateCounts("Q9")'><option value='0'>0</option></select></td></tr>
<tr><td>10.</td><td align='left'>I have established spiritual goals.</td> <td><select id='Q10' tabindex='10' onchange='updateCounts("Q10")'><option value='0'>0</option></select></td></tr>
<tr><td>11.</td><td align='left'>I eat nutritious foods. </td> <td><select id='Q11' tabindex='11' onchange='updateCounts("Q11")'><option value='0'>0</option></select></td></tr>
<tr><td>12.</td><td align='left'>I write/call members of the family.</td> <td><select id='Q12' tabindex='12' onchange='updateCounts("Q12")'><option value='0'>0</option></select></td></tr>
<tr><td>13.</td><td align='left'>I am earning the income I want. </td> <td><select id='Q13' tabindex='13' onchange='updateCounts("Q13")'><option value='0'>0</option></select></td></tr>
<tr><td>14.</td><td align='left'>I am involved in creative work. </td> <td><select id='Q14' tabindex='14' onchange='updateCounts("Q14")'><option value='0'>0</option></select></td></tr>
<tr><td>15.</td><td align='left'>I belong to community associations.</td> <td><select id='Q15' tabindex='15' onchange='updateCounts("Q15")'><option value='0'>0</option></select></td></tr>
<tr><td>16.</td><td align='left'>I attend seminars, take courses. </td> <td><select id='Q16' tabindex='16' onchange='updateCounts("Q16")'><option value='0'>0</option></select></td></tr>
<tr><td>17.</td><td align='left'>I enjoy socializing. </td> <td><select id='Q17' tabindex='17' onchange='updateCounts("Q17")'><option value='0'>0</option></select></td></tr>
<tr><td>18.</td><td align='left'>I attend church/synagogue/etc. </td> <td><select id='Q18' tabindex='18' onchange='updateCounts("Q18")'><option value='0'>0</option></select></td></tr>
<tr><td>19.</td><td align='left'>I participate regularly in sports. </td> <td><select id='Q19' tabindex='19' onchange='updateCounts("Q19")'><option value='0'>0</option></select></td></tr>
<tr><td>20.</td><td align='left'>I enjoy family reunions/gatherings.</td> <td><select id='Q20' tabindex='20' onchange='updateCounts("Q20")'><option value='0'>0</option></select></td></tr>
<tr><td>21.</td><td align='left'>I have a savings/investment plan. </td> <td><select id='Q21' tabindex='21' onchange='updateCounts("Q21")'><option value='0'>0</option></select></td></tr>
<tr><td>22.</td><td align='left'>I have reached professional goals. </td> <td><select id='Q22' tabindex='22' onchange='updateCounts("Q22")'><option value='0'>0</option></select></td></tr>
<tr><td>23.</td><td align='left'>I volunteer for community projects.</td> <td><select id='Q23' tabindex='23' onchange='updateCounts("Q23")'><option value='0'>0</option></select></td></tr>
<tr><td>24.</td><td align='left'>I listen to learning programs. </td> <td><select id='Q24' tabindex='24' onchange='updateCounts("Q24")'><option value='0'>0</option></select></td></tr>
</table>



<script>

$('Tally').visualize();
$('.visualize').trigger('visualizeRefresh');
$('table')
.visualize()
.appendTo('body')
.trigger('visualizeRefresh');

</script>



</center>
</div>
</body>

</html>





Also the plugin info can be found here:
http://www.filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum