Active Graphs and Charts

Active Graphs and Charts


JQuery Plugin

The graphing library may also be used as a JQuery plugin. The JPgraph library will automatically detect the presence of JQuery and provide the plugin methods.

Follow these steps to use the graphing library with JQuery:-


Add the jpgraph library script tag

The graph software is completely wrapped in a single .js file '../../graph_chart_collection/Documentation/jpgraph.js', a copy of this file is located in the /js directory of this package. The ../../graph_chart_collection/Documentation/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, the second is the data object and the third the configuration properties for the graph.

This package currently supports the following graph styles:-

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