Jpgraph introduction-powerful php Image Library

Source: http://listdo.bokee.com/viewdiary.12328652.html

I. What is jpgraph?
In the past, when using PHP to plot images, you must master complex abstract drawing functions, or use some classes of bar chart and pie chart downloaded from the Internet. There is no unified chart class for quick chart development.

Now we have a new option: jpgraph. Class Libraries dedicated to providing charts. It makes plotting a very simple thing, you just needDatabaseTake out the relevant data, define the title and chart type, and then hand over the data to the jpgraph. You only need to master a few built-in jpgraph functions (refer to the example of jpgraph ), you can draw a Very dazzling chart!

I. jpgraph installation method:
1. download the latest version at http://www.aditus.nu/jpgraph.
2. Make sure that your PHP version is 4.04 (preferably 4.1.1) and supports the GD library. Make sure that the GD library runs properly. You can run phpinfo () to check whether the GD library information exists. At the same time, the version of the GD library must be 2.0, instead of 1.0.
3. decompress the downloaded jpgraph package to any folder.
4. Set jpgraph. php (main configuration file of jpgraph ). Set the cache folder and TTF folder of jpgraph.
Rows 35 and 38 respectively
35 // define ("cache_dir", "/tmp/jpgraph_cache /");
38 // define ("ttf_dir", "/usr/x11r6/lib/X11/fonts/TrueType /");
For Linux:
Define ("cache_dir", "/tmp/jpgraph_cache /");'
Define ("ttf_dir", "/usr/x11r6/lib/X11/fonts/TrueType /");
For Windows:
Define ("cache_dir", "C:/Apache/htdocs/jpgraph_cache /");'
Define ("ttf_dir", "C:/Windows/fonts ");
Note:
(1) The cache (cache) folder path can be customized, while the TTF (font) folder must be % System %/fonts.
(2) Make sure that PHP has the write permission on the cache folder.
5. After completing the preceding settings, you can use jpgraph. Copy the jpgraph example to the htdocs folder and run it. Haha, more than 200 examples, including various charts, are enough to learn for a while.

In practice, I have encountered some problems, such as incorrect font. I am still studying ......

Read data from the database to the jpgraph chart
1. Copy example16.2.php files in the./src/examples directory, jpgraph_bar.php files in the./src directory, jpgraph_line.php files, jpgraph_plotmark.inc, and jpgraph. php files to the same directory.
2. Create a database jpg and a database table test.
Create two fields:
ID (primary key): int
Number: int
And add some data
3. Modify example16.2.php
Modified code
<? PHP
Include ("jpgraph. php ");
Include ("jpgraph_line.php ");
Include ("jpgraph_bar.php ");

$ Connect = mysql_connect ("localhost", "root ","");
Mysql_select_db ("jpg", $ Connect );
$ Query = mysql_query ("select * from test", $ Connect );
$ I = 0;
While ($ array = mysql_fetch_array ($ query )){
$ L2datay [$ I] = $ array ["Number"];
$ I ++;
}
Mysql_close ($ Connect );

// Create the graph.
$ Graph = New Graph (400,200, "Auto ");
$ Graph-> setscale ("textlin ");

$ Graph-> IMG-> setmargin (40,130 );
$ Graph-> setshadow ();

// Create the bar plot
$ Bplot = new barplot ($ l2datay );
$ Bplot-> setfillcolor ("orange ");
$ Bplot-> setlegend ("result ");

// Add the plots to t' he Graph

$ Graph-> Add ($ bplot );

$ Graph-> title-> set ("adding a line plot to a bar graph V1 ");
$ Graph-> xaxis-> title-> set ("X-title ");
$ Graph-> yaxis-> title-> set ("Y-title ");

$ Graph-> title-> setfont (ff_font1, fs_bold );
$ Graph-> yaxis-> title-> setfont (ff_font1, fs_bold );
$ Graph-> xaxis-> title-> setfont (ff_font1, fs_bold );

// $ Graph-> xaxis-> setticklabels ($ datax );
// $ Graph-> xaxis-> settexttickinterval (2 );

// Display the Graph
$ Graph-> stroke ();
?>
4. Refresh the page to view the result.

 

 

[Additional Information]

Http://www.aditus.nu/jpgraph/

Let's see what jpgraph can achieve:
Source: http://www.aditus.nu/jpgraph/features_gallery.php

 

Line plotsline Plots can be easily adapted to almost any needs, it is possible to adjust colors, transparency levels, line weight, line type (solid, dotted, dashed etc), backgrounds, scale, axis positions and formatting.

 

Filled line plotsline Pots can also be filled both with a solid color, a semi transparent color or a gradient fill (both horizontal and vertical ). the fill can also be one or several vertical band between two X-values.

 

Step line plotsa variant of plain line plot is the stepped line plot where each data point is connected by two 90 degrees link as is already strated below.

 

Line plots with markersdata values for line plots, scatter plots, radar plots etc. can be emphasized with either one of the multiple builtin markers (both plain and 3d) or if that is not enough it is also possible to use an arbitrary image as marker. when using an image as a marker It is also easy to set a specific scaling factor for the image to get a proper size without first having to manipulate the image in an external drawing program. the library will also cache any scaled image to reduce plot time and the need to do re-scaling for every data position.

 

Line plots with inverted Y-axis

As an example of usage of the scale formatting callback routines it is possible to further adjust the scaling in (almost) any way that is desired. in the example below we have used a small "trick" to invert the y-axis to show a dive profile curve.

Line plots with values

It is of course possible to show the value of each data point for both line, bar, pie plots etc. no matter what type of plot is used the interface to the formatting of the values are identical, formatting can be done either automatically, by specifying a formatting string (in the style of "printf">, or by using the more advanced method of specifying a callback formatting function that will be called upon for each data point to create the desired display value.

Standard bar plots

Bar plots is also well catered. size of bars, fill colors, fill gradients, fill patterns etc are all writable settings. it is also possible to use both accumulated, group or just plain bar graphs. for enhanced visual appearance it is also possible to use alpha blending and backgrounds. in the second image below a callback function for the formatting of the Y-axis values is used to format the label as a number with thousand separator.

 

Horizontal Bar plots

Horizontal bar graphs has also all the same formatting as standard vertical bars. in the example below we have also specified strated how it is possible to adjust the position of the value that can be displayed for each bar.

Adding backgrounds and patterns to bar plots

In the examples below we show two more formatting possibilities. the first example shows the addition of one of the pre-defined country flags as a background and the second example shows the addition of a background pattern between 2 Y-values.

Combined line and bar plotsas a final example of bar plots we show some examples on how it is possible to combine bar and line plots. when adding a line plot to a bar graph it is possible to choose which point on the bar wocould correspond to the data point for the line (left, right or center position ). in the examples below we have chosen to align the line with the center of the bars. in the last graph we have also added a vertical pattern to show how it is possible to emphasize a participant interval.

 

Pie plots

For pie plots all the ordinary formatting (colors, size etc) is of course available. in addition it is also possible to specify details such as, angle for first slice, the use of themes to automatically select a color set, position of pie, explode one or several slices. pie plots also use hare-niemer integer compensation to make sure that all displayed values on slices always add up to 100%.

3D pie plotsa variant of pie plot is to display the pie in a 3D perspective. this has all the formatting of the 2D pie but in addition it is possible to define the inclination of the pie to adjust the perspective.

 

Exploding pie plotsas a final example we show how to emphasize certain values by exploding one or several pie slices. This formatting is available for both 2-and 3D pie plots.

 

Ring plotsa variant of the pie plot is the ring plot. as can be expected this has all the formatting of the ordinary pie but in addition it is possible to format a ring in the middle. the center ring can also display an arbitrary text and have a user specified color.

 

Scatter plots

Scatter plots is very similar to line plots. they are used to display a number of data points that are defined by it's X-and y-value. each data point can be attached strated by one of the available plot-marks.

Linked scatter plotsa variant of the scatter plot is the linked scatter plot. by enable the links a line will be drawn that connects the data points in order. as usual color, weight and style of the lines can be adjusted. in the right graph we have also got strated one of the pre-defined style of axis positioning/formatting.

 

Combined scatter and line plots

By combining a scatter plot with a line plot it is possible to for example using strate linear regression.

Impulse plots

Impulse plots is in a way similar to scatter and line plots. it is often used in signal processing to sort strate a sampled analog signal which consists of a weighted pulse train. in the example below we show a typical damped impulse response.

Field plots

Field plots is a scatter plot with a twist. by associating a callback function to plot it is possible to easily create images of various fields (e.g. for example magnetic, motion of air or fluids ).

Spline Curves

The Library also contains helper function to create smooth data from one or several control points,. k. A Spline plots. by default the library creates natural splines (2: Nd derivate = 0 ).

Geographic Map plots

By combining a background image (that displays a map) with a scatter plot using plot-marks it is possible to create dynamic maps to define strate various information. in the images below we have used the built-in "pushpin" plot-marks for a scatter plot.

 

Stock plotsanother type of plots is the so-called stock plots. the most common use of these graphs is to display values from the stock market. each data point can display 4 values which are normally take as the open-close-high-low values of various stocks.

 

Polar plots (180 degrees)

Polar plots is used to display a magn1_value in a specific ction. the polar plots have two variants; a full 360-degree plot and a half 180-degree plot. the magnbench can be displayed in either linear or logarithmic scale. each polar graph can also have one or several plots.

 

Polar plots (360 degrees)

Polar Plots can also have plot-marks which are shown in the second example below. the formatting of the axis can also be adjusted for how the labels and tick marks are displayed. some possible variants are also shown in the images below.

Error plotserror plot is primarily used to display an error interval for each data point. Usually a line plots is combined with an error plot to show the Errors for each data point.

 

Balloon plots

Balloon plot is basically a variant of the scatter plot where a call back function is used to give the "third dimension" of the plot, I. e. the size and color of each balloon.

Radar plotsradar plots are often used to visualize how a number of measurements compares with goals. the human capabilities of detecting unregular vs regular shapes makes this type of plot a very powerful way to modify strate SS for a number of parameters.

 

Gantt chartsthe Gantt chart is standard way to construct strate project plans or any activities that is layed out in time. the Gantt charts in jpgraph are extremely flexible and can easily be used to create very complex validation of timed activities.

 

Canvas plots

This type is not really a standard plot. it gives a convenient way to create arbitrary shapes on a canvas. it will allow the usage of easily created scales and access to all the convenience methods and functions available in jpgraph.

 

Spam challenge Images

This is used to create images of what is very hard to read letters and digits that can be used to prohibit automatic signup to mail-lists and online communities.

Additional plots available in the pro-versionmore information about these types of plots are available in the information for the pro-version of jpgraph. the additional graph types available are windrose plots, odometer plots and barcodes (both linear and 2-dimendes .)