PHP Charts & Graphs

Complete Examples with Source

Mon, 23 Jun 2014 17:57:37 +0000

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

The post Complete Examples with Source appeared first on PHP Charts & Graphs.

Be Responsive!

Mon, 23 Jun 2014 17:57:26 +0000

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 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

Live demo – Try resize the window using mouse!

The post Be Responsive! appeared first on PHP Charts & Graphs.

Logarithmic Axis using LogAxisRenderer

Mon, 23 Jun 2014 17:56:16 +0000

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

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

Live demo

The post Logarithmic Axis using LogAxisRenderer appeared first on PHP Charts & Graphs.

Curved Line

Mon, 23 Jun 2014 05:25:39 +0000

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

Live demo!

The post Curved Line appeared first on PHP Charts & Graphs.

Dots Only Chart with Trend Line

Fri, 20 Jun 2014 18:10:16 +0000

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

Live demo

The post Dots Only Chart with Trend Line appeared first on PHP Charts & Graphs.

Data Series With Arbitrary Values

Thu, 31 Oct 2013 20:25:20 +0000

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

Live demo

The post Data Series With Arbitrary Values appeared first on PHP Charts & Graphs.

External Data Source through AJAX

Wed, 09 May 2012 05:42:27 +0000

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

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

jsondata.txt

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

Live demo

The post External Data Source through AJAX appeared first on PHP Charts & Graphs.

OHLC, HLC, Candlestick/Stock Charts

Wed, 09 May 2012 04:51:35 +0000

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

Live demo

The post OHLC, HLC, Candlestick/Stock Charts appeared first on PHP Charts & Graphs.

Bubble Chart

Tue, 08 May 2012 04:43:07 +0000

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

Live demo

The post Bubble Chart appeared first on PHP Charts & Graphs.

PHP Pie Chart, Line Chart & Bar Chart

Tue, 08 May 2012 03:44:52 +0000

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

Live demo

The post PHP Pie Chart, Line Chart & Bar Chart appeared first on PHP Charts & Graphs.