Skip navigation

PHP JUGNOON jChart Documentation


jChart is a complete script which allow you to generate professional chart, flow chart, organizational charts in real time, customize it from every angle, save it in database and load it back to its original position using latest web standard tools including jquery, bootstrap, angular js and php.

View details »

Change Log

Current version of jChart script is 1.0.0. There is no change log, bug fixes or update reports available yet.


Jugnoon Membership Kit has been used as core script for providing a back bone for jChart script demonstartion. You can use your own solution for jChart script integration.

View details »

What's Included

Core files related to jChart script includes.

├── adm/sc/tree/ (manage & view family tree and data)
├── include/bll/treemgt.php (data access & business layer for tree data processing)
├── tree/ (core tree scripts & handler files)
├── include/db.php (core data access layer)
├── include/config.php (core website configurations)
├── process.php (main tree handler section)
├── adm/sc/charts/ (manage charts and create new charts)


Default folder where to store family tree member photos and thumbs.

├── org/ (for storing original photos)
├── / (for storing photo thumbs)


Jugnoon jChart Script uses core bootstrap 3.0 css and js files by default with some custom css. You can adjust custom css based with your own design requirements.

├── base/ (main theme)
│    ├── images/ (Base theme images)
│    ├── bootstrap-glyphicons.css
│    ├── bootstrap.min.css
│    ├── layout.css (website own style sheet)
├── fonts/ (glyphicons fonts)



Feature Dependency
--- There is no dependencies required for using jChart script in your application.


Installation steps

Installation of jChart script is same as Jugnoon Membership Kit, click on Installation Guide for more detail.



List of tables uses by jChart script to store tree structure, data and relationship information in database.

├── charts (for storing main charts information)
├── chartnodes (for storing each chart node information)
├── chartconnects (for storing chart connection information)


List of third party plugins we used in membership kit. Most of plugins located in folder plugins. All plugins we used are available for free but still you must use & obey their own license terms & conditions before using it.

Name Detail
Twitter Bootstrap
Plupload For uploading photos.


Core Configurations

Tree have few configuration options which can be set through tree/js.php file.

Name Default Value Detail
dn root url Set website root url.
hd handler path set handler path reponsible for processing tree data
sconnects handler path set handler path reponsible for processing tree connects
lhandler handler path set handler path reponsible for loading tree data
chandler handler path set handler path reponsible for loading tree connects
strokeColor color set connect line color
hoverPaintStyle color set connect line color when hover
strokeLineWidth value set connect line width
hoverstrokeLineWidth value set connect line width when hover
connectStyle flowchart set connect line styles e.g Bezier, StateMachine, Flowchart,
offsetdiff value space between two nodes when dynamically created
defaultUName value default logged in username or full name, it also act as default node and represent author of tree
defaultFName value default logged in user first name
defaultSName value default logged in user sur name
redirectPageName value page name where actual tree creation resides. It can be used for redirection via js script
chartID value set chart id for loading charts
cornerRadius 10 set corner radius for connections. if 0 then there will be no roundness in connection lines
overlaySettings object enable arrows in connections. if you need arrow to be display at the end of lines, just uncomment overlaySettings code in tree/tree.js file
bkColor value store global background color for node
ftColor value store global font color for node
brColor value store global border color for node

Data Access Layer


All data processing and busines logic processing handle by files located at include/bll/ folder.

├── treemgt.php (for handling jChart data access & business layer managment)

Data Access Examples

jChart script uses advance PDO script for handling and processing data between database and website. We have extended PDO classes for making code as much easy as we can. Here is list of sample example code.

Add Operation

$db = new DB();
$lastinsertid = true;
$queryAnalysis = false;
$id = $db->Insert("[tablename]", $fields, $lastinsertid, $queryAnalysis); 
return $id;

[tablename] represent table name, while $fields represent array of fields with values e.g

$fields = array('field01' => 'value01', 'field02' => 'value02');

Update Operation

$db = new DB();
return $db->Update("[tablename]", $fields, $filters, $queryanalysis);

$filters represent sql where filter clause.

$filter = array('id' => '23', 'isenabled' => '1'); // goes to WHERE id = 23 AND isenabled = 1;

Delete Operation

$db = new DB();
$db->Delete("[tablename]", $filters);

Count Operation

$db = new DB();
return $db->Count("[tablename]", $filters);

Fetch Operation

$db = new DB();
return fetch_values($fields, $isadmin, $filters, $ismultiple = false, $queryonly=false);

$fields list of table fields to fetch e.g "username, firstname, lastname, email"
$isadmin true or false
$filters where clause array of values to filter records
$ismultiple true or false for fetching single or multiple records
$queryonly true or false for returning sql query for analysis purpose.


Sample screen shot of chart creation
PHP jChart Sample Screenshot

Chart Nodes

Each node within chart represent single entity. View screenshots how each node represent in tree and store various types of data.
Node representation in chart
Sample look and feel of node in chart if photo available. Without photo node will display just name of person or organization name or role model.
Single node customization option
Single node customization option
Global chart customization and settings
Global chart customization and settings
Readonly view of single node entity
Readonly view of single node entity
Node view with edit option
Node view with edit option
Node Edit view Option
Node view with edit option

Chart Node Connect Options

Each node have options to create various type of relationships and connections with other nodes. Main connection types include, add parent node, add child node, add noe on left site, add node on right side, add node without any relationship.

Chart Node Other Options

When tree saved, user can load and make changes into chart. User can make a tree public or private
Admin view of chart listing
Admin view of chart listing
Colorful view of nodes


Enter your e-mail and subscribe to our newsletter in order to get email notifications of our product upgrades and new product release.

Follow Us