WebRef   Sitemap · Experts · Tools · Services · Newsletters · About

home / programming / javascript / charts

[next]

Drawing Charts with JavaScript

Developer News Google Going Native With Chrome Mozilla Fixes Firefox Flaws as 3.5 Release Nears Microsoft and Novell Still Bosom Buddies

By Russell Bloom (rbloom@hmffl.com)

In this column, we will tackle a technique that is often thought to be the domain of the graphic artist or the compiled application programmer -- drawing charts -- using JavaScript.

In this column we will:

• Demonstrate the algorithm for drawing simple bar charts
• Refresh our memories on advanced array manipulation (see Peter Belesis'
fine column)
• Examine one of the more powerful aspects of array manipulation -- undo functionality.
• See how to dynamically add and remove options from select elements.
• Draw some charts, and finally...
• Let the end user draw charts by entering and selecting data to chart.

I like working examples, and I like 'em on the first page:

For the sake of example, we will be charting student's scores on a test. Here we have eight students and their respective test scores. Throughout this article, we will use this example and expand upon it. Most of the techniques discussed will work in JavaScript 1.1 browsers (I dusted off the old Netscape 3.04 and made sure). All will work in JavaScript 1.2+ browsers. Ok, let's have some fun.

home / programming / javascript / charts

[next]

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

Solutions

Whitepapers and eBooks

Whitepaper: Introducing the Azure Services Platform Whitepaper: Introduction to Microsoft .NET Services for Developers Whitepaper: Securing Microsoft's Cloud Infrastructure Internet.com eBook: Becoming a Better Project Manager Microsoft Partner Portal: What Azure Means for Microsoft Partners

Internet.com eBook: Web Development Frameworks for Java Internet.com eBook: Developing a Content Management System Strategy Article: Ten Things IT Professionals Should Know About Windows 7 MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

Get Started with .NET Services

MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits

Amyuni: PDF & PDF/A Engine for .NET and ActiveX Apps Red Gate Free Trial: SQL Toolbelt Iron Speed Designer Application Generator

Download Award-Winning Red Gate SQL Backup Pro MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos

Internet.com Hot List: Get the Inside Scoop on the Hottest IT and Developer Products Internet.com Hot List: Java EE 6 Platform Highlights the JavaOne Conference

MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES

The latest from WebReference.com Browse > Site Contents - - - - - Experts * 3D Animation * Design * DHTML * Graphics * HTML * JavaScript * Perl * XML - - - - - Web Resources * Authoring * Design * Internet * Multimedia * Programming * Promotion - - - - - Services * Interviews * Newsletters * Reviews * Search * Tools XML and PHP Simplified · Creating a ASP.NET Contact Form · Data Filtering with PHP Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters >   The latest from internet.com Intel to Host Live Nehalem Q&A · 12 Tips to Troubleshoot Network File-Sharing · 10 Tips for Selling on Kijiji

Created: March 6, 2002
Revised: March 6, 2002

URL: http://webreference.com/programming/javascript/charts/