Setting Data

Data can be supplied to the graph via two methods:-

Directly within the page by adding 'Data Arrays' to data object.
Via a 'Data File' or 'Server Side Script/Process'

Setting Data Directly within the Page

The the graph demos in the ./example directory all set the data via this method. Simply create data object and add the array's of data to it each series of data to be plotted like this:-

var data = ({series1data : new Array('6097','5970','3230','7236','3236'),
             series2data : new Array('500' ,'1200','1800','1235','4231'),
             series3data : new Array('1200','7000','1560','6230','2230')
            });

For the XY Scatter chart data should be supplied in x-y pairs:-

var data = ({series1data : new Array('6097,100', '5970,110', '3230,102', '7236,121',
                                     '3236,145', '4723,107', '546,100',  '6236,134',
                                     '3236,156', '5246,123', '4928,112', '1296,117'),

It is also possible to add properties to any/all data items. There are 3 optional properties that can be added to any data value:-

color - set this to override the default color set in the series parameter.
link - make a data point/bar clickable.
target - specify a target window/frame for the link.

The parameters should be seperated by a semi-colon with the name: value format much like that of css.

var data = ({series1data : new Array('6097; link: http://www.jpowered.com; target: new; color: red;', '5970; color: red;', '3230', '7236', '3236'), series2data : new Array('500' ,'1200','1800','1235','4231'), series3data : new Array('1200','7000','1560','6230','2230') });

Via a server 'Data File or Script/Process'

The second method for setting data allows the data to be supplied from a server file or script. The 'Data URL' is set and supplied to the graph software. Upon startup the graphing software will issue a URL request to read the data dynamically from the server.

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 data will fail. i.e. such a page will not work from the local file system.

To set a dataurl set the JpGraphDataFile item on the property object:-

var graph = new JpGraph(
        'area', 
        'graph',
        null,
        {
         JpGraphDataFile : 'bardata.txt'
        });

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

series1data1 = 2097;link: http://www.jpowered.com;target: new;color: red;
series1data2 = 5970;color: red;
series1data3 = null;
series1data4 = 7236;color: purple;
series1data5 = 3236;color: fushia;
series1data6 = 4723;color: gold;
series1data7 = 546;
series1data8 = 6236;color: gold;

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 data values to be generated 'on the fly'. This is ideal where the data is being fetched in the real time from a database or other data repository.

The following is a simple PHP script which will supply the graph data:-

<?php
/* Initialise some data
 * In reality this data would be fetched from a data source or database
 */
$data = Array(6097,5970,3230,7236,3236,4723,5546,6236,7236,5246,4928,1296);
/*
 * output the data in the format required for the graph
 *
 * NOTE: the data numbering should begin a 1 (not 0).
 */
for ($i=0; $i<count($data); $i++) { print 'series1data' . ($i+1) . '=" . $data[$i] . PHP_EOL;
}
exit(0);
?>

Any server side language can be used to dynamically generate in this manner (i.e. ASP, Python, JSP, Java etc)

Active Graphs and Charts

Documentation

Tutorials

Examples

Setting Data

Setting Data Directly within the Page

Via a server 'Data File or Script/Process'