Archive | Examples

RSS feed for this section

Introduction

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 <!DOCTYPE HTML> before <html> 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

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

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

</body>
</html>

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

Add Chart Title

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();

Enable Animation

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();

Change Renderer Type (paid versions) *

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();

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

Add Non-renderer Plugins

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

$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->add_plugins(array('highlighter', 'cursor'));
$pc->draw();

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.

Set PHP Chart Default Options

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();

Set Series Default

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();

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

Set PHP Chart Grid Properties

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();

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

Set Axes Properties

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

$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)'
));

//set axes
$pc->set_axes(array(
'xaxis'=>array('rendnerer'=>'plugin::CategoryAxisRenderer'),
'yaxis'=>array('padMax'=>2.0)));

$pc->draw();

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

Set X Axes, and Y Axes Properties

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();

Set Properties of Legend Object

Set the properties of legend object using set_legend() method.

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
52
53
54
55
56
57
58
59
60
61
62

$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')
));

//set legend properties
$pc->set_legend(array(
'renderer' => 'plugin::EnhancedLegendRenderer',
'show' => true,
'location' => 'e',
'placement' => 'outside',
'yoffset' => 30,
'rendererOptions' => array('numberRows'=>2),
'labels'=>array('Oil', 'Renewables')
));
$pc->draw();

EnhancedLegendRenderer is a useful renderer plugin for legend. Click on one of the legends to hide or unhide a particular series.

Complete legend property reference: http://www.jqplot.com/docs/files/jqplot-core-js.html#Legend.Properties

Using Custom Javascript

For more advanced usage, properties such as data renderer, can have user defined custom javascript function as the event handler. In order to reference a javascript function on client side, you must prefix “js::” before the function name, so the phpChart knows it’s a custom javascript function.

1 2	// ajaxDataRenderer is a javascript function defined by user $pc->set_data_renderer('js::ajaxDataRenderer');

The examples below use custom javascript as the data source for the data renderer. This is extremely useful in situation where the data is dynamically or conditionally created.

In addition, the second example also demonstrates using a data source from a URL using Ajax for plotting series on a PHP graph. In the example it passes URL jsondata.txt as the data source, which can be replaced with any URL provisioning data in valid JSON format.

Documentation on set_data_renderer() method used in the examle can be found here.

complete code:

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
52
53
54
55
56
57
58
59
60
61
62

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

<body>
<style type="text/css">
#basic_chart_4 .jqplot-point-label {
border: 1.5px solid #aaaaaa;
padding: 1px 3px;
background-color: #eeccdd;
}
</style>
<?php
$data1 = array();
$pc = new C_PhpChartX(array($data1),'basic_chart_4');
$pc->set_title(array('text'=>'Basic Chart with Custom JS'));
$pc->set_data_renderer("js::sineRenderer");
$pc->add_plugins(array('pointLabels'));
$pc->set_animate(true);
$pc->draw();
?>
<script>
sineRenderer = function() {
var data = [[]];
for (var i=0; i<13; i+=0.5) {
data[0].push([i, Math.sin(i)]);
}
return data;
};
</script>

<?php
$data1 = array();
$pc = new C_PhpChartX('./jsondata.txt','basic_chart_ajax');
$pc->set_title(array('text'=>'Basic Chart with Ajax'));
$pc->set_data_renderer("js::ajaxDataRenderer");
$pc->draw();
?>
<script>
var ajaxDataRenderer = function(url, plot)
{
var ret = null;
$.ajax({
// have to use synchronous here, else returns before data is fetched
async: false,
url: url,
dataType:'json',
success: function(data) {
ret = data;
}
});
return ret;
};
</script>
</body>
</html>

Live demo (scroll down to see the 2nd example)

Enable/Disable Debugging

All the examples listed have debug turned on so that the not only the PHP chart is displayed, but also the generated client side javascript, as well as list of plugins currently used. You can use enable_debug() function to enable debug in individual PHP chart, or define DEBUG value in conf.php to enable/disable debug at global level. You should disable debug in production.

In conf.php

1	define('DEBUG', true);

Zoom in/out

You can easily zoom in a graph using set_cursor() function and set the property “zoom” to true. It requires non-renderer plugin “cursor“.

Click an area on the graph, then drag the mouse to zoom in. Double click anywhere to reset zoom in level. Zooming also works multiple axes.

1
2
3
4

$pc->add_plugins(array('cursor'));
$pc->set_cursor(array(
'show'=>true,
'zoom'=>true));

Complete cursor plugin reference can be found at http://www.jqplot.com/docs/files/plugins/jqplot-cursor-js.html

Manipulating Series with Javascript

It’s possible to manipulate a graph that has already been rendered using javascript.

In the following example, the javascript function updatePoint is called to update series in the chart based on user input such as which series, changing X and Y values.

The series is then redrew using the jqPlot drawSeries function. Sounds complicated, but actually it’s very simple. The phpChart simply does the rendering and draw the chart. The javascript is used to interactively manipulate the graph by the user.

HTML

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

<form action="#" onsubmit="return updatePoint();">
Series: <select name="seriesId">
<option value="0">lions</option>
<option value="1">tigers</option>
<option value="2">bears</option>
</select>
Point: <select name="pointId">
<option value="0">first</option>
<option value="1">second</option>
<option value="2">third</option>
<option value="3">fourth</option>
<option value="4">fifth</option>
</select>
X: <input type="text" size="3" name="xvalue" />
Y: <input type="text" size="3" name="yvalue" />
<input type="submit" name="submit" value="Update" />
</form>

Javascript:

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

<script type="text/javascript" lang="javascript">
function updatePoint() {
var f = document.forms[0];
var seriesIndex = f.seriesId.selectedIndex;
var series = _plot1.series[seriesIndex];
var data = series.data[f.pointId.selectedIndex];
var xval = parseFloat(f.xvalue.value);
var yval = parseFloat(f.yvalue.value);
data[0] = xval;
data[1] = yval;
_plot1.drawSeries({}, seriesIndex);
return false;
}

function updateSeries() {
_plot1.series[2].data = [[1,4], [2,6], [3,4], [4,1], [5,7]];
_plot1.drawSeries({}, 2);
return false;
}
</script>

PHP:

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

<?php
$l1 = array(2, 3, 1, 4, 3);
$l2 = array(1, 4, 3, 2, 5);
$l3 = array(7, 9, 11, 6, 8);

$pc = new C_PhpChartX(array($l1,$l2,$l3),'plot1');
$pc->add_plugins(array('highlighter'),true);

$pc->set_legend(array('show'=>true));
$pc->add_series(array('label'=>'lions'));
$pc->add_series(array('label'=>'tigers'));
$pc->add_series(array('label'=>'bears'));
$pc->draw(600,400);

Real Time Graph Update/Replotting

The graph can also be updated automatically using javascript without user intervention. This is useful to potting charts for situation where data points come from a continuous source such as stock and weather. The key is to use standard javascript setInterval function to set re-plotting interval.

Javascript (partial source. Only to demonstrate how setInterval is used. See live demo for complete source):

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

function UpdateGraph() {
StopGraphLoop();
interval = parseInt($('#interval').val());
npoints = parseInt($('#npoints').val());
maxIterations = parseInt($('#maxIterations').val());
niters = 0;
GraphUpdate = setInterval(runUpdate, interval);
}

function runUpdate() {
if (niters < maxIterations) {
BuildDataArray();
Graph.series[0].data = GraphData;
Graph.replot({resetAxes:true});
niters++;
}
else {
StopGraphLoop();
}
}

function StopGraphLoop() {
clearInterval(GraphUpdate);
}

PHP (partial)

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

$pc = new C_PhpChartX(array($GraphData),'Graph');
$pc->add_plugins(array('canvasTextRenderer','canvasAxisTickRenderer','canvasAxisLabelRenderer','highlighter','canvasOverlay','cursor','pointLabels'),true);

$pc->set_title(array('text'=>'Test Data Run'));
$pc->set_cursor(array('show'=>false));
$pc->set_point_labels(array('show'=>false));
$pc->set_highlighter(array('show'=>false));

$pc->set_axes_default(array(
'pad'=>0.05,
'labelRenderer'=>'plugin::CanvasAxisLabelRenderer',
'tickRenderer'=>'plugin::CanvasAxisTickRenderer',
'labelOptions'=>array('fontSize'=>'13pt')
));
$pc->set_axes(array(
'xaxis'=> array('label'=> 'Number'),
'yaxis'=> array('label'=>'Value')
));

// should be the last method to call
$pc->draw(800,500);

If you have an array of series of known data that needs to be displayed in sequence, instead of real-time replotting, check out the dynamic replotting example below. Scroll to the bottom and click on “Start” buttons to run the example.

https://phpchart.com/phpChart/examples/dynamicplot.php

Rotating Labels

To rotate any text in axis, use one of the below functions and set angle in tickOptions. You must add canvasAxisTickRenderer plugin before changing the angle value in its tickOptions property to rotate text.

Many useful properties in canvasAxisTickRenderer plugin are available for text formatting such as prefix, labelPosition, and textColor.

The full documentation is available on jqPlot site here: http://www.jqplot.com/docs/files/plugins/jqplot-canvasAxisTickRenderer-js.html

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

$pc = new C_PhpChartX(array($line1),'plot1');
$pc->add_plugins(array('canvasTextRenderer','canvasAxisTickRenderer','dateAxisRenderer'),true);
$pc->set_title(array('text'=>'Rotated Axis Text'));
$pc->set_axes(array(
'xaxis'=>array(
'renderer'=>'plugin::DateAxisRenderer',
'min'=>'August 30, 2008',
'tickInterval'=>'1 month',
'rendererOptions'=>array('tickRenderer'=>'plugin::CanvasAxisTickRenderer'),
'tickOptions'=>array(
'formatString'=>'%b %#d, %Y',
'fontSize'=>'10pt',
'fontFamily'=>'Tahoma',
'angle'=>-40,
'fontWeight'=>'normal',
'fontStretch'=>1)
)

));
$pc->add_series(array('lineWidth'=>4,'markerOptions'=>array('style'=>'square')));
$pc->draw(600,400);

Min & Max Lines

Min and max lines are a common way to identity data partition and boundaries on a chart. In phpChart the min and max are treated just like regular data series. No special function or plugin is required.

For example:

1
2
3
4
5
6

$line1 = array(array(1,1), array(4,2), array(9,3), array(16,4));
$line2 = array(array(25,1), array(12.5,2), array(6.25,3), array(3.125,4));
$min = array(array(2, 0.6), array(2, 4.4));
$max = array(array(15, 0.6), array(15, 4.4));

$pc = new C_PhpChartX(array($line1,$line2, $min,$max),'chart1');

Data Point Labels on PHP Graph

You can label specific data points in a graph with additional text or even image to further describe the data presented in PHP chart. To do that, the non-renderer plugin, “pointLabels”, is required. This plugin places labels on the plot at the data point locations.

The last value in the data point array in a data series is used for the label by default. The following example uses HTML image for data points.

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

$s1 = array(
array(0, 300, '<img height="30px" width="30px" src="images/new.png"/>'),
array(1, 150, '<img height="30px" width="30px" src="images/new.png"/>'),
array(2, 35, '<img height="30px" width="30px" src="images/new.png"/>'));

....

$pc->add_plugins(array('cursor','pointLabels','barRenderer','categoryAxisRenderer'),true);

....

$pc->set_series_default(array(
'pointLabels'=> array(
'show'=> true,
'escapeHTML'=> false,
'ypadding'=> -15
)
));

Complete pointLabels reference:
http://www.jqplot.com/docs/files/plugins/jqplot-pointLabels-js.html

PHP Pie Chart, Line Chart & Bar Chart

Line, bar and pie charts are the most commonly used charts. By default, all charts plotted are line charts when no renderer plugin is specified.

For bar charts, simply use plugin::BarRenderer,

1	$pc->set_series_default(array('renderer'=> 'plugin::BarRenderer', 'rendererOptions'=> array('barPadding'=>6,'barMargin'=>40)));

For pie charts, use plugin::PieRenderer when specify renderer property.

1	$pc->set_series_default(array('renderer'=> 'plugin::PieRenderer', 'rendererOptions'=> array('sliceMargin'=>8)));

Bubble Chart

Bubble chart is a little different from pie and bar charts because it represents three dimensional data. Data is passed in to a bubble chart as a series of [x, y, radius, ]. The optional fourth element of the data point can either be either a label string or an object having ‘label’ and/or ‘color’ properties to assign to the bubble.

The bubble chart requires plugin::BubbleRenderer.

1
2
3
4
5

$pc->set_series_default(array(
'renderer'=>'plugin::BubbleRenderer',
'rendererOptions'=>array(
'autoscalePointsFactor'=>-.15,'bubbleAlpha'=>0.6,'highlightAlpha'=>0.8),
'highlightMouseDown'=>true,'shadow'=>true,'shadowAlpha'=>0.05));

Complete reference to Bubble Chart plugin:
http://www.jqplot.com/docs/files/plugins/jqplot-bubbleRenderer-js.html

OHLC, HLC, Candlestick/Stock Charts

OHLC, HLC and Candlestick charts all requires plugin::OHLCRenderer renderer plugin, then simply set the candleStick property to true in rendererOptions.

1
2
3

$pc->add_series(array(
'renderer'=>'plugin::OHLCRenderer',
'rendererOptions'=>array('candleStick'=>true)));

External Data Source through AJAX

Call set_data_renderer() function, and pass the following javascript function as js::ajaxDataRenderer. Note the js:: prefix indicating an external javascript function.

Javascript

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

var ajaxDataRenderer =
function(url, plot)
{
var ret = null;
$.ajax({
// have to use synchronous here, else returns before data is fetched
async: false,
url: url,
dataType:'json',
success: function(data) {
ret = data;
}
});
return ret;
};

In phpChart constructor, pass the external data source as the first parameter as either a file or URL. In this example, it points to jsondata.txt which is external text file on the same server. But it also can be a URL to an external site.

PHP

1
2
3
4
5

$data1 = array();
$pc = new C_PhpChartX('./jsondata.txt','basic_chart_ajax');
$pc->set_title(array('text'=>'Basic Chart Ajax'));
$pc->set_data_renderer("js::ajaxDataRenderer");
$pc->draw();

1	[[1, 3, 2, 4, 6, 9]]

Data Series With Arbitrary Values

It’s common to have series that pairs data value with arbitrary text. The key is pair both data value and text in array in the following format and include three plugins: canvasTextRenderer, CategoryAxisRenderer, and CategoryAxisRenderer.

1	array(array("text 1", 3), array("another text", 4)...)

Complete example:

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

$line = array(array('Cup Holder Pinion Bob', 7), array('Generic Fog Lamp', 9), array('HDTV Receiver', 15), array('8 Track Control Module', 12), array(' Sludge Pump Fourier Modulator', 3),array('Transcender/Spice Rack', 6), array('Hair Spray Danger Indicator', 18));
$pc = new C_PhpChartX(array($line),'chart_1');
$pc->add_plugins(array('canvasTextRenderer'));

//set animation
$pc->set_animate(true);
//set title
$pc->set_title(array('text'=>'Concern vs. Occurrance'));

//set series
$pc->add_series(array('renderer'=>'plugin::BarRenderer'));
//set axes
$pc->set_axes(array(
'xaxis' => array(
'renderer'=>'plugin::CategoryAxisRenderer',
'label'=>'Warranty Concern',
'tickOptions'=>array(
'enableFontSupport'=>true,'angle'=>-30),
'tickRenderer'=>'plugin::CanvasAxisTickRenderer'),
'yaxis' => array(
'autoscale'=>true,
'label'=>'Occurance',
'tickOptions'=>array('enableFontSupport'=>true,'angle'=>-30),
'tickRenderer'=>'plugin::CanvasAxisTickRenderer')
));

$pc->draw(800,500);

Dots Only Chart with Trend Line

You can also render chart with dots or points only without line in between by setting “showGridLine” to false. You can further remove the grid and borders using set_grid() method. Add plugin “trendline” to show the linear approximation.

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

$pc = new C_PhpChartX(array(array(11, 9, 5, 12, 14)),'basic_chart');
$pc->add_plugins(array('trendline'));
$pc->set_defaults(array('seriesDefaults'=>array('showLine'=>false)));
// remove background, border and grid.
$pc->set_axes(array(
'xaxis'=>array('tickOptions'=>array('showGridline'=>false)),
'yaxis'=>array('tickOptions'=>array('showGridline'=>false))));
$pc->set_grid(array(
'background'=>'white',
'borderWidth'=>0,
'borderColor'=>'#000000',
'shadow'=>false));
$pc->draw();

Curved Line

Curved line can be easily achieved with rendererOptions “smooth” property. When it is set to true, it will display a smooth curved line between each points instead of straight lines.

1
2
3

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

Logarithmic Axis using LogAxisRenderer

Display logarithmic axis using LogAxisRenderer. Make sure the tickDistribution is set to “power” for power of 10 display on its axis.

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

<?php
$line1 = array(array(100,121), array(2000,21), array(5000,35), array(6600,43));
$pc = new C_PhpChartX(array($line1),'chart_1');
$pc->add_plugins(array('canvasTextRenderer'));
// curved line
$pc->set_series_default(array('rendererOptions'=> array('smooth'=>true)));
// Logarithm
$pc->set_axes(array(
'xaxis' => array(
'renderer'=>'plugin::LogAxisRenderer',
'tickOptions'=>array('tickDistribution' =>"power", // power of 10
'formatString' => "%'i",
'showGridline'=>false),
'labelRenderer'=>'plugin::CanvasAxisLabelRenderer',
'min'=>0,
'showGridline'=>false,
'ticks'=> array(1, 10, 100, 1000, 10000)
),

'yaxis' => array(
'autoscale'=>false,
'tickOptions'=>array('showGridline'=>false),
'labelRenderer'=>'plugin::CanvasAxisLabelRenderer')
));
$pc->draw(800,500);

Be Responsive!

With a little tricks with Javascript and CSS, the phpChart can be responsive. It stretches and shrinks based on the page width, perfect for mobile devices such as iOS and Android.

The following code snippet works on any charts. Simply copy and paste them to the END of your page before </body> tag.

CSS:

1
2
3
4
5
6

.jqplot-target{
position: relative !important;
width: auto !important;
/* max-width: 1000px; */ /* OPTIONAL */
min-width: 300px; /* OPTIONAL */
}

Javascript:

Please note that canvas object name is the chart id with underscore prefix. For instance, if id is “chart1”, then the javascript name is “_chart1”.

1
2
3
4
5
6
7

<script>// <![CDATA[
$(document).ready(function(){
$(window).resize(function() {
_chart1.replot( { resetAxes: true } );
});
});
// ]]></script>

Live demo – Try resize the window using mouse!

Complete Examples with Source

Below is comprehensive list of all the phpChart examples for your reference. It’s recommended to look at each example as companion exercise to the online documentation to better understand how properties are used in phpChart.

Click on text “PHP Source” to reveal the PHP source code. Each example also shows generated javascript and plugins used.

phpChart Area Graph
Axis Labels Rotated Text
Axis Labels Rotated Text 2
Axis Labels
Banded Line
Bar, Line, Pie Stacked Graph
Bar with Missing Values
Bar Chart
Bar Chart 2
Basic phpChart
Basic phpChart 2 (AJAX)
Bezier Curve
Block Plot Chart
Break on Null Value
Bubble Chart
Bubble Chart 2
Candle Stick
Canvas Overlay
Run-time Error Catch
Category with Horizontal Bar
Category vs Linear Axes
Chartin Table
ci Parser
Custom Highlighter & Cursor with Trend Line
Pie Chart
Dashed Lines
Data Labels
Data Renderer
Data Tracking
Donut Graph
Donut Graph 2
Dynamic Plotting
Image Export
Filled Line
Filled Line Category Axis
Fill to Zero
Funnel Chart
Grid Customization
Grid Padding
Hidden Plot
Highlighter
Highlighter 2
Highlighter 3
Initial Ticks
Legend Lables
Legend Lables 2
Line, Pie, Bar Mixed PHP Chart
Marker Styles Customization
Mekko Chart
Meter Gauge Chart
Meter Gauge Chart 2
Min & Max Lines
Chart with Missing Values
Multiple Colored Bar Chart
Multiple Lines with Pattern
Multiple Y Axes
Multiple Axes with Rotated Text
No Data
Pie Chart
Pie Chart 2
Pie Chart 3
Pie Chart 4
Point Labels
Point Labels 2
Label with Prefix
Real Time Replotting
Rotated Tick Labels
Rotated Tick Labels with Zoom
Series Canvas Reorder
Series Update
Shadow
Waterfall
Zoom in/out
Data Series With Arbitrary Text and Value Pair
Dots Chart with Trend Line
Curved Line
Display Logarithmic Axis
Dots and Line Chart

Top