Setting Parameters and Configuration Options

The graphing software has been designed so that most of the properties can be set and tailored to a particular implementaiton. The parameters are optional and if not set then default values will be used.

Parameters can be set in two ways:-

Directly within the page via the 'Property Object'
Via a 'Property File'

Setting Configuration Options Directly within the Page

The the graph demos in the ./example directory all set the properties via this method. The property object is supplied as the 4th paramter to the JpGraph method:-

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'
       });

For the full range of properties that can be set please see Parameter Reference

Upon startup the graph software will look for the property object and use any values which have been set.

The graph samples in in the /examples directory all use this method to supply the property values.

Via a 'Property File'

The second method for setting parameters allow all the options to be placed in a single file. The 'Property Filename' is then supplied to the graph software. Upon startup the graphing software will issue a URL request to read in the property file and set the options from this file.

It is important to note that pages that contain a graph configured in this manner must be served up via a web server, if not the request for the file will fail. i.e. such a page will not work from the local file system.

To set a property filename set the following in the 4th parameter of the JpGraph method:-

var graph = new JpGraph(
        'area', 
        'graph',
        data,
        {
         JpGraphPropertyFile : 'barprops.txt'
        });

Here is an example of the contents of a property file:-

width  = 900
height = 500
title           = The Graph Titles
titleFontSize   = 24px
titleFontWeight = normal
titleFontStyle  = normal
titleFontFamily = Helvetica, Arial, Verdana, sans-serif
titleFontColor  = #444
yTitle           = Y Title
yTitleFontSize   = 12
yTitleFontWeight = normal
yTitleFontStyle  = normal
yTitleFontFamily = Helvetica, Arial, Verdana, sans-serif
yTitleFontColor  = #f00
y2Title           = Y2 Title
y2TitleFontSize   = 12
y2TitleFontWeight = normal
y2TitleFontStyle  = normal
y2TitleFontFamily = Helvetica, Arial, Verdana, sans-serif
y2TitleFontColor  = #000
yLabelColor  = #0f0

The URL to the property file does not have to be a physical file, it can be set to a server side script which will allow parameter values to be generated 'on the fly'

Active Graphs and Charts

Documentation

Tutorials

Examples

Setting Parameters and Configuration Options

Setting Configuration Options Directly within the Page

Via a 'Property File'