| home / programming / javascript / charts |    [previous] [next] |
|
|
Here we will allow the user to select which data to chart. First we need to place a form in our HTML and populate a Select element with our students and their scores. Let's add an undo button as well. We'll position an empty DIV to hold our chart, and update it as the user makes changes. Note here, that our positioned DIV expands our technique beyond the capabilities of JavaScript 1.1 browsers. From here on out the examples will only be viewable in version 4+ browsers (except IE5 for the Mac), although the techniques discussed can be appreciated by all readers.
<form name=chartForm>
<select name=chartItems
onchange=addItemToChart(this.selectedIndex)>
...
</select>
<input type=button value="undo" onclick="undo()">
</form>
<div id=theChart style="position:absolute"></div>Now we can allow our user to chart the students, by making selections from the drop down list below. As each student is selected, we'll immediately update the chart and draw it to the page. Want to remove a student from the chart? Click undo. Go ahead and try it out.
I've added some padding with a few <br> and <p> tags to allow room for the chart. If we were to position every element below the chart, this would not be necessary -- we could move all elements below the chart down each time our chart expands, or move them up when it contracts. If we didn't need to support Netscape 4, we wouldn't bother positioning the DIV because IE (and NS6) would reflow everything below the chart for us. I took the easy way out and just added some blank space to make room.
To facilitate allowing our users to select the data to chart, we have added two arrays. We now have four arrays:
arScores() - student scores
arStudents() - student names
arScoresToChart() - scores to chart (selected by the user)
arStudentsToChart() - students to chart (selected by the user)When a user selects a student from the list, we add that student, along with her score to
arStudentsToChart and arScoresToChart, respectively.
We have taken our basic chart drawing routine and put it in a function, so that we can call it to redraw the chart as the user updates the data set that will be displayed. Once an item is selected to chart, we'll need to remove that item from the Select list. If you tried out the example above, you will have noticed that we've added a third color for our bars. Adding more colors is a trivial affair, and we'll look at how that is done.
Undo functionality is much easier than you might imagine: the trick is simply to remove the
last element from one array, and add it to a different one. In our case this means removing the
last element from the arScoresToChart and arStudentsToChart arrays, and
adding these elements to the arScores and arStudents arrays, and then
adding a new Option to the Select element (remember that options[] is a built-in array,
immediately available to script).
Once the user chooses an item to chart, we update our arrays as necessary and then update the HTML on the page. For the first time in this routine, we will need to do a little browser sniffing as each of the major browsers uses different syntax to update inline HTML. We'll discuss the script in full on the next page. For those of you who can't wait, the entire script can be viewed at the end of this article.
| home / programming / javascript / charts | [previous] [next] |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
Created: March 6, 2002
Revised: March 6, 2002
URL: http://webreference.com/programming/javascript/charts/4.html
