Template:Graph

From 2009.igem.org

(Difference between revisions)

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:

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):
{
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}}
}
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...

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

@@ 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 [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]. It also includes a datasource that should point to a (publicly accessible) [http://docs.google.com/ Google Docs] spreadsheet.
+<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.
 Steps to get a graph onto the Wiki:
-# Go to [http://docs.google.com/ Google Docs] and create a spreadsheet, which you fill with data to put in the graph (the data series should be organized in ''columns'').
+# Create a table on a Wiki page and give it an id (optional if it is the first/only table on the page).
-# Publish the spreadsheet by clicking on Share in the top-right corner (while the spreadsheet is still open) and then "Publish as a webpage". In this dialog, make sure you check "Automatically republish when changes are made" if you want the graphs to always use the latest data and then click "Start publishing". Now copy the URL in the text box in the lower half of the screen (without the "&output=html" bit), this is the data source!
+# 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):
-# Create a Wiki page with the following text (replacing all the bits between '/*' and '*/' with whatever is appropriate in your case:
 #:<pre>
 #:{
-#:datasource: '/*data source url*/',
+#: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*/ }
+#:  {x: /*x column*/, y: /*y column*/ /*, style options */}
 #:],
 #:{{defaultAxes|xtitle=/*time (s)*/|ytitle=/*concentration (µM)*/}},
@@ Line 27: / Line 26: @@
 Which looks like this:
-<!--{{graph|Team:Groningen/Graphs/Test}}-->
+{{graph|Team:Groningen/Graphs/Test}}
-{{graph|Team:Groningen/Graphs/Test3}}
+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>