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

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.

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

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.

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.

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.

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.

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.

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.

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.

12

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

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.

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.

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 replotting interval.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.