Setup

Installing Demos

1) Place all files in a directory on the web server. e.g. “…/www/chartphp/”

2) Run the product demos in browser. e.g. http://localhost/chartphp/index.php

Integration in your Project

  • For integration in your app, you might need to consider 2 things.

1) The folder “../../lib” will be replaced by path where you place ‘lib’ folder (if changed)

<script src="../../lib/js/jquery.min.js"></script>

2) Update include path where you place lib/inc/chartphp_dist.php. (if changed)

include("../../lib/inc/chartphp_dist.php");
$p = new chartphp();

Upgrading from older version

Simply override lib/inc & lib/js from latest build to the chartphp folder in previous implementations.
Same applies to upgrade from free to full version.

^ Top

Getting Started

Creating your First Chart

Step1: Add PHP Chart configuration code

<?php
// include and create object
include("../../lib/inc/chartphp_dist.php");
$p = new chartphp();

// set few params
$p->data =array(array(3,7,9,1,4,6,8,2,5),array(5,3,8,2,6,2,9,2,6));
$p->chart_type = "area";

// render chart and get html/js output
$out = $p->render('c1');
?>

Step2: Include JS and CSS files in your html page

<!DOCTYPE html>
<html>
<head>

    <script src="../../lib/js/jquery.min.js"></script>

</head>

Step3: Print the $out variable where you wish to display chart.

<body>
    <div style="margin:10px">

    <!-- display chart here -->
    <?php echo $out?>
    <!-- display chart here -->

    </div>  
</body>
</html>

Resources

  • Live demo
  • You can check this demo in archive demos/basic/area.php

Explanation

  • The PHP Part configured the chart and rendered the output to $out variable.
  • In HTML Part, we displayed the generated chart code $out along with few external css/js files. It’s up to you to place external css and js files at appropriate locations.
  • ->render() will generate the final output, to be displayed in view. It takes chart ID as input, which should be unique on a page.

Setting Chart Options

Based on following example code, we can add many other chart params.

<?php
// include and create object
include("../../lib/inc/chartphp_dist.php");
$p = new chartphp();

// set few params
$p->data =array(array(3,7,9,1,4,6,8,2,5),array(5,3,8,2,6,2,9,2,6));
$p->chart_type = "area";

// render chart and get html/js output
$out = $p->render('c1');
?>

Chart Type

Currently following chart types are supported:

- line
- area
- bar
- bar-grouped
- bar-stacked
- donut
- candlestick
- pie
- bubble
- heatmap
- histogram
- meter
- funnel

Usage:

$p->chart_type = "area";

Chart Title

$p->title = "Category Sales";  

Chart Labels

$p->xlabel = "My X Axis";
$p->ylabel = "My Y Axis";

Chart Ticks

$p->showxticks = true;
$p->showyticks = true;

Chart Legend labels

$p->series_label = array("Team1","Team2","Team3","Team4");

Bar, Bar Stack, Bar Group Chart Direction

$p->direction = "horizontal";

Chart Data

You can either specify data points:

$p->data = array(array(array("2010/10",48.25),array("2011/01",238.75),array("2011/02",95.50)));

or include a file with data arrays

include("../../example_data.php");
$p->data = $area_chart_data;

To create chart directly from database query:

$p->data_sql = "select c.categoryname, sum(a.UnitPrice * a.Quantity) as Sales
                from products b, `order details` a, categories c
                where a.productid = b.productid and c.categoryid = b.categoryid
                group by c.categoryid
                order by c.categoryid";

For Database driven charts, refer ‘Database Integration’ topic in docs.

Chart Colors

To specify the colors manually, the number of colors specifications must be more than or equal to data values.

// set color to green for one data value
$p->color = "green";

// set color to red,blue,green for three data values
$p->color = "red,blue,green";

// set colors using color series
$p->color ="soft"; 
or
$p->color ="metro"; 

// set colors using rgb
$p->color = ["rgb(148,0,211)","rgb(0,0,255)","rgb(0,255,0)" ,"rgb(255,0,0)"]; 

// set colors using hex code
$p->color = "#1AAF5D,#F2C500,#F45B00,#8E0000,#0E948C";

// set heatmap color series
$p->heatmap_color = "black"; 
// Color Options: green, orange, gray, black, blue, soft

More than one colors are used for pie,donut,bubble OR e.g. multi-line chart.

Chart Dimensions

You can specify width x height in % or px.

$p->width = "80%";
$p->height = "100%";

Database Integration

Step1 is to set database configuration in config.php.

To connect to MySqli:

define("CHARTPHP_DBTYPE","mysqli");
define("CHARTPHP_DBHOST","localhost");
define("CHARTPHP_DBUSER","user");
define("CHARTPHP_DBPASS","pass");
define("CHARTPHP_DBNAME","northwind");

To connect using PDO:

define("CHARTPHP_DBTYPE","pdo");
define("CHARTPHP_DBHOST","sqlite:../../sampledb/Northwind.db");
define("CHARTPHP_DBUSER","");
define("CHARTPHP_DBPASS","");
define("CHARTPHP_DBNAME","");

Next is to include configuration file in your code.

include("../../config.php"); 

Final Step is to define data_sql property, that will load data points from database.

$p->data_sql = "select strftime('%Y-%m',o.orderdate) as Year, sum(d.quantity) as Sales
                from `order details` d, orders o
                where o.orderid = d.orderid
                group by strftime('%Y-%m',o.orderdate)"; 

Resources


Updated Thursday, October 10th, 2017