Active Graphs and Charts

Active Graphs and Charts


Adding Graphs to Web Pages

The graphing library has been designed to make it as easy as possible to add high quality graphs to a web pages. Adding a graph to a web involves the following steps:-


Add the library script tag

The graph software is completely wrapped in a single .js file 'jpgraph.js', a copy of this file is located in the /js directory of this package. The jpgraph.js file should be placed in a web directory and then the following script tag added to the HEAD section of the page:-

Add a DIV element to your page

The graph software will look for the DIV element by it's id and draw the graph within this element. Add a div element and give it an id within the BODY section of the page:-

Set the data to be plotted

This package allows data to be supplied from a variety of sources including databases and server side scripts (see Tutorials for more details on these). For simplicity here we will set the data within the page.

Data is grouped into Series each of which is set as an array on the object like this:-

Here 3 series of data are defined each containing 12 data points. Any number of data items and series can be set. In this example the data points are simple numbers but each data point can also contain other properties including Links.

Draw the Graph and Set Options

The graphing software has been made highly configurable allowing you to control virtually every aspect of the look and feel and operation. All parameters are optional and if not set will operate with default values.

Drawing the graph is now simply achieved with the following:-

The first element specifies the graph style and the second is the id of the DIV element where the graph is to be drawn

This package currently supports the following graph styles:-

The third parameter is the data object created in the previous step

The fourth parameter is a property object setting various parameters

For the full range of parameters and thier meaning please see the Parameters table.