Home/ Questions/Q 8285745
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T11:32:39+00:00

h all, all here is my html code in which when i declare it

  • 0

h all, all here is my html code in which when i declare it as a single data it works fine. But when i declare it as a two dimensional array. its not working. Whats the problem. Can anyone help me. here is the code with bug

<!doctype html>
<html>
    <head>
        <script type="text/javascript">
            window.onload=function()
            {
                var canvas=document.getElementById('mycanvas');
                var ctx=canvas.getContext('2d');
                var value=[[10,30,40,60,80],[10,20,30,40,50,90]];
                var width=50;
                var currx=30;

                var i = 0, j;
                for(j=0;j<=1;j++)
                {
                var interval = setInterval(function(){

                    if (i == value[j].length)
                    {
                        clearInterval(interval);
                        return;
                    }
                    var h=value[j][i];
                    ctx.fillStyle="grey";
                    ctx.fillRect(currx+2,canvas.height-h+1,width+2,h+2);
                    ctx.fillStyle="red";
                    ctx.fillRect(currx,canvas.height-h,width,h);                    
                    currx+=60;  
                    i++;
                }, 2000);
                }

            };
        </script>
    </head>
    <body>
        <canvas id="mycanvas" height="400" width="400" style="border:1px solid #c3c3c3;">
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In your code error value[j] is undefined occurs because a j variable evaluate to value 3 after for loop ends. But length of value array is 2. Use next code as example to avoid this trouble.

    <!doctype html>
<html>
    <head>
        <script type="text/javascript">
        window.onload=function() {
            var canvas=document.getElementById('mycanvas');
            var ctx=canvas.getContext('2d');
            var graphInfo=[{data:[10,30,40,60,80,10],color:'red'},{data:[10,20,30,40,50,90],color:'grey'}];
            var width=45;

            function getFunctionForTimeout(j){
                var i=0,currx=30,info=graphInfo[j],x5=j*5;
                var fTimeout=function(){
                    var h=Math.max(info.data[i]-x5,0);
                    ctx.fillStyle=info.color;
                    ctx.fillRect(currx+x5,canvas.height-h,width,h);                    
                    currx+=60;  
                    i++;
                    if(i<info.data.length)setTimeout(fTimeout,2000);
                };
                return fTimeout;
            }

            for(var j=graphInfo.length-1;j>=0;j--) {
                setTimeout(getFunctionForTimeout(j),2000);
            }
        };
        </script>
    </head>
    <body>
        <canvas id="mycanvas" height="400" width="400" style="border:1px solid #c3c3c3;">
    </body>
</html>
    • 0