...

View Full Version : setTimeout OOP class help. OOP newbie.



jdb
05-31-2005, 08:34 PM
Hello. I am creating a script to dynamically create and animated bar graphs. I am cruising smoothly on most issues; however, I am having one problem with the setTimeout method in Mozilla (if there is more than one graph, the timeout calls collide and rendering is sketchy).

I have found a timeout class that I am utilizing (here (http://www.codingforums.com/showthread.php?s=&postid=50902)), but I am VERY new to OOP and I believe that is how I need to implement the timeout calls in order to prevent the sketchy rendering (timeouts clashing).

Any assistance would be greatly appreciated, and all comments/suggestions are welcome in other areas as well.

My Code follows (not the arrays will eventually be dynamically generated). There are two timeout calls, easily found by searching for "setTimeout":


<html>

<head>

<link rel="stylesheet" href="graph.css" type="text/css">
<script language="javascript" src="classTimer.js"></script>
<script language="javascript">

arrN = new Array();
arrN[0] = "Test";
arrN[1] = "Test2";
arrN[2] = "Test3";
arrN[3] = "Test4";
arrN[4] = "Test5";
arrN[5] = "Test6";
arrN[6] = "Test7";
arrN[7] = "Test8";

arrV = new Array();
arrV[0] = 10;
arrV[1] = 50;
arrV[2] = 32;
arrV[3] = 80;
arrV[4] = 30;
arrV[5] = 10;
arrV[6] = 52;
arrV[7] = 30;

arrN2 = new Array();
arrN2[0] = "Test";
arrN2[1] = "Test2";
arrN2[2] = "Test3";
arrN2[3] = "Test4";
arrN2[4] = "Test5";
arrN2[5] = "Test6";
arrN2[6] = "Test7";
arrN2[7] = "Test8";

arrV2 = new Array();
arrV2[0] = 72;
arrV2[1] = 55;
arrV2[2] = 8;
arrV2[3] = 60;
arrV2[4] = 100;
arrV2[5] = 40;
arrV2[6] = 22;
arrV2[7] = 10;

arrN3 = new Array();
arrN3[0] = "Test";
arrN3[1] = "Test2";
arrN3[2] = "Test3";
arrN3[3] = "Test4";

arrV3 = new Array();
arrV3[0] = 982;
arrV3[1] = 401;
arrV3[2] = 227;
arrV3[3] = 104;

arrN4 = new Array();
arrN4[0] = "Test";
arrN4[1] = "Test2";
arrN4[2] = "Test3";
arrN4[3] = "Test4";
arrN4[4] = "Test5";

arrV4 = new Array();
arrV4[0] = 28000;
arrV4[1] = 9200;
arrV4[2] = 31000;
arrV4[3] = 1000;
arrV4[4] = 10300;



////////////////////////////////////////////////

function sort(a,b) {
return a > b;
}

function getMax(arr){
max = -1;
for(a=0;a<arr.length;a++){
if(arr[a] > max)
max = arr[a];
}
return max;
}


function initGraph(thisGraph,
graphWidth,graphHeight,
arrOfNames,arrOfValues,
valuePrefix,valueSuffix,
totalSteps,stepInterval){

document.write('<table name="'+thisGraph+'" id="'+thisGraph+'">');
document.write('</table>');

var num_columns = arrOfNames.length; //total number of columns in the graph
var column_height = graphHeight - 40; //-40 to account for row value text
var column_width = Math.round((graphWidth/num_columns)-2); //+2 to account for 2px border on each side
//alert(column_width);
var max_value = getMax(arrOfValues);
var steps_left = totalSteps;

tbl = document.getElementById(thisGraph);
tbl.setAttribute("width",graphWidth);
tbl.setAttribute("height",graphHeight);
tbl.setAttribute("cellPadding","0");
tbl.setAttribute("cellSpacing","0");
//tbl.setAttribute("border","1");
//tbl.setAttribute("borderColor","#FF8000");
graphRow = tbl.insertRow(0);

var i = 0;
while(i < num_columns){

newCell = graphRow.insertCell(i);
newCell.setAttribute("vAlign","bottom");

//fix this to allow for big value
newCell.setAttribute("width",column_width);

childTable = document.createElement("table");
childTable.setAttribute("id",thisGraph+"line"+i);

childTbody = document.createElement("tbody");

child1Row = document.createElement("tr");

child1Cell = document.createElement("td");
child1Cell.style.cssText = "font-size:10px;font-family:tahoma;";
child1Text = document.createTextNode(valuePrefix + Math.round((arrOfValues[i]/totalSteps)*(totalSteps-(steps_left-1))*10)/10 + valueSuffix);

child2Row = document.createElement("tr");
child2Cell = document.createElement("td");

child2Cell.className="graphLine";
//child2Cell.setAttribute("bgColor","#FF8000");
//child2Cell.style.cssText = "";
//child2Cell.setAttribute("height",Math.round(((column_height*arrOfValues[i])/max_value)/steps_left));
//child2Cell.setAttribute("height",Math.round(((column_height*arrOfValues[i])/max_value)/totalSteps));
child2Cell.setAttribute("height",Math.round((((column_height*arrOfValues[i])/max_value)/totalSteps)*(totalSteps-(steps_left-1))));
child2Cell.setAttribute("width",column_width);
child2Cell.innerHTML = "<img src=\"blank.gif\" width=\"1\" height\"1\">";

child1Cell.appendChild(child1Text);
child1Row.appendChild(child1Cell);
childTbody.appendChild(child1Row);

child2Row.appendChild(child2Cell);
childTbody.appendChild(child2Row);

childTable.appendChild(childTbody);
newCell.appendChild(childTable);

i++;

}

this.go = new Timer(this);
this.go.setTimeout("grow",stepInterval,
thisGraph,
num_columns,column_height,column_width,
arrOfValues,max_value,
steps_left,totalSteps,stepInterval,
valuePrefix,valueSuffix);

}

function grow(thisGraph,
num_columns,column_height,column_width,
arrOfValues,max_value,
steps_left,totalSteps,stepInterval,
valuePrefix,valueSuffix){

if(steps_left > 0){
graphNextStep(thisGraph,
num_columns,column_height,column_width,
arrOfValues,max_value,
steps_left,totalSteps,stepInterval,
valuePrefix,valueSuffix);
steps_left--;
this.go = new Timer(this);
this.go.setTimeout("grow",stepInterval,
thisGraph,
num_columns,column_height,column_width,
arrOfValues,max_value,
steps_left,totalSteps,stepInterval,
valuePrefix,valueSuffix);
}

}

function graphNextStep(thisGraph,
num_columns,column_height,column_width,
arrOfValues,max_value,
steps_left,totalSteps,stepInterval,
valuePrefix,valueSuffix){

var i = 0;
while(i < num_columns){

curTable = document.getElementById(thisGraph+"line"+i);
//alert(thisGraph+"line"+i);
curCells = curTable.getElementsByTagName("td");

//curCells[0].childNodes[0].nodeValue = valuePrefix + Math.round((arrOfValues[i]/steps_left)*10)/10 + valueSuffix;
curCells[0].childNodes[0].nodeValue = valuePrefix + Math.round((arrOfValues[i]/totalSteps)*(totalSteps-(steps_left-1))*10)/10 + valueSuffix;

//to speed up as u go
//curCells[1].setAttribute("height",Math.round(((column_height*arrOfValues[i])/max_value)/steps_left));
//constant increase rate
curCells[1].setAttribute("height",Math.round((((column_height*arrOfValues[i])/max_value)/totalSteps)*(totalSteps-(steps_left-1))));

i++;
}
}

</script>


</head>

<body>

<!-- initGraph($graphName,$width,$height,$namesArray,$valuesArray,$valuePrefix,$valueSuffix,$totalSteps,$ stepInterval -->

<table border="0">
<tr>
<td valign="bottom"><script>initGraph("Graph1",250,200,arrN,arrV,"","",50,30);</script></td>
<td width="100">&nbsp;</td>
<td valign="bottom"><script>initGraph("Graph2",250,200,arrN2,arrV2,"","",50,50);</script></td>
</tr>
<tr>
<td valign="bottom"><script>initGraph("Graph3",250,200,arrN3,arrV3,"","",50,50);</script></td>
<td width="100">&nbsp;</td>
<td valign="bottom"><script>initGraph("Graph4",250,200,arrN4,arrV4,"","",50,50);</script></td>
</tr>
</table>

</body>
</html>

MikeFoster
06-01-2005, 12:11 AM
I'll try to take a look.

I have a little bar graph (http://cross-browser.com/x/lib/view.php?sym=xbar) toy also :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum