10 Free Chart Scripts

This week I’ve been working on a project that required data to be shown visually. I needed a Chart Script that was attractive yet gets the data across. The Charts scripts below are built using JavaScript, Flash, Silverlight, and Java.

• Flot – Flot is a pure Javascript plotting library for jQuery. The focus is on easy usage , attractive plots and interactive features. With Flot you can interact with the data, look at specific data by zooming in, plot a time series, and other various options.
  
• Open Flash Chart – Open Flash Chart is a Flash charting component. It is fairly easy to setup and has classes written in PHP, Perl, Python, Java, Ruby on Rails, and .Net to connect to the Chart. You can create some really nice looking Bar Charts, Pie Charts, Area Charts and etc…
  
• AmCharts – AmCharts are animated interactive flash charts. The charts include Pie Charts, Line Charts, Scatter/Bubble Charts, Bar/Column Charts, and even a stock chart. AmCharts can extract data from simple CSV or XML files, or they can read dynamic data generated with PHP, .NET, Java, Ruby on Rails, Perl and ColdFusion. All the charts are free but they have a link to AmCharts on the upper left.
  
• Emprise JavaScript Charts – Emprise JavaScript Charts is a 100% Pure JavaScript Charting Solution that requires no JavaScript frameworks. Emprise JavaScript Charts include Line, Area, Scatter, Pie, Bar charts with zooming, scaling and scrolling ability. Tested and works with all major browsers.
  
• PlotKit – PlotKit is a Chart and Graph Plotting Library for Javascript. PlotKit works with MochiKit javascript library. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support. PlotKit also has great documentation.
  
• Flotr – Flotr is a javascript plotting library based on the Prototype Framework version 1.6.0.2. Flotr lets you create graphs in modern browsers with features like legend support, negative value support, mouse tracking, selection support, zoom support, event hooks, CSS styling support and much more.
  
• PHP/SWF Charts – PHP/SWF Charts is simple yet powerful tool to create attractive web charts and graphs from dynamic data. You use PHP to gather the data and put it into flash. It supports many charts types, Line, Column, Stacked column, Floating column, 3D column, Stacked 3D column, Parallel 3D column, Pie, 3D Pie, Bar, Stacked bar, Floating bar, Area, Stacked area, Candlestick, Scatter, Polar, Mixed, Composite and Joined. These Charts have some great features like Animated transitions, Printable charts, and more.
  
• Visifire – Visifire (Powered by Silverlight) is a set of open source data visualization components. With Visifire you can create animated Silverlight Charts with ASP, ASP.Net, PHP, JSP, ColdFusion, Ruby on Rails or just simple HTML.
  
• FusionCharts – FusionCharts is a cross-browser and cross-platform flash charting component that can be used with ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, simple HTML pages or even PowerPoint Presentations. All you need to know is the language you’re programming in.
  
• JFreeChart – JFreeChart is an open source Java chart library that makes it easy for developers to display quality charts in their applications. The JFreeChart project was founded seven years ago, in February 2000, by David Gilbert and is used by approximately 40,000 to 50,000 developers. JFreeChart supports many different output types that includes JPEG, GIF, PDF, EPS and SVG. This is a great resource for Java developers.
  

If you know of any other Charting Scripts please post below.

Original article at: http://webtecker.com/2008/06/12/10-free-chart-scripts/

E-mail validation

E-mail validation This free JavaScript will validate an email address entered into a form. The examples below will work in any type of file. This script will work in any browser on any platform, even in IE 2.0 on a Macintosh! This script is in use on literally thousands of web sites using our Perl scripts. The check_email function will validate an email address entered by a user in real time and return a false or negative value if the email address is not in a valid format. Copy and paste this function into your document, then follow the instructions below.
Note the 4 in the above regular expression. This used to be 3 before the new domain suffixes were released (.info, .name). However, now that 4 characters are allowed in the suffix, a user could enter name@server.conm and the error would not be detected. Next, you need your form validation script.
Next, in your form, you should have a field that asks a user to enter their e-mail address. You must also include the the onsubmit event handler, which will point to your validation script. The validation script will utilize the check_email function. The beauty of the check_email function is that it can be used over and over again. Below is a simple example of a simple form that asks for two email addresses. Note that the keyword this is passed to the check_form function. It tells the function which form to check.

Name

E-mail

E-mail2

Copy and paste all three sections of code above into a document (in any order) and you will have working example. Keep reading if you are going to have the JavaScript printed by a cgi script.
CGI scripts will need to escape (preceed with a backslash) any metacharacters contained in the JavaScript so that the CGI script does not think those characters are Perl Syntax. And there are many metacharacters in this JavaScript snippet. Below is the JavaScript you should use if you are going to have the JavaScript printed by a CGI script. Make sense? #!/usr/bin/perl
print qq~Content-Type: text/html\n\n~;
print qq~

~;
Please excuse the small font, we needed to squeeze the code in so that it did not wrap. The only difference between this example and the one above, is that all metacharacters have been escaped with a backslash \. Metacharacters include the following : $ @ \ .

Check Boxes and Radio Buttons

This article describes how to automate Check Boxes, i.e. their production, interrogation, setting and clearing, and describes how to access the values of Radio Buttons.
Check Boxes
A checkbox element has two values: CHECKED=TRUE or CHECKED=FALSE.
The following short script will create 10 like named checkboxes (i.e. box0 through to box9):

It also create four buttons each of which invokes an appropriate function using the onClick event.
The following JavaScript defines the functions used by the onClick events:

The reverse() function cycles through the checkboxes setting the value of each checkbox to the opposite of its original value.
Radio Buttons
The following example shows how to find the value of radio buttons:

Question 0? Yes
No

Question 1? Yes
No

Question 2? Yes
No

Question 3? Yes
No

Question 4? Yes
No

Question 5? Yes
No

Question 6? Yes
No

Question 7? Yes
No

Question 8? Yes
No

Question 9? Yes
No

yes:
no:

Which looks like this:
Question 0? Yes No Question 1? Yes No Question 2? Yes No Question 3? Yes No Question 4? Yes No Question 5? Yes No Question 6? Yes No Question 7? Yes No Question 8? Yes No Question 9? Yes No
yes: no:
Multiple Choice Quiz
Radio Buttons are supposed to work in groups, very much like the old push buttons on transistor radios, where if you pressed a button for one radio station, the original pressed in button popped out. The idea being, there would always only be one button pushed in at any one time.
The way they are grouped together in JavaScript is by identically naming them. Therefore in the above JavaScript code, question 0 has two buttons both named q0. Liked named Radio Buttons are then grouped together in an array of elements.
To determine whether a particular button is pressed the syntax required is: test = document.formName.radioGroupName[indexNumber].checked;
Where radioGroupName is the name used by the group of associated Radio Buttons, and indexNumber, is the array index, i.e. the position within the array.
The value returned to text is true, if the Radio Button is checked, and false if not.
The previous example, checks the values of the each of the 10 groups of Radio Buttons, and then displays the result in the text boxes. It doesn't actually make use of the Radio Buttons value field.
In the following example a simple check is made, comparing the answer chosen against the value of the Radio Button:

Black = White	True or False ?
2 + 2 = 4	True or False ?
5 - 3 = 1	True or False ?
7 * 7 = 49	True or False ?
36 / 6 = 5	True or False ?
99 - 33 = 66	True or False ?
33 + 99 = 66	True or False ?
5 + 4 + 3 = 12	True or False ?
6 + 5 + 4 = 13	True or False ?
81 / 9 = 9	True or False ?

Correct:
Wrong:
Blank:

Which looks like this:
Black = White
True or False ?
2 + 2 = 4
True or False ?
5 - 3 = 1
True or False ?
7 * 7 = 49
True or False ?
36 / 6 = 5
True or False ?
99 - 33 = 66
True or False ?
33 + 99 = 66
True or False ?
5 + 4 + 3 = 12
True or False ?
6 + 5 + 4 = 13
True or False ?
81 / 9 = 9
True or False ?
Correct: Wrong: Blank:
In this example each of the Radio Buttons has a value associated with it using VALUE, the correct answers have a value of true and the incorrect answers have a value of false.
Note, that these values are text string values, i.e. enclosed within quotes, they are not boolean values, i.e. proper true of false.
When the answers are evaluated, the value property is used to obtain the Radio Buttons value.
In this example, the initial state of the Radio Buttons is not set, i.e. neither of the buttons are checked. As its possible for them to remain unchecked, a simple test is performed to exclude them from the calculation, i.e.: if (yesChoice == noChoice)
This checks that if both of the Radio Buttons within the group are of the same state, i.e. both checked or both unchecked, then ignore them. As its impossible for them both to be checked at any one time, then it is safe to make the assumption, that if this check is true then they are both unchecked.
If this test is untrue, i.e. one or the other of the Radio Buttons is checked, the value of the Radio Buttons are compared with the checked status.
Note, the checked statuses are first converted using the toString() method, this is because their original object type is boolean. Comparing a boolean with a text string will never return the expected answer.
Unlike Check Boxes, it isn't easy to unset a Radio Button once it has been set. Using: document.formName.radioName[indexNumber].checked = false;
does not work. The only way to unset a Radio Button is to reset the form: document.formName.reset();
Unfortunately this has the effect of resetting everything on the form.
One possible work around, is to remember the settings of the form, reset it using the reset() method, and then repair the damage - difficult, but not impossible.