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.


Code:
<!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/upd...esigning_with/