How to Add Dynamically Generated Graphs and Charts to Web Pages and Applications


Not so very long ago adding a graph or chart to a web page or
application required a fair amount of programming knowledge and
was rather time consuming for even the most experienced. However
with the tools available today it is possible for almost anyone
to add graphs and charts to web pages. With just a little bit of
HTML, dynamically generated graphs and charts can be added to
web pages and / or applications.

Why use Graphs and Charts

The web is about making information available. Today's users
tend to be in a hurry and require that information is presented
to them clearly and quickly. If your web site has a message to
convey, which is currently being presented as a table of figures,
then it is highly likely that you will benefit from using
graphing and charting functionality. With a table of figures
most people find it hard to see the meaning immediately, however
if those figures are presented as a picture (ie a graph) then
almost all will instantly get the point. What's more present
your information graphically is both colorful and adds a touch
of professionalism. People tend to have more confidence in
information when it is presented in both a pleasing, clear and
professional manner.

The Easy way to create a graph

There are now many graphing and charting packages on the market
which make it very quick and easy for you to build in
professional quality graph images. The time saved in using an
'out of the box' solution is so great that even the most
seasoned professionals are using these packages. In addition
most graphing packages are very reasonably priced.
Before choosing a package there are a couple of things to
consider. For instance do you simply want to present the graph
image to your visitor or would you like some level of
interaction. eg making certain areas of the graph clickable
or pop-up data displays when the mouse passes over certain
area's. Another consideration is the source of your data. Is it
held in a database, file or somewhere else. Ideally you would
want a graphing package that is capable of fetching the data
directly from the source itself.

Which Graphing packages are available

At the time of writing there are many graphing solutions on the
market which fall into the following technology categories: –

– Java Applet Graphing Solutions

This type of software, in addition to the standard graphic

capabilities, also provides interactive features like
clickable link area's and mouse-over popup displays. These
solutions can be installed on any web server without any
server side configuration or set-up.

– Java Servlet Graphing Solutions
These solutions are powerful server side functionality.
Although probably not for the beginner they are very
beneficial to the 'web application' developer.

– Flash Graphing Solutions
The Flash environment provides some very sophisticated
graphics capabilities which has lead to some of the best
looking graphing solutions. Unfortunately the technology
can only work when the user has flash installed on their
browser. Although becoming more widespread there is still
a very large proportion of browsers which can not view
flash content.

– PHP Graphing Solutions
These are probably the easiest solutions to use and
implementation. With these solutions it's possible for a
complete novice to add graphing functionality to their
web page and applications. But make no mistake they are
also very powerful offering very good graphic results.
Most web servers today can run this software without any
further configuration.

– ASP.NET Graphing Solutions
Again these solutions offer some very good graphical results.
At the time of writing the number of web servers capable of
running these packages is far less than those of other

Creating a Graph

With the right software package the process of adding a graph to
web page involves little more than the following: –

1) Inserting a small piece of HTML into your web page.
(usually the code is provided and all you have to do is 'copy and paste')

2) Setting some values ​​in a configuration file
(eg setting things like graph colors and titles etc.)

3) Setting some values ​​telling the graph where to acquire the

data from

Although this is fairly straight forward sometimes a problem may
be encountered. A big advantage of using a good professional
package is that help is at hand. If you get stuck at any stage
then simply ask for help from the software provider, a good one
will always be happy to help. Contrary to popular belief good
software companies answer requests for technical help in both a
timely and helpful manner.


Leave a Reply