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
Add a DIV element to your page to specify the location of the graph
Set the data to be plotted
Issue the graph draw command

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:-

<script src="../../graph_chart_collection/Documentation/_PATH_TO_FILE_/jpgraph.js" type="text/javascript" charset="utf-8"></script>

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:-

<div id="graph"></div>

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:-

<script type="text/javascript" charset="utf-8">
/**
 * set graph data
 */
var data = ({series1data : new Array('6097','5970','3230','7236','3236','4723','5546','6236','7236','5246','4928','1296'),
             series2data : new Array('2500','4200','1800','5235','4231','5738','8236','4230','2432','2236','4237','7234'),
             series3data : new Array('1200','2000','1560','3230','2230','3720','4230','1652','1378','1462','2654','5321')
            });
            </script>

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:-

<script type="text/javascript" charset="utf-8">
/**
 * draw the graph
 */
var graph = new JpGraph(
        'area', 
        'graph',
        data,
       {
        width           : 900,
        height          : 500,
        backgroundColor : '#f9f5da',
        series1         : "title: Standard Widgets; color:#ea7532;font-size:12; scale:left",
        series2         : "title: Special Widgets; color:#00a550;font-size:12; scale:left",
        series3         : "title: Custom Widgets; color:#367adf;font-size:12; scale:left",
        xLabels         : 'January|February|March|April|May|June|July|August|September|October|November|December'
       });
</script>

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:-

vertical bar
stacked vertical bar
horizontal bar
stacked horizontal bar
line
area
stacked area
pie
ring
doughnut
xy scatter

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.

Active Graphs and Charts

Documentation

Tutorials

Examples

Adding Graphs to Web Pages

Add the library script tag

Add a DIV element to your page

Set the data to be plotted

Draw the Graph and Set Options