Release status: beta
|Description||A wizard for generating tables and graphs|
|License||No license specified|
Translate the VizExpress extension if it is available at translatewiki.net
|Check usage and version matrix; code metrics|
Introduction[edit | edit source]
Tables and Graphs are effective visualizations for presenting data. However, generating them in wiki pages requires time, effort, and complicated syntax. This becomes more problematic if you have large sets of data, or if you want more customized visualizations. Hence, we decided to make vizExpress.
vizExpress is a Mediawiki extensions that allows users to create highly customized tables and graphs quickly and easily. vizExpress features a simple, excel-like wizard that can be accessed through a button in the editing toolbar. When you start the vizExpress wizard, you can:
- Provide data by typing it, copying and pasting it from another source, or by browsing to an existing Excel or CSV file.
- Choose one of eight graph types.
- Choose one of seven pre-defined color schemes, or simply make your own scheme.
- Apply further options such as titles, graph size, legend position, etc..
- Preview the graph before inserting it.
Once you have the graph in your wiki page, you can:
- Allow users to download the graph data as a csv file.
- Edit the graph easily by restarting the wizard again.
You can visit this page to see examples of graphs created by vizExpress.
Installation[edit | edit source]
- Download vizExpress and extract it to *your MediaWiki installation directory*/extensions.
- Add the following to LocalSettings.php:
Compatibility[edit | edit source]
vizExpress was tested on:
- Firefox 3.5
- Internet Explorer 8
- Safari 4
- Opera 9
- Google Chrome 2
API[edit | edit source]
- After providing data and selecting options, vizExpress wizard generates a tag of the following form:
<vizExpress id=2009.7.17.18.49.9.944> name:data.csv; type:ColumnChart; colors:blue; cstmScheme:#82B61A,#B5E15E,#DEFCA1,#C8Ef7B,#82B61A,#D9FC97,#A3D147,#93C52f; transpose:false; label:false; export:true; title:; titleX:; titleY:; width:400; height:240; min:0; max:; legend:right; fileData:; textareaData:a,b,c,d,e 1,2,3,4,5</vizExpress>
Here's what each line means:
name: The name of the CSV file that contains the raw data which users can download. It's set to by default to the name of the file you upload, or data.csv if you provide data through the text area.
type: The graph type. Could be one of eight: AreaChart, BarChart, ColumnChart, LineChart, PieChart, ScatterChart, PilesOfMoney, Table.
colors: The graph color scheme. Could be one of eight: default, grey, red, blue, green, orange, purple, custom.
cstmScheme: A list of eight hex colors to be used as a custom color scheme. Each color represents a column, bar, line, or slice.
label: This must be set to true if the first column is not numeric or if you want to use first column entries as x-axis labels.
export: Whether or not users can download the graph raw data.
title: The graph title.
titleX: The x-axis title.
titleY: The y-axis title.
width: The graph width.
height: The graph height.
min: The lowest Y axis grid line. The actual grid line will be the lower of two values: the min option value, or the lowest data value, rounded down to the next lower grid mark.
max: The highest Y axis grid line. The actual grid line will be the greater of two values: the max option value, or the highest data value, rounded up to the next higher grid mark.
legend: The legend position. Could be one of five: left, right, top, bottom, none.
fileData: The data provided from uploading a file.
textareaData: The data provided in the wizard textarea.
- Each vizExpress tag has a unique id of the form id=2009.08.17.20.58.234. If you accidentally delete it, you can replace it with any other value that is not used by another vizExpress tag in the same page.
Notes[edit | edit source]
vizExpress uses Google Visualization API to generate graphs. Here's a list of the graphs and the expected data format for each one of them:
- Area Graph: The first column can be numeric or a string (i.e. contains the category label). Any number of columns can follow, all must be numeric. Each column is displayed as a separate line.
- Bar Graph: The first column can be numeric or a string (i.e. represents the label of that group of bars). Any number of columns can follow, all numeric, each representing the bars with the same color and relative position in each group.
- Column Graph: The first column can be numeric or a string (i.e. represents the label of that group of bars). Any number of columns can follow, all numeric, each representing the bars with the same color and relative position in each group.
- Line Graph: The first column can be numeric or a string (i.e. contains the category label). Any number of columns can follow, all must be numeric. Each column is displayed as a separate line.
- Pie Graph: Two columns. The first column should be a string, and contain the slice label. The second column should be a number, and contain the slice value.
- Piles of Money (A column chart made out of money bills): Two columns. The first column can be numeric or a string (i.e. contains the label for the bar). The second column should be a number, and contain the slice value.
- Scatter Graph: Two or more columns are required, ALL must be numeric. The values in the first column are used for the X-axis. The values in following columns are used for the Y-axis. Each column is displayed with a separate color. .
Screen Casts[edit | edit source]