Including Graphs

Graphs produced using the Dygraph javascript library.

DyGraph Extension

In order to make it easier to include DyGraph graphs within wiki pages a specific extension has been written. Further information will be provided once this new extension has been properly tested.

A graph can be added to a page by included a version of the syntax shown below.

Examples

• Example Graph 1: Sub section of the reflectance spectra for French ultramarine (50 data points)
• Example Graph 2: Reflectance spectra for French ultramarine (362 data points)
• Example Graph 3: Annotate gas chromatogram (10K data points)
• Example Graph 4: 5 sets of data from an external data source, with the option to toggle the visibility of each data series.
• Example Graph 5: An FTIR spectrum with a reversed X-axis.

Example Code: Extension Variables

• Graph data can be provided using either the files or the data variable. If both variables are defined the extension will use the files details and ignore the data details.
  • files: Comma separate list of Internal or External data files, see below for examples.
  • data: A direct inclusion of graph data in rows and columns, see below for examples.
  • It is not possible to use a combination of internal and external data files.
  • Local data files including a "," in the names will not work properly.
• Annotation data can be included using the annfile or ann variable. If both variables are defined the extension will use the annfile details and ignore the ann details.
  • annfile: The details of a single Internal or External annotation file, see below for examples.
  • ann: A direct inclusion of annotation data, see below for examples.
• wid: Width of the graph in pixels, i.e. 350px, this is an optional variable and a default value of 600px will be used if no alternative is provided.
• hei: Height of the graph in pixels, i.e. 250px, this is an optional variable and a default value of 400px will be used if no alternative is provided.
• toggleVis: This variable indicates the presence and position of options to toggle the appearance of each of the data series included in the graph. This value can be set to: left, right, far_right or below, this is an optional variable.
• title: The main graph title, this is an optional variable.
• xtitle: The X-axis graph title, this is an optional variable.
• ytitle: The Y-axis graph title, this is an optional variable.

Example Code: Including Data

From Local Data

{{#dygraph:
data=Wavelength, Reflectance(%)
xv1, y1v1
xv2, y1v2
xv3, y1v3
xv4, y1v4
...|
wid=Width in Pixels|
hei=Width in Pixels|
title=Graph Title|
xtitle=XTitle|
ytitle=YTitle|
ann=[
["Series No, Y-value, 'Tag', 'Title', width],
["Series No, Y-value, 'Tag', 'Title', width],
...
]
}}

From Text Files

{{#dygraph:
files=data1.txt|
wid=600px|
hei=500px|
title=Graph Title|
xtitle=XTitle|
ytitle=YTitle|
annfile=annotation1.txt
}}

From External Files

{{#dygraph:
files=http://mysourceofdata.com?id=1|
wid=600px|
hei=500px|
title=Graph Title|
xtitle=XTitle|
ytitle=YTitle|
}}