Download and unzip the contents of the archive to any convenient location. The package contains the following folders:

- [php] - Contains the jqChart PHP class (jqChart.php) and the optional driver files for the appropriate database. The driver files begin with jqGridxxx.php where xxx is the database name. Also additional file is needed to use the chat separatley - jqUtils.php.
- [themes] - Contains the themes shipped with the product. The theme files are Javascript files and not CSS files. The theme file (if used) should be loaded after the jqChart lib is loaded.
- [js] - The javascript files of jqChart - jquery.jqChart.js. You need to include them in your PHP page.

There are a diffrent scenarious on how to use the component. Below we will consider the two most used.

1. Load the javascript fules in separate page (mostley main page or index.php) and write a chart in another file.

The first file is "jquery.js" - this is the official jQuery library.
The second file is "jquery.jqChart.js" - this is the javascript chart files
The third (optional) file is the teheme file

The final result you will have in an PHP page containing jqChart would be something similar to that:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First PHP jqChart </title> 

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.jqChart.js" type="text/javascript"></script>

<!-- this is optional theme file -->>

<script src="themes/dark-blue.js" type="text/javascript"></script>

</head>
<body>
......

<!-- the chart will be created in this place -->>
<?php include "chart.php";?>
.......
</body>
</html>

Save the file as index.php or any desired name in the root directory.

Create a file chart.php with the following content.

<?php
// include the jqUtils Class. The class is needed in all jqSuite components.
require_once "php/jqUtils.php";

// include the jqChart Class
require_once "php/jqChart.php";

$chart = new jqChart();

$chart->setChartOptions(array("defaultSeriesType"=>"line","marginRight"=>130,"marginBottom"=>25))
->setTitle(array('text'=>'Monthly Average Temperature',"x"=>-20))
->setSubtitle(array("text"=>"Source: WorldClimate.com","x"=>-20))
->setxAxis(array("categories"=>array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec')))
->setyAxis(array("title"=>array("text"=>"Temperature (°C)")))
->setTooltip(array("formatter"=>"function(){return '<b>'+ this.series.name +'</b><br/>'+this.x +': '+ this.y +' (°C)';}"))
->setLegend(array( "layout"=>"vertical","align"=>"right","verticalAlign"=>'top',"x"=>-10,"y"=>100,"borderWidth"=>0))
->addSeries('Tokyo', array(7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6))
->addSeries('New York', array(-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5))
->addSeries('Berlin', array(-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0))
->addSeries('London', array(3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8));

// output the chart
echo $chart->renderChart('',true,'1000'); 
?>

Run the file index.php from your web browser.


2. All in one file

Optionally you can write all the code in one file. Below we provide a example supposing that a jQuery library should be loaded too.

The file chart.php in this case can look like this:

<?php
// include the jqUtils Class. The class is needed in all jqSuite components.
require_once "php/jqUtils.php";

// include the jqChart Class
require_once "php/jqChart.php";

$chart = new jqChart();

$chart->setChartOptions(array("defaultSeriesType"=>"line","marginRight"=>130,"marginBottom"=>25))
->setTitle(array('text'=>'Monthly Average Temperature',"x"=>-20))
->setSubtitle(array("text"=>"Source: WorldClimate.com","x"=>-20))
->setxAxis(array("categories"=>array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec')))
->setyAxis(array("title"=>array("text"=>"Temperature (°C)")))
->setTooltip(array("formatter"=>"function(){return '<b>'+ this.series.name +'</b><br/>'+this.x +': '+ this.y +' (°C)';}"))
->setLegend(array( "layout"=>"vertical","align"=>"right","verticalAlign"=>'top',"x"=>-10,"y"=>100,"borderWidth"=>0))
->addSeries('Tokyo', array(7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6))
->addSeries('New York', array(-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5))
->addSeries('Berlin', array(-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0))
->addSeries('London', array(3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8));

$script = '<script src="js/jquery.js" type="text/javascript"></script>';
$script .= '<script src="js/jquery.jqChart.js" type="text/javascript"></script>';

// echo the JS files
echo $script;

// output the chart
echo $chart->renderChart('',true,'1000'); 
?>