Warning: jsMath requires JavaScript to process the mathematics on this page.
If your browser supports JavaScript, be sure it is enabled.
View source

From QED

for JpGraph
Jump to: navigation, search
You can view and copy the source of this page:
[http://www.aditus.nu/jpgraph/ '''JpGraph'''] is a PHP library that can be used to generate a wide variety of high-quality interactive 2D graphs in PNG format with some 3D effects. PHP also serves as the language for graph construction.

Some examples are shown below. See [[Help:JpGraph]] for help.

==Mouse-Sensitive Graphs==
The following graph shows that a mouse-sensitive graph can be drawn programmatically. There are four hot spots.

To see the JpGraph instructions that generated the graph, use the "view" tab.

<php>
# include("jpgraph/Examples/ganttcsimex01.php");

// Gantt example to create CSIM

include_once("jpgraph/jpgraph.php");
include_once("jpgraph/jpgraph_gantt.php");

$bar1 = new GanttBar(0,"Activity 1","2001-12-21","2002-01-20");
$bar1->SetCSIMTarget('http://en.wikipedia.org/wiki/Tufte','wikipedia:Tufte');
$bar1->title->SetCSIMTarget('http://en.wikipedia.org/wiki/Jpgraph','wikipedia:Jpgraph');
$bar2 = new GanttBar(1,"Activity 2","2002-01-03","2002-01-25");
$bar2->SetCSIMTarget('http://en.wikipedia.org/wiki/Gantt','wikipedia:Gantt');
$bar2->title->SetCSIMTarget('http://en.wikipedia.org/wiki/Chart','wikipedia:Chart');

$graph = new GanttGraph(500);
$graph->title->Set("Example with image map");
$graph->ShowHeaders(GANTT_HYEAR | GANTT_HMONTH | GANTT_HDAY | GANTT_HWEEK);
$graph->scale->week->SetStyle(WEEKSTYLE_FIRSTDAY);
$graph->scale->week->SetFont(FF_FONT1);

$graph->Add(array($bar1,$bar2));

// And stroke (true means use fileStroke)

$graph->imgStrokeCSIM("");

</php>
 
==Graph Galleries==

The remainder of this page shows that multiple JpGraph images can be included on a single page.
A more comprehensive survey of available graph types may be found on the [http://www.aditus.nu/jpgraph/features.php '''JpGraph''' features] page.

<php>

// Example of a stock chart
include_once("jpgraph/jpgraph.php");
include_once("jpgraph/jpgraph_stock.php");

// Data must be in the format : open,close,min,max,median
$datay = array(
    34,42,27,45,36,
    55,25,14,59,40,
    15,40,12,47,23,
    62,38,25,65,57,
    38,49,32,64,45);

// Setup a simple graph
$graph = new Graph(300,200);
$graph->SetScale("textlin");
$graph->SetMarginColor('lightblue');
$graph->title->Set('Box Stock chart example');

// Create a new stock plot
$p1 = new BoxPlot($datay);

// Width of the bars (in pixels)
$p1->SetWidth(9);

// Uncomment the following line to hide the horizontal end lines
// $p1->HideEndLines();

// Add the plot to the graph and send it back to the browser
$graph->Add($p1);
# $graph->Stroke("/tmp/jpgraph.png");
# echo '<img src="/jpgraph.png" />';

$graph->imgStroke();

###################################################################################

include_once("jpgraph/jpgraph.php");
include_once("jpgraph/jpgraph_scatter.php");

DEFINE('WORLDMAP','jpgraph/Examples/worldmap1.jpg');

function markCallback($y,$x) {
    // Return array width
    // width,color,fill color, marker filename, imgscale
    // any value can be false, in that case the default value will
    // be used.
    // We only make one pushpin another color
    if( $x == 54 ) 
    return array(false,false,false,'red',0.8);
    else
    return array(false,false,false,'green',0.8);
}

// Data arrays
$datax = array(10,20,30,40,54,60,70,80);
$datay = array(12,23,65,18,84,28,86,44);

// Setup the graph
$graph = new Graph(400,270);

// We add a small 1pixel left,right,bottom margin so the plot area
// doesn't cover the frame around the graph.
$graph->img->SetMargin(1,1,1,1);
$graph->SetScale('linlin',0,100,0,100);

// We don't want any axis to be shown
$graph->xaxis->Hide();
$graph->yaxis->Hide();

// Use a worldmap as the background and let it fill the plot area
$graph->SetBackgroundImage(WORLDMAP,BGIMG_FILLPLOT);

// Setup a nice title with a striped bevel background
$graph->title->Set("Pushpin graph");
$graph->title->SetFont(FF_ARIAL,FS_BOLD,16);
$graph->title->SetColor('white');
$graph->SetTitleBackground('darkgreen',TITLEBKG_STYLE1,TITLEBKG_FRAME_BEVEL);
$graph->SetTitleBackgroundFillStyle(TITLEBKG_FILLSTYLE_HSTRIPED,'blue','darkgreen');

// Finally create the scatterplot
$sp = new ScatterPlot($datay,$datax);

// We want the markers to be an image
$sp->mark->SetType(MARK_IMG_PUSHPIN,'blue',0.6);

// Install the Y-X callback for the markers
$sp->mark->SetCallbackYX('markCallback');

// ...  and add it to the graph
$graph->Add($sp);    

// .. and output to browser
$graph->imgStroke('align="left" ');

###################################################################################

// Example on how to treat and format timestamp as human readable labels
require_once("jpgraph/jpgraph.php");
require_once("jpgraph/jpgraph_line.php");

// Number of "fake" data points
DEFINE('NDATAPOINTS',500);

// Assume data points are sample every 10th second
DEFINE('SAMPLERATE',10); 

// Callback formatting function for the X-scale to convert timestamps
// to hour and minutes.
function TimeCallback($aVal) {
    return Date('H:i', $aVal);
}

// Get start time
$start = time();
// Set the start time to be on the closest minute just before the "start" timestamp
$adjstart = floor($start / 60);

// Create a data set in range (20,100) and X-positions
// We also apply a simple low pass filter on the data to make it less
// random and a little smoother
$data = array();
$xdata = array();
$data[0] = rand(20,100);
$xdata[0] = $adjstart;
for( $i=1; $i < NDATAPOINTS; ++$i ) {
    $data[$i] = rand(20,100)*0.2 + $data[$i-1]*0.8;
    $xdata[$i] = $adjstart + $i * SAMPLERATE;
}

// Assume that the data points represents data that is sampled every 10s
// when determing the end value on the scale. We also add some extra
// length to end on an even label tick.
$adjend = $adjstart  + (NDATAPOINTS+10)*10;

$graph = new Graph(500,250);
$graph->SetMargin(40,20,30,50);

// Now specify the X-scale explicit but let the Y-scale be auto-scaled
$graph->SetScale("intlin",0,0,$adjstart,$adjend);
$graph->title->Set("Example on TimeStamp Callback");

// Setup the callback and adjust the angle of the labels
$graph->xaxis->SetLabelFormatCallback('TimeCallback');
$graph->xaxis->SetLabelAngle(90);

// Set the labels every 5min (i.e. 300seconds) and minor ticks every minute
$graph->xaxis->scale->ticks->Set(300,60);

$line = new LinePlot($data,$xdata);
$line->SetColor('lightblue');
$graph->Add($line);

$graph->imgStroke('align="left" ');
</php>

{{Clr}}
==See also==
* [[Help:Gnuplot]]
Templates used on this page: