Examples – PHP Charts & Graphs

Introduction

Sun, 23 Oct 2011 01:49:35 +0000

phpChart is easy to setup. It does NOT required GD or any other third party, server-side graph library or extension. In conf.php, simply set the value for SCRIPTPATH representing the relative or absolute URL to phpChart library.

1	define('SCRIPTPATH','/phpChart/'); // /phpChart/ is the absolute path to the phpChart files assuming phpChart folder is a folder in the web root.

That’s it. You are done with the setup.

Now, let’s start coding. First of all, include conf.php in on top of the every page that uses phpChart.

1	require_once("../conf.php"); // this must be include in every page that uses phpChart.

Once it is included, you will need only two lines of code to have a working PHP Chart as the example shown below. All phpChart code will require those two lines that take a series of data and an unique name. Data is passed in as an array of series that is either an array of y values or an array of paired [x,y]. No additional plugins or options are required.

1 2	$pc = new C_PhpChartX(array(array(11, 9, 5, 12, 14)),'basic_chart'); $pc->draw();

Above Code Walk Through

The first line is to create our phpChart object by calling the constructor with two parameters;
- the 1st parameter is the data, which must be an array of y values or array of paired [x, y]
- The 2nd parameter is the unique name for the chart. The unique name cannot have letter space.
The second line is the draw function to render the chart.

The complete code:

Note that ALWAYS to include before tag , so that HTML5 elements such as canvas are rendered in modern web browser.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

require_once("../conf.php");
?>
DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>phpChart - Basic Charttitle>
head>
<body>

$pc = new C_PhpChartX(array(array(11, 9, 5, 12, 14)),'basic_chart');
$pc->draw();
?>

body>
html>

Live demo

It’s impossible to demostrate every single property used in phpChart because there are simply too many. The quickest way to get started is to look at each examples on this page. Each examples comes with the PHP source code as well as generated client-side javascript, and the chart. phpChart is built on top of jqPlot javascript charting library. For complete reference, visit http://www.jqplot.com/docs/files/jqplot-core-js.html

The post Introduction appeared first on PHP Charts & Graphs.

Add Chart Title

Sun, 13 Nov 2011 21:26:53 +0000

You can add a title by calling set_title() method. It will be displayed on the top of the chart. Notice that the parameter is an array. For demo purpose, The HTML code is excluded from the source.

1
2
3

$pc = new C_PhpChartX(array(array(11, 9, 5, 12, 14)),'basic_chart');
$pc->set_title(array('text'=>'Basic Chart'));
$pc->draw();

Live demo

The post Add Chart Title appeared first on PHP Charts & Graphs.

Enable Animation

Fri, 25 Nov 2011 02:29:03 +0000

The render animation is now supported for the most renderer types. By default, animate is turned off. Simply call set_animate() method and pass true as the parameter value to enable animation.

1
2
3
4

$pc = new C_PhpChartX(array(array(11, 9, 5, 12, 14)),'basic_chart');
$pc->set_animate(true);
$pc->set_title(array('text'=>'Basic Chart Animated'));
$pc->draw();

Live demo

The post Enable Animation appeared first on PHP Charts & Graphs.

Change Renderer Type (paid versions) *

Fri, 25 Nov 2011 02:54:37 +0000

Note:
* Renderers other than the default Line type is only available in paid versions.

By default the renderer is line type. You can change to other renderer type by simply using a renderer plugin such as Bar Renderer. Must prefix with plugin:: before renderer name. phpChart automatically includes required jqplot plugins files for you.

Different renderer can be applied to different part of chart such as series, legend, grid, and axes. In this example, the Bar Renderer is used when displaying data series.

Series default are the default options that will be applied to all series such as type of renderer, renderer options, label, color, shadow etc. e.g.

1
2
3
4
5

$pc = new C_PhpChartX(array(array(11, 9, 5, 12, 14)),'basic_chart');
$pc->set_animate(true);
$pc->set_title(array('text'=>'Basic Chart with Bar Renderer'));
$pc->set_series_default(array('renderer'=>'plugin::BarRenderer'));
$pc->draw();

Live demo

List of available renderer plugins for different chart types (case-sensitive):

BarRenderer
BezierCurveRenderer
BlockRenderer
BubbleRenderer
CanvasAxisLabelRenderer
CanvasAxisTickRenderer
CategoryAxisRenderer
DateAxisRenderer
DonutRenderer
EnhancedLegendRenderer
FunnelRenderer
LogAxisRenderer
MekkoAxisRenderer
MekkoRenderer
MeterGaugeRenderer
OHLCRenderer
PyramidAxisRenderer
PieRenderer

The post Change Renderer Type (paid versions) * appeared first on PHP Charts & Graphs.

Add Non-renderer Plugins

Fri, 25 Nov 2011 05:33:02 +0000

For non-renderer plugins such as highlighter, cursor, etc, they must be added maunally using add_plugins() method whenever needed. Those type of plugins do not actually do any rendering but adding additional features such as mouse over highlight, zoom in/out and mouse cursor.

1
2
3
4
5
6

List of non-renderer plugins:

CanvasTextRenderer
Highlighter
CanvasOverlayciParser
Cursor
Dragable
PointLabels
Trendline

Note that CanvasTextRenderer is a non-renderer plugin even it is suffixed with “renderer”. This is not an error. This is because it’s not a renderer by itself. It creates a HTML5 canvas in which other renderer plugins can be used such as CanvasAxisLabelRenderer and CanvasAxisTickRenderer.

Live demo

The post Add Non-renderer Plugins appeared first on PHP Charts & Graphs.

Set PHP Chart Default Options

Fri, 25 Nov 2011 20:22:03 +0000

You can set some default options for differnt parts of chart for convenience such as series default, axes default, legend default etc, with a single function called set_defaults(). This is a great helper functions to set all the default values in one place.

1
2
3
4
5
6
7
8
9
10
11

$pc = new C_PhpChartX(array(array(11, 9, 5, 12, 14),array(1, 4, 3, 2, 5)),'basic_chart');
$pc->set_animate(true);
$pc->set_title(array('text'=>'Basic Chart with Bar Renderer'));

// $pc->set_series_default(array('renderer'=>'plugin::BarRenderer'));
$pc->set_defaults(array(
'seriesDefaults'=>array('renderer'=>'plugin::BarRenderer','rendererOptions'=> array('barPadding'=>6,'barMargin'=>40)),
'axesDefaults'=>array('showTickMarks'=>true,'tickOptions'=>array('formatString'=>'%d')),
'stackSeries'=>true));
$pc->add_plugins(array('highlighter', 'cursor'));
$pc->draw();

Live demo

The post Set PHP Chart Default Options appeared first on PHP Charts & Graphs.

Set Series Default

Fri, 25 Nov 2011 20:47:01 +0000

set_defaults() is a great helper function with simple default values. However, if your graphics have a lot more complicated default settings, you should use each set default methods individually for code readability.

For example, to set series default, you can use set_series_default() function. Series default are the default options that will be applied to all series such as type of renderer, renderer options, label, color, shadow etc.

1
2
3
4
5
6
7
8
9
10
11
12

c = new C_PhpChartX(array(array(11, 9, 5, 12, 14)),'basic_chart');
$pc->set_animate(true);
$pc->set_title(array('text'=>'Basic Chart with Donut Renderer'));

$pc->set_series_default(array(
'renderer'=>'plugin::DonutRenderer',
'rendererOptions'=>array('sliceMargin'=>2,'innerDiameter'=>110,'startAngle'=>-90,'highlightMouseDown'=>true),
'shadow'=>true
));

$pc->add_plugins(array('highlighter'));
$pc->draw();

Live demo

Complete Series reference: http://www.jqplot.com/docs/files/jqplot-core-js.html#Series

The post Set Series Default appeared first on PHP Charts & Graphs.

Set PHP Chart Grid Properties

Sat, 26 Nov 2011 02:48:25 +0000

We will now start diving deeper into the phpChart. We will go over some of the main functions used for specifying properties in different phpChart object. For detailed technical instructions, please take a look at the documentation section of the web page.

Grid – Object representing the grid on which the plot is drawn
Axis – An individual axis object
Legend – Chart legend object
Title – Chart title object
Series – An individual data series object representing a series of data on the chart

Let’s start out an example with the grid object, which is object representing the grid on which the plot is drawn.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

$pc = new C_PhpChartX(array(array(11, 9, 5, 12, 14)),'basic_chart');
$pc->set_animate(true);
$pc->set_title(array('text'=>'Basic Chart'));

$pc->set_series_default(array(
'renderer'=>'plugin::BarRenderer',
'rendererOptions'=>array('sliceMargin'=>2,'innerDiameter'=>110,'startAngle'=>-90,'highlightMouseDown'=>true),
'shadow'=>true
));

$pc->add_plugins(array('highlighter'));

//set phpChart grid properties
$pc->set_grid(array(
'background'=>'lightyellow',
'borderWidth'=>0,
'borderColor'=>'#000000',
'shadow'=>true,
'shadowWidth'=>10,
'shadowOffset'=>3,
'shadowDepth'=>3,
'shadowColor'=>'rgba(230, 230, 230, 0.07)'
));

$pc->draw();

Live demo

Complete Grid reference: http://www.jqplot.com/docs/files/jqplot-core-js.html#Grid

The post Set PHP Chart Grid Properties appeared first on PHP Charts & Graphs.

Set Axes Properties

Sat, 26 Nov 2011 06:37:09 +0000

Use set_axes() method to set axes properites. You can have 2 x xaxes, and update to 9 yaxes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Live demo

Complete Grid reference: http://www.jqplot.com/docs/files/jqplot-core-js.html#Axis

The post Set Axes Properties appeared first on PHP Charts & Graphs.

Set X Axes, and Y Axes Properties

Sat, 26 Nov 2011 07:34:23 +0000

You can also set individual x, y axes properties. To set only x axes properties, use set_xaxes() method. Likewise, to set only y axes properties, use set_yaxes().

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

$s1 = array(11, 9, 5, 12, 14);
$s2 = array(6, 8, 7, 13, 9);

$pc = new C_PhpChartX(array($s1, $s2),'basic_chart');
$pc->set_animate(true);
$pc->set_title(array('text'=>'Basic Chart'));

$pc->set_series_default(array(
'renderer'=>'plugin::BarRenderer',
'rendererOptions'=>array('sliceMargin'=>2,'innerDiameter'=>110,'startAngle'=>-90,'highlightMouseDown'=>true),
'shadow'=>true
));

$pc->add_plugins(array('highlighter', 'canvasTextRenderer'));

//set phpChart grid properties
$pc->set_grid(array(
'background'=>'lightyellow',
'borderWidth'=>0,
'borderColor'=>'#000000',
'shadow'=>true,
'shadowWidth'=>10,
'shadowOffset'=>3,
'shadowDepth'=>3,
'shadowColor'=>'rgba(230, 230, 230, 0.07)'
));

//set axes
$pc->set_axes(array(
'xaxis'=>array('rendnerer'=>'plugin::CategoryAxisRenderer'),
'yaxis'=>array('padMax'=>2.0)));
//set axes
$pc->set_xaxes(array(
'xaxis' => array(
'borderWidth'=>2,
'borderColor'=>'#999999',
'tickOptions'=>array('showGridline'=>false))
));

$pc->set_yaxes(array(
'yaxis' => array(
'borderWidth'=>0,
'borderColor'=>'#ffffff',
'autoscale'=>true,
'min'=>'0',
'max'=>20,
'numberTicks'=>21,
'labelRenderer'=>'plugin::CanvasAxisLabelRenderer',
'label'=>'Energy Use')
));
$pc->draw();

Live demo

The post Set X Axes, and Y Axes Properties appeared first on PHP Charts & Graphs.