Archive by Author

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

Download phpChart

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!

Logarithmic Axis using LogAxisRenderer

logarithm_chart

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

Live demo

Curved Line

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

Live demo!

Dots Only Chart with Trend Line

phpCharr dot chart

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

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

Live demo

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

jsondata.txt

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

Live demo

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

Live demo

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

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

Live demo

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

Live demo

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

Live demo

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

Live demo

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

Live demo

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

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

Live demo

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 plugincursor“.

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

Live demo

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

phpChart Online Documentation

Online Documentation

 
phpChart does NOT required GD or any other third party, server-side graph library or extension. It is strongly recommended to read the Programming Quick Tips first before proceeding to the below online documentation.

online technical documentation

Programming Quick Tips

 

  • It is strongly recommended to leave doctype declaration <!DOCTYPE HTML> right before tag <HTML> to force browser into HTML5 Standards mode.
  • Each PHP chart must have an unique id associating to corresponding DIV as the draw area. It’s set as the 2nd parameter in phpChart constructor.
  • Look and feel, and most of the cosmetics can also be controlled using CSS .e.g .jqplot-point-label
  • Most of functions parameters are PHP array.
  • Except numbers, all properites should be surrounded by double or single quotes.
  • Plugins without “Renderer” suffix in their names should be loaded using add_plugins() method. e.g. add_plugins(array(“highlighter”, “cursor”));
  • Different renderer has different renderer options(rendererOptions). Each plugin may add its own set of rendererOptions attributes.
  • phpChart automatically includes any required plugin files only once on a single page regardless how many times it is used. This prevents javascript conflicts.
  • When loading renderer, use plugin:: prefix to indicate a plugin used.
  • Custom javascript:
    • When passing user defined custom javascript function to phpChart, use js:: prefix.
    • Custom js should be added before ending <body> tag between <script> tags; or can be added through phpChart add_custom_js() method(less convenient).
    • All js files should be named in lower case so they works on both *nix and Windows system
  • The default label renderer creates labels in DIV tags, which allows full CSS control over every label.
  • Use CanvasTextRenderers to replace the default label renderer to draw labels onto canvas elements to support advanced featrues such as rotated text. However, it loses CSS support.
  • Tick options(tickOptions) are only used by Axes object. A tick represents a data point.
  • Some renderer are designed to represent 3D dimensional data such as Bubble Chart.
  • for Date Axes render plugin, it’s recommended to specify both date and time.
  • Cursor plugin also enables plot zooming functionality
  • Built-in data renderer(dataRenderer) allows data from external JSON source such as retrieving from a external URL through AJAX.
  • Some plugins can trigger events using bind_js() function. e.g. http://www.jqplot.com/docs/files/plugins/jqplot-donutRenderer-js.html
    • jqplotDataMouseOver – triggered when user mouseing over a slice.
    • jqplotDataHighlight – triggered the first time user mouses over a slice, if highlighting is enabled.
    • jqplotDataUnhighlight – triggered when a user moves the mouse out of a highlighted slice.
    • jqplotDataClick – triggered when the user clicks on a slice.
    • jqplotDataRightClick – tiggered when the user right clicks on a slice if the “captureRightClick” option is set to true on the plot.
  • canvasTextRenderer is the only renderer that has no renderer options but ends with ‘Renderer’ suffix

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

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)

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.

Live demo

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

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

Live demo

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

Live demo

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

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

Live demo

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

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

Live demo

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

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

Live demo

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.

Live demo

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

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

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

Live demo

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

Live demo

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>

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

Top

Clicky