Question

I am having a hard time figuring out this piece of code marked in bold. Can some explain me those lines please

function growBars() {
    var barStartX = 0;
    var barStartY = 0;
    var barHeight = 0;
    var barValue = 0;

    <!-- ********** Start Unable to understand -->
    barValue = parseInt(chartData.bars[i].value);
    barHeight = (barValue * chartHeight / maxValue) / numSteps * idxStep;
    barStartX = chartMargin + chartAxisSpace + (i * (barWidth + barMargin)) + barMargin;
    barStartY = chartMargin + (chartHeight - barHeight);
    drawBar(barStartX, barStartY, barWidth, barHeight);
}
if (idxStep < numSteps) {
    idxStep++;
    setTimeout('growBars()', growSpeed);
}
} < -- * * * * * * * * * * * * * End till here-- >

function drawBar(barX, barY, barW, barH) {
    context.fillStyle = '#00c';
    context.fillRect(barX, barY, barW, barH);
    context.shadowOffsetX = 3;
    context.shadowOffsetY = -3;
    context.shadowBlur = 3;
    context.shadowColor = 'rgba(200, 200, 200, .3)';
    context.strokeStyle = '#000';
    context.lineWidth = 1;
    context.strokeRect(barX, barY, barW, barH);
}

As you can see the above code draws bars on a graph. What I am unable to understand is the way this recursive function is used. What does that piece of code do?

Answer 1

1. barValue = parseInt(chartData.bars[i].value);
2. barHeight = (barValue * chartHeight / maxValue) / numSteps * idxStep;
3. barStartX = chartMargin + chartAxisSpace + (i * (barWidth + barMargin)) + barMargin;
4. barStartY = chartMargin + (chartHeight-barHeight);
5. drawBar(barStartX, barStartY, barWidth, barHeight);

1. Converts chartData.bars[i].value to integer
2. sets the bar height; Im not sure what numSteps or idxStep is
   3/4. sets bar x,y start coords
3. calls the drawBar function with the values calculated above.

Its not recursive although you don’t need the recall to the function unless you plan on your graph illustrating a growth in the data

function growBars() { //START OF FUNCTION
    var barStartX = 0;
    var barStartY = 0;
    var barHeight = 0;
    var barValue = 0;

    <!-- ********** Start Unable to understand -->
    barValue = parseInt(chartData.bars[i].value);
    barHeight = (barValue * chartHeight / maxValue) / numSteps * idxStep;
    barStartX = chartMargin + chartAxisSpace + (i * (barWidth + barMargin)) + barMargin;
    barStartY = chartMargin + (chartHeight - barHeight);
    drawBar(barStartX, barStartY, barWidth, barHeight);
} //END OF FUNCTION
if (idxStep < numSteps) { //START OF IF STATEMENT
    idxStep++;
    setTimeout('growBars()', growSpeed);
} //END OF IF STATEMENT
} < -- * * * * * * * * * * * * * End till here-- > // UNPAIRED CLOSE BRACKET

function drawBar(barX, barY, barW, barH) {
    context.fillStyle = '#00c';
    context.fillRect(barX, barY, barW, barH);
    context.shadowOffsetX = 3;
    context.shadowOffsetY = -3;
    context.shadowBlur = 3;
    context.shadowColor = 'rgba(200, 200, 200, .3)';
    context.strokeStyle = '#000';
    context.lineWidth = 1;
    context.strokeRect(barX, barY, barW, barH);
}

as you can see from my comments, the growbars is not called from within itself thus it is not recursive