Example 18-3. Dynamically creating bar charts

/**
 * BarChart.js:
 * This file defines makeBarChart( ), a function that creates a bar chart to
 * display the numbers from the data[] array. The chart is a block element
 * inserted at the current end of the document. The overall size of the chart 
 * is specified by the optional width and height arguments, which include the
 * space required for the chart borders and internal padding. The optional
 * barcolor argument specifies the color of the bars. The function returns the
 * chart element it creates, so the caller can further manipulate it by
 * setting a margin size, for example.
 * 
 * Import this function into an HTML file with code like this:
 *    <script src="BarChart.js"></script>
 * Use this function in an HTML file with code like this:
 *    <script>makeBarChart([1,4,9,16,25], 300, 150, "yellow");</script>
 **/
function makeBarChart(data, width, height, barcolor) {
    // Provide default values for the optional arguments
    if (!width) width = 500;
    if (!height) height = 350;
    if (!barcolor) barcolor = "blue";
    
    // The width and height arguments specify the overall size of the
    // generated chart. We have to subtract the border and padding
    // sizes to get the size of the element we create.
    width -= 24;   // Subtract 10px padding and 2px left and right border
    height -= 14;  // Subtract 10px top padding and 2px top and bottom border

    // Now create an element to hold the chart. Note that we make the chart
    // relatively positioned so that it can have absolutely positioned children,
    // but it still appears in the normal element flow.
    var chart = document.createElement("DIV");
    chart.style.position = "relative";       // Set relative positioning
    chart.style.width = width + "px";        // Set the chart width
    chart.style.height = height + "px";      // Set the chart height
    chart.style.border = "solid black 2px";  // Give it a border
    chart.style.paddingLeft = "10px";        // Add padding on the left,
    chart.style.paddingRight = "10px";       // on the right,
    chart.style.paddingTop = "10px";         // and on the top,
    chart.style.paddingBottom = "0px";       // but not on the bottom
    chart.style.backgroundColor = "white";   // Make the chart background white

    // Compute the width of each bar
    var barwidth = Math.floor(width/data.length);
    // Find the largest number in data[]. Note the clever use of Function.apply( ).
    var maxdata = Math.max.apply(this, data);
    // The scaling factor for the chart: scale*data[i] gives the height of a bar
    var scale = height/maxdata;

    // Now loop through the data array and create a bar for each datum
    for(var i = 0; i < data.length; i++) {
        var bar = document.createElement("div");   // Create div for bar
        var barheight = data[i] * scale;           // Compute height of bar
        bar.style.position = "absolute";           // Set bar position and size
        bar.style.left = (barwidth*i+1+10)+"px";   // Add bar border and chart pad
        bar.style.top = height-barheight+10+"px";  // Add chart padding
        bar.style.width = (barwidth-2) + "px";     // -2 for bar border
        bar.style.height = (barheight-1) + "px";   // -1 for bar top border
        bar.style.border = "solid black 1px";      // Bar border style
        bar.style.backgroundColor = barcolor;      // Bar color
        bar.style.fontSize = "1px";                // IE bug workaround
        chart.appendChild(bar);                    // Add bar to chart
    }

    // Now add the chart we've built to the document body
    document.body.appendChild(chart);

    // Finally, return the chart element so the caller can manipulate it
    return chart;
}

Example 18-5. A framework for CSS-based animations

/**
 * AnimateCSS.js:
 * This file defines a function named animateCSS( ), which serves as a framework
 * for creating CSS-based animations. The arguments to this function are:
 *
 *     element: The HTML element to be animated.
 *     numFrames: The total number of frames in the animation.
 *     timePerFrame: The number of milliseconds to display each frame.
 *     animation: An object that defines the animation; described below.
 *     whendone: An optional function to call when the animation finishes.
 *               If specified, this function is passed element as its argument.
 *
 * The animateCSS( ) function simply defines an animation framework. It is
 * the properties of the animation object that specify the animation to be
 * done. Each property should have the same name as a CSS style property. The
 * value of each property must be a function that returns values for that
 * style property.  Each function is passed the frame number and the total
 * amount of elapsed time, and it can use these to compute the style value it
 * should return for that frame.  For example, to animate an image so that it
 * slides in from the upper left, you might invoke animateCSS as follows:
 *
 *  animateCSS(image, 25, 50,  // Animate image for 25 frames of 50ms each
 *             {  // Set top and left attributes for each frame as follows:
 *               top: function(frame,time) { return frame*8 + "px"; },
 *               left: function(frame,time) { return frame*8 + "px"; }
 *             });
 *             
 **/
function animateCSS(element, numFrames, timePerFrame, animation, whendone) {
    var frame = 0;  // Store current frame number
    var time = 0;   // Store total elapsed time

    // Arrange to call displayNextFrame( ) every timePerFrame milliseconds.
    // This will display each of the frames of the animation.
    var intervalId = setInterval(displayNextFrame, timePerFrame);

    // The call to animateCSS( ) returns now, but the line above ensures that
    // the nested function defined below will be invoked once for each frame
    // of the animation.  Because this function is defined inside 
    // animateCSS( ), it has access to the arguments and local variables of
    // animateCSS( ) even though it is invoked after that function has returned!
    function displayNextFrame( ) {
        if (frame >= numFrames) {             // First, see if we're done
            clearInterval(intervalId);        // If so, stop calling ourselves
            if (whendone) whendone(element);  // Invoke whendone function
            return;                           // And we're finished
        }

        // Now loop through all properties defined in the animation object
        for(var cssprop in animation) {
            // For each property, call its animation function, passing the
            // frame number and the elapsed time. Use the return value of the
            // function as the new value of the corresponding style property
            // of the specified element. Use try/catch to ignore any
            // exceptions caused by bad return values.
            try {
                element.style[cssprop] = animation[cssprop](frame, time);
            } catch(e) {}
        }

        frame++;               // Increment the frame number
        time += timePerFrame;  // Increment the elapsed time
    }
}