Including Graphs

From National Gallery Research Wiki
Jump to navigation Jump to 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|
}}