JpGraph - Create Graph, Charts, Plots in PHP

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
   $datay=[13,8,19,7,17,6];
   
   //now you can use the Graph and BarPlot classes to create the graph
   $graph = new Graph(350,250);
   $bplot = new BarPlot($datay);
   //etc..
   

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.

$graph->Stroke();

- 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

$graph->Stroke('dir/image.png');

- 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
$datay1=[13,8,19,7,17,6];
$datay2=[4,5,2,7,5,25];
 
// Create the graph
$graph = new Graph(350,250);
$graph->SetScale('textlin');
$graph->SetMarginColor('white');
 
// Setup title
$graph->title->Set('Acc bar with gradient');
 
// Create the first bar
$bplot = new BarPlot($datay1);
$bplot->SetFillGradient('AntiqueWhite2','AntiqueWhite4:0.8',GRAD_VERT);
$bplot->SetColor('darkred');
 
// Create the second bar
$bplot2 = new BarPlot($datay2);
$bplot2->SetFillGradient('olivedrab1','olivedrab4',GRAD_VERT);
$bplot2->SetColor('darkgreen');
 
// And join them in an accumulated bar
$accbplot = new AccBarPlot([$bplot,$bplot2]);
$graph->Add($accbplot);

// Display the graph
$graph->Stroke();

It displays this image:

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
$graph->SetFrame(false);
 
// 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->SetFont(FF_ARIAL,FS_BOLD,18);
$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
$p1->SetSize(0.35);
 
// Label font and color setup
$p1->value->SetFont(FF_ARIAL,FS_BOLD,12);
$p1->value->SetColor('white');
 
$p1->value->Show();
 
// Setup the title on the center circle
$p1->midtitle->Set("Test mid\nRow 1\nRow 2");
$p1->midtitle->SetFont(FF_ARIAL,FS_NORMAL,14);
 
// Set color for mid circle
$p1->SetMidColor('yellow');
 
// Use percentage values in the legends values (This is also the default)
$p1->SetLabelType(PIE_VALUE_PER);
 
// 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%%"];
$p1->SetLabels($lbl);
 
// Uncomment this line to remove the borders around the slices
// $p1->ShowBorder(false);
 
// Add drop shadow to slices
$p1->SetShadow();
 
// Explode all slices 15 pixels
$p1->ExplodeAll(15);
 
// Add plot to pie graph
$graph->Add($p1);
 
//send the image to the browser
$graph->Stroke();

Results this image:

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->SetTheme($theme_class);
$graph->SetShadow();
 
$graph->title->Set('A simple 3D Pie plot');
$graph->title->SetFont(FF_FONT1,FS_BOLD);

//define data in chart
$p1 = new PiePlot3D($data);
$p1->ExplodeSlice(1); //separate slice 1
$p1->SetCenter(0.5);
$p1->SetLegends(['May','June','July','Aug']);
$graph->legend->Pos(.088,0.9);

//add and save the chart
$graph->Add($p1);
$graph->Stroke($fimg);

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

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);
$graph->SetScale('intlin',0,$aYMax=50);

//use a predefined theme
$theme_class= new UniversalTheme;
$graph->SetTheme($theme_class);

$graph->SetMargin(40,40,50,40);

$graph->title->Set('Inverted Y-axis');
$graph->SetBox(false);
$graph->yaxis->HideLine(false);
$graph->yaxis->HideTicks(false,false);

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

//set labels
$graph->xaxis->SetTickLabels(['G','F','E','D','C','B','A']);
$graph->xaxis->SetLabelMargin(20);
$graph->yaxis->SetLabelMargin(20);

$graph->SetAxisStyle(AXSTYLE_BOXOUT);
$graph->img->SetAngle(180); 

// Create the line
$p1 = new LinePlot($datay);
$graph->Add($p1);

$p1->SetFillGradient('#FFFFFF','#F0F8FF');
$p1->SetColor('#aadddd');

//save the graph in a file on server
$graph->Stroke('jpgraph-line_plot_inverted_y.png');

It saves on server a file with this image:

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
$titles=['Planning','Quality','Time','RR','CR','DR'];
$data=[18, 40, 70, 90, 42,66];
 
$graph = new RadarGraph (300,280);

//define title
$graph->title->Set('Radar with marks');
$graph->title->SetFont(FF_VERDANA,FS_NORMAL,12);
 
$graph->SetTitles($titles);
$graph->SetCenter(0.5,0.55);
$graph->HideTickMarks();
$graph->SetColor('lightgreen@0.7');
$graph->axis->SetColor('darkgray');
$graph->grid->SetColor('darkgray');
$graph->grid->Show();
 
$graph->axis->title->SetFont(FF_ARIAL,FS_NORMAL,12);
$graph->axis->title->SetMargin(5);
$graph->SetGridDepth(DEPTH_BACK);
$graph->SetSize(0.6);
 
$plot = new RadarPlot($data);
$plot->SetColor('red@0.2');
$plot->SetLineWeight(1);
$plot->SetFillColor('red@0.7');
 
$plot->mark->SetType(MARK_IMG_SBALL,'red');

//adds the created plot and send it to browser
$graph->Add($plot);
$graph->Stroke();

Results:

• Home Page: JpGraph - Driven Charts

First line ...<br>
Other line...

#id {
  letter-spacing: 2px;
}

var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);

echo "Address URL: http://CoursesWeb.net";