Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    jdb
    jdb is offline
    New to the CF scene
    Join Date
    May 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question setTimeout OOP class help. OOP newbie.

    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), 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":

    Code:
    <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>
    Last edited by jdb; 05-31-2005 at 08:37 PM.

  • #2
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'll try to take a look.

    I have a little bar graph toy also


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •