Php-mysql Course

JpGraph is a PHP library with classes to create various type of Graph, Charts and Plots: spline curves, radar, line plots, pie, bars with gradients and 3D view, and other types.
It is easy to use, with a good documentation and many examples.

• To download the script, click on this link: Download JpGraph - Version 4.0.2 (14 MB).

JpGraph Installation and Usage

  1. Download the archive with JpGraph classes from the link above.
  2. Copy the jpgraph folder with all its content on your server.
  3. In the php file where you want to use the JpGraph library, include the "jpgraph/jpgraph.php" file, and the other classes according to the graph you want to make.
    - Like in this code:
    //include the jpgraph class, and the class for bar chart
    require 'jpgraph/jpgraph.php';
    require 'jpgraph/jpgraph_bar.php';
    //array with data for chart
    //now you can use the Graph and BarPlot classes to create the graph
    $graph = new Graph(350,250);
    $bplot = new BarPlot($datay);
To output an image with the graph, apply the Stroke() method.
- If you call this method without an argument, the script will output directly the image with the chart set in "graph" object.
- If the function is called with a string with a valid image name (JPG, PNG, GIF), the method will save the image with the graph in the specified filename
- A good way to get started and to learn is to run and study some of the samples.

Here are some examples with JpGraph.

Create a bar graph

- This code will create a bar-chart with gradient color; and display directly the image.
//include needed jpgraph classes
require 'jpgraph/jpgraph.php';
require 'jpgraph/jpgraph_bar.php';

//array with data for chart
// Create the graph
$graph = new Graph(350,250);
// Setup title
$graph->title->Set('Acc bar with gradient');
// Create the first bar
$bplot = new BarPlot($datay1);
// Create the second bar
$bplot2 = new BarPlot($datay2);
// And join them in an accumulated bar
$accbplot = new AccBarPlot([$bplot,$bplot2]);

// Display the graph
It displays this image: JpGraph Bar Gradient

Pie plot with center circle

- Makes a pie plot with a center circle and a text in center.
//include needed jpgraph classes
require 'jpgraph/jpgraph.php';
require 'jpgraph/jpgraph_pie.php';
// Some data
$data =[50,28,25,27,31,20];
//pie graph object
$graph = new PieGraph(320,320,'auto');
// Don't display the border
// Uncomment this line to add a drop shadow to the border
// $graph->SetShadow();

// Setup title
$graph->title->Set('Pie plot with center circle');
$graph->title->SetMargin(8); // Add a little bit more margin from the top
// Create the pie plot
$p1 = new PiePlotC($data);
// Set size of pie
// Label font and color setup
// Setup the title on the center circle
$p1->midtitle->Set("Test mid\nRow 1\nRow 2");
// Set color for mid circle
// Use percentage values in the legends values (This is also the default)
// The label array values may have printf() formatting in them. The argument to the
// form, at string will be the value of the slice (either the percetage or absolute
// depending on what was specified in the SetLabelType() above.
$lbl =["adam\n%.1f%%","bertil\n%.1f%%","johan\n%.1f%%", "peter\n%.1f%%","daniel\n%.1f%%","erik\n%.1f%%"];
// Uncomment this line to remove the borders around the slices
// $p1->ShowBorder(false);
// Add drop shadow to slices
// Explode all slices 15 pixels
// Add plot to pie graph
//send the image to the browser
Results this image: JpGraph Pie center circle

A simple 3D Pie plot

- Creates a 3D pie graph with a predefined theme, and saves the image in a file on server. Then it displays the image.
//include needed jpgraph classes
require 'jpgraph/jpgraph.php';
require 'jpgraph/jpgraph_pie.php';
require 'jpgraph/jpgraph_pie3d.php';

//image filename to save the chart
$fimg ='jpgraph-3d_pie.png';

//set chart data
$data =[40,60,25,34];

$graph = new PieGraph(320,220);

//customize the chart, using a predefined theme
$theme_class= new VividTheme;
$graph->title->Set('A simple 3D Pie plot');

//define data in chart
$p1 = new PiePlot3D($data);
$p1->ExplodeSlice(1); //separate slice 1

//add and save the chart

//if image file created, display it
if(file_exists($fimg)) echo '<img src="'. $fimg .'" />';
else echo 'Unable to create: '. $fimg;
It saves on server a file with this image: JpGraph 3D Pie

Line Plots With Inverted Y-axis

//include needed jpgraph classes
require 'jpgraph/jpgraph.php';
require 'jpgraph/jpgraph_line.php';

//set chart data
$datay =[0,25,12,47,27,27,0];

// Setup the graph
$graph = new Graph(350,250);

//use a predefined theme
$theme_class= new UniversalTheme;


$graph->title->Set('Inverted Y-axis');

// For background to be gradient, setfill is needed first
$graph->SetBackgroundGradient('#FFFFFF', '#00FF7F', GRAD_HOR, BGRAD_PLOT);

//set labels


// Create the line
$p1 = new LinePlot($datay);


//save the graph in a file on server
It saves on server a file with this image: JpGraph line plot

Radar with marks

- We show a radar graph with added plot-marks.
//include needed jpgraph classes
require 'jpgraph/jpgraph.php';
require 'jpgraph/jpgraph_radar.php';

//arrays with labels and data for chart
$data=[18, 40, 70, 90, 42,66];
$graph = new RadarGraph (300,280);

//define title
$graph->title->Set('Radar with marks');
$plot = new RadarPlot($data);

//adds the created plot and send it to browser
Results: JpGraph Radar marks

• Home Page: JpGraph - Driven Charts

Daily Test with Code Example

Which attribute is used in <a> tag for the address of the link?
src href rel
<a href="" title=""></a>
Which CSS property sets the type of the text font?
font-family text-decoration font-size
h2 {
What instruction selects all the <div> tags with class="cls"?
querySelector("div.cls") getElementsByTagName("div") querySelectorAll("div.cls")
var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length;       // number of selected items
Indicate the function that can be used to get the sum of values in an array.
array_sum() array_diff() array_shift()
$arr =[1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum;       // 10
JpGraph - Create Graph, Charts, Plots in PHP

Last accessed pages

  1. Ajax script to Save Canvas Image on Server (5365)
  2. SHA1 Encrypt data in JavaScript (22479)
  3. Clear Canvas Context (6719)
  4. Add, Change, and Remove Attributes with jQuery (42924)
  5. Integer and Float value in Select with PDO from string to numeric (7381)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (811)
  2. SHA256 Encrypt hash in JavaScript (733)
  3. Read Excel file data in PHP - PhpExcelReader (689)
  4. Create simple Website with PHP (688)
  5. PHP Unzipper - Extract Zip, Rar Archives (683)