Extension:Chartie

MediaWiki extensions manual

Chartie Release status: stable
Implementation	Parser function , Tag
Description	Adds support of line charts at your MediaWiki
Author(s)	Dolfinus
Latest version	1.1 (2024-04-01)
MediaWiki	1.25+
Database changes	No
License	MIT License
Download	Download master snapshot GitHub: project page git repository URL [help ] commit history Note: No localisation updates are provided by translatewiki.net . README
Example	Example of line chart to wiki page
Parameters $wgChartie
Tags ‎<chart>
Hooks used ParserMakeImageParams ParserFirstCallInit ImageBeforeProduceHTML ImageOpenShowImageInlineBefore BeforePageDisplay BeforePageDisplayMobile

Description

MediaWiki extension which allows to add simple line charts to site pages. Based on d3.js, renders image as SVG. There you can see example chart page.

Example

Example of line chart view

noframe

Supported file extensions

CSV

• .csv

Install

• Download and place the file(s) in a directory called Chartie in your extensions/ folder.
• Add the following code at the bottom of your LocalSettings.php file:

  wfLoadExtension( 'Chartie' );
  

• Modify $wgFileExtensions parameter:

$wgFileExtensions = array_merge(
  $wgFileExtensions, array(
      'csv'
  )
);

•  Done – Navigate to Special:Version on your wiki to verify that the extension is successfully installed.

Usage

As Image Handler

[[File:Data.csv|800x350px|legend_title=,x_title=,...]]

As Parser function

{{#chart:
Name;x_value1;y_value1
Name;x_value2;y_value2
...}}

or

{{#chart:Data.csv}}

with parameters:

{{#chart:Data.csv|width}}
{{#chart:Data.csv|width|height}}
...
{{#chart:Data.csv|width|height|legend_title|x_type|x_title|x_unit|x_null|y_type|y_title|y_unit|y_null|delimiter|style|class}}

Instead of uploaded filename you also can use an url for file located in external site.

As Parser tag

<chart data="Data.csv" width="" height="" ... ></chart>

or

<chart width="" height="" ... >Data.csv</chart>

or

<chart width="" height="" ... >
Name;x_value1;y_value1
Name;x_value2;y_value2
</chart>

You also can use url instead of short filename.

Parameters

Name	Description	Default value
width	Chart container width	865
height	Chart container height	360
legend_title	Title of Legend block	Solvents:
x_type	Type of x axis value	temp
x_title	Title for x axis	Temperature
x_unit	Unit for x axis	C
x_null	If true, use 0 as begin of x axis	false
y_type	Type of y axis value	solub
y_title	Title for y axis	Solubility
y_unit	Unit for y axis	g/100g
y_null	If true, use 0 as begin of y axis	false
delimiter	Delimiter for csv file	;
style	Chart container CSS style
class	Chart container HTML class

Width and height can be set to auto, so size of container will be set according to user screen dimensions.

Type of axis defines available units list, that could be converted to each one. If you want to use your own units, set axis type to general. If you want to no use unit convertation at all, set axis type to no. By default, axis titles and units are automatically sets its value, based on type (as =type name and =first unit in list):

Axis types and units

Type	Units
general	a,f,p,n,u,m,c,d, ,K,M,G,T,P (prefixes)
time	s,min,hour,day,month,year
mass	mg,ct,g,oz,lb,kg,ton
length	mm,cm,in,ft,yd,m,km,mile
area	mm2,cm2,in2,dm2,ft2,yd2,m2,a,da,acre,ha,km2,mile2
volume	mm3,cm3,pt,qt,l,gal,br,m3,km3
speed	mps,knot,mph,fps,kph,kps,c
temp	C,K,F,Ra
solub	g/100g,%

Localizations

For now, extension is also translated to Russian, so you can use localized units name (for example, ‘кг’ instead of ‘kg’). Full list of localizations can be found at i18n dir, they are named to langs.

Configure

All default values can be changed in your LocalSettings.php file:

$wgChartie["width"]  = 865;
$wgChartie["height"] = 360;
...
$wgChartie["class"]  = 'someclass';

Controls

Action	Controls
Mouse over line, touch line	Show tooltip with extrapolated value
Mouse over line dots, touch dot	Show tooltip with exact value
Click on axis title	Show values from min / from zero
Click on axis unit	Convert values to new unit
Double click at line	Hide specified line
Click or touch legend item	Hide/show specified line
Click on legend title	Hide/show all lines