Extension:Jpgraphmw

MediaWiki extensions manual - list

JpgraphMW Release status: beta
Implementation	Tag
Description	provide tags for easily drawing charts using jpgraph library
License	GPL v3
Download	Project page Subversion [Help] Browse source code View code changes
Tags jpline(s), jpbar(s), jppie(s)
Check usage (experimental)

What can this extension do?

JpgraphMW is a mediawiki-extension for visualizing data in wiki pages. To do so it provides a couple of additional tags for embedding different chart-types. Possible charts are

• lines
• bars
• and pie-charts

The charts are drawn by using the Jpgraph Chart API.

All data for visualization is provided in CSV-style.

Usage

Simple multiline chart

Following code ...

<jplines title="Bench result" size="900x300"
         colors=ABCDEF,7F0000,007F00,00007F,7F007F,7F7F00,7F7F7F,7FFFFF
         scale=xy legend xlabel ylabel margin=60,10,0,0>
 
Time (s),Trans./s,Avg (ms)
0,8.5,118
0,225.1,256
7.9,258.3,652
17.7,328.9,556
27.7,464.5,410
37.7,525.6,352
47.7,526.7,357
57.7,578.0,319
67.8,481.3,384
77.7,600.3,319
87.7,655.8,294
97.7,613.7,308
107.7,641.1,299
117.7,626.2,273
127.7,607.8,316
137.7,562.1,341
147.7,672.0,280
157.7,677.6,277
167.7,566.3,323
177.7,688.4,276
187.7,432.9,413
197.7,521.3,355
207.7,693.1,232
217.7,591.0,76
</jplines>

... will produce the graphic bellow:

Multiline stacked chart with time as x value

Following exemple ...

<jplines title='CPU' size=900x250
         colors=ABCDEF,7F0000,007F00,00007F,7F007F,7F7F00,7F7F7F,7FFFFF
         scale=datlin legend xlabel ylabel margin=60,10,0,60 stacked
         max=100 rotatexlegend=35 disable=1>
 
Temps,Idle,Sys,User
14:05:43,76,7,17
14:05:48,45,33,22
14:05:53,28,46,26
14:05:58,34,32,34
14:06:03,25,38,37
14:06:08,1,36,64
14:06:13,0,37,63
14:06:18,0,36,64
14:06:23,0,31,69
14:06:28,0,33,67
14:06:33,0,34,66
14:06:38,0,32,68
14:06:43,1,35,64
14:06:48,3,37,60
14:06:53,0,41,59
14:06:58,0,47,53
14:07:03,0,44,56
14:07:08,47,14,39
14:07:13,83,6,11
14:07:18,70,12,18
14:07:23,60,8,32
14:07:28,64,11,25
14:07:33,58,14,28
14:07:38,64,12,25
14:07:43,1,30,69
14:07:48,2,34,64
14:07:53,0,39,61
14:07:58,0,40,60
14:08:03,0,38,62
14:08:08,1,29,70
14:08:13,4,32,64
14:08:18,6,35,59
14:08:23,0,31,69
14:08:28,1,31,68
14:08:33,0,31,69
14:08:38,0,32,68
14:08:43,0,28,72
14:08:48,0,29,71
14:08:53,0,39,61
14:08:58,0,41,59
14:09:03,0,34,66
14:09:08,0,31,69
14:09:13,0,31,69
14:09:18,0,22,78
14:09:23,0,30,70
14:09:28,0,30,70
14:09:33,17,18,65
14:09:38,9,28,63
14:09:43,22,20,58
14:09:48,0,34,66
14:09:53,0,42,58
14:09:58,0,38,62
14:10:03,0,37,63
14:10:08,0,32,68
14:10:13,0,32,68
14:10:18,0,31,69
14:10:23,0,28,72
14:10:28,14,23,63
14:10:33,77,9,14
14:10:38,81,5,14
14:10:43,74,9,17
14:10:48,66,10,24
14:10:53,57,22,20
14:10:58,82,5,13
14:11:03,71,14,15
14:11:08,83,5,12
14:11:13,72,4,23
14:11:18,67,9,24
14:11:23,68,6,26
14:11:28,72,4,23
14:11:33,82,12,7
14:11:38,91,7,2
14:11:43,88,6,6
14:11:48,81,7,12
14:11:53,42,28,30
14:11:58,41,18,41
14:12:03,18,30,52
14:12:08,48,6,45
14:12:13,64,6,30
14:12:18,66,7,27
14:12:23,76,4,20
14:12:28,56,5,38
14:12:33,60,8,31
14:12:38,71,6,23
14:12:43,72,6,22
14:12:48,65,7,29
14:12:53,46,24,30
14:12:58,54,12,35
14:13:03,62,14,24
</jplines>

... will produce the following graphic :

Multitype chart

Here is an exemple on the same graphic of bar, area and line graphic :

<jpline title="Test multitype" size=800x300 min=0 mark=,Utriangle,Utriangle,Star,Filledcircle scale=linlin max=100 rotatexlegend=30 margin=40,40,60,60 type=,bar,area,line,line legendposition=0.01,0.4 disable=5>
temps,us,sy,id,wa
3,29,14,56,1
4,23,16,60,1
6,28,15,57,1
8,46,8,45,0
10,5,5,90,0
12,3,3,93,1
14,4,4,92,1
17,20,8,72,0
18,40,4,56,0
20,12,13,75,0
22,19,17,64,0
24,35,28,37,0
27,32,23,46,0
29,44,8,48,0
31,5,5,90,0
33,24,15,61,0
35,16,11,72,0
37,3,4,93,0
39,40,3,57,0
41,4,3,92,1
43,2,4,94,0
</jpline>

And here is the result :

Simple 3d pie chart

Here's another exemple:

<jppie 3d title='Browser usage in 2009' size=500x400>
IE7,15.3
IE6,12.1
IE8,12.2
Firefox,46.6
Chrome,7.1
Safari,3.6
Opera,2.2
</jppie>

And here, another exemple of 3d pie (with a position for the legend and exploded pieces):

<jppie title="an apple pie" 3d size=500x350 rotatexlegend=10 legendposition=0.01,0.01 explode=20,0,40>
or,15
carbone,38
acier,47
</jppie>

Download instructions

This project is housed at google code web site : [1]. To install this extension, retrieve jpgraphmw.php [2] and put it into your extensions directory ($IP/extensions/ExtensionName/ExtensionName.php). You will also need to download a fresh copy of jpgraph library [3]. Create a sub directory named jpgraph in extensions directory and extract the contains into it :

root@host:/var/www/wiki/extensions# mkdir jpgraph
root@host:/var/www/wiki/extensions# cd jpgraph/
root@host:/var/www/wiki/extensions/jpgraph# tar xfvj /path/to/your/tar/jpgraph-3.0.5.tar.bz2

nb: If you use a fresh version of Linux, you may experience ttf problem concerning ttf path. To fix this issue, edit jpg-config.inc.php in jpgraph directory and add the following line :

[...]
//------------------------------------------------------------------------
// define('CACHE_DIR','/tmp/jpgraph_cache/');
// define('TTF_DIR','/usr/share/fonts/truetype/');
// define('MBTTF_DIR','/usr/share/fonts/truetype/');
define('TTF_DIR','/usr/share/fonts/truetype/ttf-dejavu/');
[...]

Check that the ttf directory is correct :

root@host:/var/www/wiki/extensions/jpgraph/src# grep TTF_DIR jpg-config.inc.php
// TTF_DIR:
//   TTF_DIR   /usr/share/fonts/truetype/
//   MBTTF_DIR /usr/share/fonts/truetype/
//   TTF_DIR   $SERVER_SYSTEMROOT/fonts/
//   MBTTF_DIR $SERVER_SYSTEMROOT/fonts/
// define('TTF_DIR','/usr/share/fonts/truetype/');
// define('MBTTF_DIR','/usr/share/fonts/truetype/');
define('TTF_DIR','/usr/share/fonts/truetype/ttf-dejavu/');

Installation

To install this extension, add the following to LocalSettings.php:

#add configuration parameters here
#setup user rights here
require_once("$IP/extensions/jpgraphmw.php");

Configuration parameters

Depending to your php installation, you may want to disable part of the possibility of jpgraph like antialias and ttf rendering. You can do that by setting values for $jpgraphWikiDefaults or $jpgraph(Lines|Bar|Pie)Defaults variables :

$jpgraphWikiDefaults = Array ("size" => "200x120", "antialias" => "no", "usettf" => "no", "font" => "DV_SansSerif");

See also

• jpgraph : [4]