Difference between revisions of "Including Graphs"

From National Gallery Research Wiki
Jump to navigation Jump to search
Line 9: Line 9:
 
'''Please note:'''
 
'''Please note:'''
 
* It is only possible to provide one set of annotations, either as local data or as a file.
 
* It is only possible to provide one set of annotations, either as local data or as a file.
* 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.
 
  
 +
== 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]]: Large data set of environmental readings (20K x 3 data points), 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 ===
 
=== From Local Data ===
 
<pre>
 
<pre>
Line 56: Line 79:
 
ytitle=YTitle|
 
ytitle=YTitle|
 
}}</pre>
 
}}</pre>
 
== 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]]: Large data set of environmental readings (20K x 3 data points)
 
* [[Example Graph 5]]: An FTIR spectrum with a reversed X-axis
 
  
 
[[Category:Test page]]
 
[[Category:Test page]]
 
[[Category:Example page]]
 
[[Category:Example page]]
 
[[Category:DyGraph]]
 
[[Category:DyGraph]]

Revision as of 16:19, 3 May 2012

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.

Please note:

  • It is only possible to provide one set of annotations, either as local data or as a file.

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: Large data set of environmental readings (20K x 3 data points), 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|
}}