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

home / programming / javascript / charts

[next]

Drawing Charts with JavaScript

Developer News Mandrake Linux Founder Back, Virtually Amazon: We're a Technology Company Sun Expands MySQL With Closed Source

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:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

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

Solutions

Whitepapers and eBooks

Symantec Whitepaper: Converging System and Data Protection for Complete Disaster Recovery Intel Whitepaper: Comparing Two- and Four-Socket Platforms for Server Virtualization IBM Solutions Brief: Go Green With IBM System xTM And Intel HP eBook: Simplifying SQL Server Management IBM Contest: Are You the Next Superstar? Join the "Search for the XML Superstar" Contest to Find Out Intel PDF: Quad-Core Impacts More Than the Data Center Intel PDF: Virtualization Delivers Data Center Efficiency Go Parallel Article: PDC 2008 in Review Avaya Article: Communication-Enabled Mashups: Empowering Both Business Owners and IT Intel Whitepaper: Building a Real-World Model to Assess Virtualization Platforms PDF: Intel Centrino Duo Processor Technology with Intel Core2 Duo Processor Microsoft Article: Build and Run Virtual Machines with Hyper-V Server 2008

Go Parallel Article: Q&A with a TBB Junkie IBM Whitepaper: Innovative Collaboration to Advance Your Business Internet.com eBook: Real Life Rails IBM eBook: The Pros and Cons of Outsourcing Internet.com eBook: Best Practices for Developing a Web Site IBM CXO Whitepaper: The 2008 Global CEO Study "The Enterprise of the Future" Avaya Article: Call Control XML in Action - A CCXML Auto Attendant IBM CXO Whitepaper: Unlocking the DNA of the Adaptable Workforce--The Global Human Capital Study 2008 Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers Symantec Whitepaper: Comprehensive Backup and Recovery of VMware Virtual Infrastructure MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

Attend the IBM Service Management World Tour--Register now! Video: Intel Launches Data Center Efficiency Initiative Intel Podcast: Talking vPro Go Parallel Video: Intel(R) Threading Building Blocks: A New Method for Threading in C++ HP Video: Is Your Data Center Ready for a Real World Disaster? Microsoft Partner Portal Video: Microsoft Gold Certified Partners Build Successful Practices HP On Demand Webcast: Virtualization in Action

Go Parallel Video: Performance and Threading Tools for Game Developers Rackspace Hosting Center: Customer Videos Intel vPro Developer Virtual Bootcamp HP Disaster-Proof Solutions eSeminar HP On Demand Webcast: Discover the Benefits of Virtualization MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits

IBM e-Kit: Reduce Complexity and Cost with BladeCenter Amyuni Download: PDF & XPS Engine for Your .NET and ActiveX Applications Acresso Download: Try InstallShield 2009 Microsoft Download: Silverlight 2 SDK Access Crystal Reports for Eclipse Basic Edition (Free) 30-Day Trial: SPAMfighter Exchange Module

IBM Energy Efficiency e-Kit Shows You How to Reduce Costs Red Gate Download: SQL Toolbelt Iron Speed Designer Application Generator Microsoft Download: Silverlight 2 Developer Runtime (Windows) MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos

VMware Online Virtualization Forum: Learn about the benefits of a virtual infrastructure, network with industry experts--Register today! Demo: Dual-Core Intel Itanium 2 Processor IBM IT Innovation Article: Green Servers Provide a Competitive Advantage

Microsoft Article: Making Designer/Developer Collaboration a Reality 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 Popular JavaScript Framework Libraries: An Overview - Part 3 · Accessing Your MySQL Database from the Web with PHP · Working with the DOM Stylesheets Collection Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters >   The latest from internet.com Fixing MySQL Replication · Firewall Guide: First Steps to Securing the Enterprise · VoxOx Tames the Tumultuous Communications Tangle

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

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