Extension:Jpgraphmw

From MediaWiki.org
Jump to navigation Jump to search
MediaWiki extensions manual
Crystal Clear action run.svg
JpgraphMW
Release status: unmaintained
Bench result.png
Implementation Tag
Description provide tags for easily drawing charts using jpgraph library
Author(s) (Yannig Perrétalk)
License GNU General Public License 3.0 or later
Download
Tags
jpline(s), jpbar(s), jppie(s)
Translate the Jpgraphmw extension if it is available at translatewiki.net
Check usage and version matrix.

The JpgraphMW extension allows 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[edit]

Simple multiline chart[edit]

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:

Bench result.png

Multiline stacked chart with time as x value[edit]

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 :

Cpu usr sys.png

Multitype chart[edit]

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 :

Bar-area-line-chart.png

Simple 3d pie chart[edit]

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>

Simple 3d pie.png

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>

3d-pie-or-carbone-acier.png

Download instructions[edit]

Put the code into your extensions directory ($IP/extensions/Jpgraphmw/Jpgraphmw.php). You will also need to download a fresh copy of jpgraph library [1]. 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[edit]

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[edit]

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");