Including Graphs: Difference between revisions

From National Gallery Research Wiki
Jump to navigation Jump to search
VisualWikitext
(Created page with "Graphs produced using the [http://danvk.org/dygraphs/ Dygraph] javascript library. == Widget == Graphs can be constructed by adding data and annotations to the widget as formatt...")
 
No edit summary
 
(7 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]]: Large data set of environmental readings (20K x 3 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 ===
<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:Example page]]
[[Category:DyGraph]]

Latest revision as of 13: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.nationalgallery.org.uk/wiki/ng/index.php?title=Including_Graphs&oldid=1382’