Publishing System Settings Logout Login Register
Dynamic Scrolling Graph Using JavaScript and CSS
TutorialCommentsThe AuthorReport Tutorial
Tutorial Avatar
Rating
Add to Favorites
Posted on January 29th, 2007
10883 views
JavaScript
Dynamic Scrolling Graph Using JavaScript and CSS

Ever wanted to show web site hit stats in real time, using a scrolling graph? Here is a quick way to accomplish that using a little JavaScript and CSS.
-Preview-

Here is the code with explanation on how to accomplish it:
<html>
<head>
        <style type="text/css">
                #canvas {
                        height: 75px;
                        text-align: right;
                        width: 15%;
                        overflow: hidden;
                        border: #000 2px solid;
                }
                .bar {
                        width: 2px;
                        background-color: #0000FF;
                        float: right;
                }
        </style>
        <script type="text/javascript"> 
                function AddBar()
                {
                        var canvas = document.getElementById('canvas');
                      
                        /**
                         * Create a new bar to add to the canvas
                         */
                        var bar = document.createElement('DIV');
                        bar.className = 'bar';
                      
                        /**
                         * Here I'm just generating a random number.  You would probably get a real number from your
                         * server using AJAX.
                         */
                        var random_number = Math.floor(Math.random() * 76);
                      
                        /**
                         * We need to make the hight of the bar the random number.  But to
                         * push the bar to the bottom of the canvas, I set a top margin that
                         * is the difference between the height of the bar, and the height of
                         * the canvas.
                         */
                        bar.style.marginTop = random_number + 'px';
                        bar.style.height = (75 - random_number) + 'px';
                      
                        /**
                         * Now add the bar to the canvas, and come back to this function in
                         * half a second.
                         */
                        canvas.insertBefore(bar, canvas.childNodes.item(0));
                        setTimeout('AddBar()', 500);
                }
        </script>
</head>
<body onload="AddBar()">
        <div id="canvas">
                <div></div>
        </div>
</body>
</html>


The final result just generates a random number every half a second, and plots the number on the graph. Of course you can query your server using a little AJAX to get some actual numbers, like page hits. I've tried this on Firefox, and Internet Explorer, and it works fine in both.

Much of the look can be customized in CSS. The width of the bar, the size of the graph, etc. Want to put a picture in the background of the graph? No problem. It's easy to configure though the CSS.

The canvas DIV tag has an empty set of DIV tags inside of it. That's because IE will crash on the insertBefore if there aren't any children already inside the outer container.
Dig this tutorial?
Thank the author by sending him a few P2L credits!

Send
Koncept

Im Cool X]
View Full Profile Add as Friend Send PM
Pixel2Life Home Advanced Search Search Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Pixel2life Homepage Submit a Tutorial Publish a Tutorial Join our Forums P2L Marketplace Advertise on P2L P2L Website Hosting Help and FAQ Topsites Link Exchange P2L RSS Feeds P2L Sitemap Contact Us Privacy Statement Legal P2L Facebook Fanpage Follow us on Twitter P2L Studios Portal P2L Website Hosting Back to Top