Including Graphs

From National Gallery Research Wiki
Jump to: navigation, search

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|
}}