Difference between revisions of "Including Graphs"

From National Gallery Research Wiki
Jump to navigation Jump to search
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
Graphs produced using the [http://danvk.org/dygraphs/ Dygraph] javascript library.
 
Graphs produced using the [http://danvk.org/dygraphs/ Dygraph] javascript library.
  
−
== Widget ==
+
== DyGraph Extension ==
−
Graphs can be constructed by adding data and annotations to the widget as formatted text.
 
−
* [[Widget:dyGraph]]
 
  
−
== Template ==
+
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.
−
By using this template data and annotations can now be uploaded to the wiki as separate files and then added to a graph, see:
+
 
−
* [[Template:dyGraph]]
+
A graph can be added to a page by included a version of the syntax shown below.
  
 
== Examples ==
 
== Examples ==
Line 13: Line 11:
 
* [[Example Graph 2]]: Reflectance spectra for French ultramarine (362 data points)
 
* [[Example Graph 2]]: Reflectance spectra for French ultramarine (362 data points)
 
* [[Example Graph 3]]: Annotate gas chromatogram (10K data points)
 
* [[Example Graph 3]]: Annotate gas chromatogram (10K data points)
−
* [[Example Graph 4]]: Including a graph of data from an external source
+
* [[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 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 ===
 +
<pre>
 +
{{#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],
 +
...
 +
]
 +
}}
 +
</pre>
 +
 
 +
===From Text Files===
 +
<pre>
 +
{{#dygraph:
 +
files=data1.txt|
 +
wid=600px|
 +
hei=500px|
 +
title=Graph Title|
 +
xtitle=XTitle|
 +
ytitle=YTitle|
 +
annfile=annotation1.txt
 +
}}</pre>
 +
 
 +
===From External Files===
 +
<pre>
 +
{{#dygraph:
 +
files=http://mysourceofdata.com?id=1|
 +
wid=600px|
 +
hei=500px|
 +
title=Graph Title|
 +
xtitle=XTitle|
 +
ytitle=YTitle|
 +
}}</pre>
  
 
[[Category:Test page]]
 
[[Category:Test page]]
 
[[Category:Example page]]
 
[[Category:Example page]]
 +
[[Category:DyGraph]]

Latest revision as of 14:01, 28 August 2018

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|
}}
Retrieved from "https://research.ng-london.org.uk/wiki/index.php?title=Including_Graphs&oldid=1382"