Help:Dygraphs format
| Dygraphs format | |
|---|---|
| high performance series charting using the dygraphs Javascript library | |
| Scenarios, examples, demos | |
| Example: | Dygraphs examples |
| Collection | |
Loading... | |
| Further Information | |
| Provided by: | Extension "Semantic Result Formats" |
| Added: | 1.8.0 |
| Removed: | still supported |
| Requirements: | none |
| Format name: | dygraphs |
| Enabled? Indicates whether the result format is enabled by default upon installation of the respective extension. | Yes |
| Authors: | James Hong Kong |
| Categories: | charts |
| Group: | dygraphs , data visualization , ajax |
| Table of Contents | |
Dygraphs is a JavaScript library for high performance charting with charts containing 10.000 (or more) data points per chart series.
Parameters[edit]
| Parameter | Type | Default | Description |
|---|---|---|---|
| datasource | text | file | The source from where the data is accessible. Allowed values: "file", "raw" and "url". Default: "file" |
| errorbar | text | empty | The error bar to be used. Allowed values: "fraction" (confidence intervals for values), "sigma" (standard deviation of values) and "range" (custom value ranges) |
| min | whole number | empty | The minimum value to show on the Y-axis |
| mavg | whole number | 14 | Display the average over a number of days (zero will indicate no moving average) |
| gridview | text | none | Display chart and data sets simultaneously. Allowed values: "none" and "tabs". Default: "none" |
| infotext | text | empty | Display additional information on a corresponding info tab |
| unit | text | empty | Unit |
| height | whole number | 400 | Specify the height (in pixels) of a chart or graph |
| width | text | 100% | Specify the width (in pixels or percent) of a chart or graph |
| charttitle | text | empty | The title of the chart |
| charttext | text | empty | Descriptive chart text |
| ylabel | text | empty | Description that appears on the y-axis |
| xlabel | text | empty | Description that appears on the x-axis |
| class | text | empty | Specify an additional cascading style sheet class |
Usage[edit]
Data are retrieved from a stored CSV file within the wiki because most scientific or experimental studies can export raw data in csv format[1] and as it is impractical to try to store large data sets as individual property-value pair instead this printer will focus on notable data points (or events) within the raw data to build a coherent charting output of raw data and selected annotations (stored as subobject).
Data source[edit]
The printer supports different data sources
- file (default) retrieves information from an uploaded CSV file
- raw retrieves information from a wikipage where CSV content has been copied to
- url specifies the data source through an url which should be available within the same domain (This is not a particular SRF limitation but rather a condition the dygraphs library is putting in place by making a "XMLHttpRequest for the CSV file"[2] which by its nature is enforcing a cross-domain restriction.)
Annotations[edit]
Annotations are notable events (in a time series) or data points that warrant special attention and therefore handled separately as property-value pair within the wiki.
The annotated x-value should be specified as number/date and has to reflect the exact same value as the uploaded raw data from the original data set.
While the property labels can be freely named, the query label output (|?...=<series,x,shorText,text>) should adhere a specific convention[3] otherwise annotations will fail to be recognized.
|?Has series=series |?Has x-value=x |?Has tip text=shortText |?Has text=text
Data model[edit]
- Upload the csv file that contains the raw data sets, ensure that the header titles within the csv do not contain any trailing spaces (because of potential conflict with series names).
- Describe the file with a property-value pair that can be uniquely identified as a source together with its annotations ([[Data source::DJIA19202009]]).
- Annotations can be stored independently from the source as property-value pair
{{#subobject:
|Data source=DJIA19202009
|has series=Real
|has x-date-value=1929-08-15
|has tip text=A
|has text=1929 Stock Market Peak
}}
Data charting[edit]
{{#ask:[[Data source::DJIA19202009]]
|?has series=series
|?has x-date-value=x
|?has tip text=shortText
|?has text=text
|format=dygraphs
|errorbar=range
}}
Other features[edit]
Dygraphs format supports error bars including the display (depending on the data set) of standard deviation, fractions, and low/high ranges.
Examples[edit]
- Dygraphs/Annotate gas chromatogram (10K data points)
- Dygraphs/Daily Temperatures in New York vs. San Francisco
- Dygraphs/Data/Distribution-Curves.raw
- Dygraphs/Data/NG-GCMS 140211-Example.raw
- Dygraphs/File example
- Dygraphs/Raw/NYSF2007-2009.raw
- Dygraphs/Spectral Distribution Curves
- Dygraphs/URL/Temperature example
Note[edit]
