Difference between revisions of "Including Graphs"
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. | ||
− | == | + | == 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 == | == 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]]: | + | * [[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 13:01, 28 August 2018
Graphs produced using the Dygraph javascript library.
Contents
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| }}