Template:Graph

From 2009.igem.org

(Difference between revisions)
(First attemp at graph template.)
m
 
(17 intermediate revisions not shown)
Line 1: Line 1:
-
<includeonly><div class="graph">Loading [[{{{1}}}|graph]]...</div></includeonly><noinclude>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 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].
+
<includeonly><html><!--[if IE 8]><table><tr><td><![endif]--></html><div class="graph" id="{{{id|{{{1}}}}}}" style="width:{{{width|auto}}};height:{{{height|auto}}};">Loading [[{{{1}}}|graph]]...</div><html><!--[if IE 8]><center style="color:red;font-weight:bolder;font-size:smaller;">(This graph may look better using "<a href="http://www.microsoft.com/windows/internet-explorer/features/easier.aspx">Compatibility View</a>".)</center></td></tr></table><![endif]--></html></includeonly><noinclude>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.
-
As an example [[Team:Groningen/Graphs/Test]] can be rendered using:
+
Steps to get a graph onto the Wiki:
 +
 
 +
# Create a table on a Wiki page and give it an id (optional if it is the first/only table on the page).
 +
# 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):
 +
#:<pre>
 +
#:{
 +
#: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}}
 +
#:}
 +
#:</pre>
 +
# Use <pre>{{graph|/*Wiki graph page name*/}}</pre> to use the graph in any Wiki page (note that any Wiki page using a graph must also use <pre>{{GraphHeader}}</pre> once).
 +
 
 +
As an example [{{fullurl:Team:Groningen/Graphs/Test}}?action=edit Team:Groningen/Graphs/Test] can be rendered using:
<pre>{{graph|Team:Groningen/Graphs/Test}}</pre>
<pre>{{graph|Team:Groningen/Graphs/Test}}</pre>
Line 9: Line 28:
{{graph|Team:Groningen/Graphs/Test}}
{{graph|Team:Groningen/Graphs/Test}}
-
Please note that any page using this template should also include [[Template:GraphHeader]] (once), this need not be at the beginning of the document.
+
And this is not limited to line charts, as [{{fullurl: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):
 +
 
 +
{{graph|Team:Groningen/Graphs/TestPie}}
 +
 
 +
Instead of a spreadsheet a script can also be used as datasource:
 +
 
 +
{{graph|Team:Groningen/Graphs/TestScript}}
 +
 
 +
And an example showing scaled versions of the above graphs:
 +
 
 +
{|
 +
|{{graph|Team:Groningen/Graphs/Test|height=4cm}}
 +
|{{graph|Team:Groningen/Graphs/TestPie|height=4cm}}
 +
|{{graph|Team:Groningen/Graphs/TestScript|height=4cm}}
 +
|}
 +
'''Please note''' that any page using this template should also include [[Template:GraphHeader]] (once), this need not be at the beginning of the document.
{{GraphHeader}}</noinclude>
{{GraphHeader}}</noinclude>

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:

Loading graph...

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):

Loading graph...

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

Loading graph...

And an example showing scaled versions of the above graphs:

Loading graph...
Loading graph...
Loading graph...

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