Template:Graph

From 2009.igem.org

Latest revision as of 10:11, 25 September 2009

This template lets any user of the Wiki include a graph in a Wiki page much like he/she can include an image. The graph is defined using [http://www.json.org/ JSON] that describes the graph directly using the properties supported by the [http://docs.dojocampus.org/dojox/charting charting library] in the [http://www.dojotoolkit.org/ Dojo Toolkit]. As datasource either a Wiki table, a (publicly accessible) [http://docs.google.com/ Google Docs] spreadsheet or a script (Javascript) can be used.

Steps to get a graph onto the Wiki:

1. Create a table on a Wiki page and give it an id (optional if it is the first/only table on the page).
2. Create a Wiki page with the following text (replacing all the bits between '/*' and '*/' with whatever is appropriate in your case (see the [http://docs.dojocampus.org/dojox/charting Dojo documentation] for information on the options available):

   {

   datatable: '/*url of table*/',

   width: '/*width, including a unit, e.g. 8cm*/',

   height: '/*height, including a unit, e.g. 5cm*/',

   series: [

   /* comma-separated list of data series to display, e.g. for just one data series: */

   {x: /*x column*/, y: /*y column*/ /*, style options */}

   ],

   {{defaultAxes|xtitle=/*time (s)*/|ytitle=/*concentration (µM)*/}},

   {{defaultPlot}}

   }

3. Use

   {{graph|/*Wiki graph page name*/}}

   to use the graph in any Wiki page (note that any Wiki page using a graph must also use

   {{GraphHeader}}

   once).

As an example [http://2009.igem.org/Team:Groningen/Graphs/Test?action=edit Team:Groningen/Graphs/Test] can be rendered using:

{{graph|Team:Groningen/Graphs/Test}}

Which looks like this:

And this is not limited to line charts, as [http://2009.igem.org/Team:Groningen/Graphs/TestPie?action=edit Team:Groningen/Graphs/TestPie] shows (note that it could have been made to look a little nicer by tweaking the plot options):

Instead of a spreadsheet a script can also be used as datasource:

And an example showing scaled versions of the above graphs:

Please note that any page using this template should also include Template:GraphHeader (once), this need not be at the beginning of the document.

• Recent changes
• What links here
• Related changes
• Special pages
• My preferences

• Printable version
• Permanent link
• Privacy policy
• Disclaimers