Help:Dygraphs format

Jump to: navigation, search
Dygraphs format
high performance series charting using the dygraphs Javascript library
Scenarios, examples, demos
Example: Dygraphs examples
Image collection
Further Information
Provided by: Semantic Result Formats
Added: 1.8.0
Removed: still supported
Requirements: none
Format name: dygraphs
Enabled by default: 
Indicates whether the result format is enabled by default upon installation of the respective extension.
Authors: James Hong Kong
Categories: charts
Group: dygraphs , data visualization , ajax
Class: SRFDygraphs, SMWResultPrinter
Folder: Commit history
Folder tree
Table of Contents

↓ INFO ↓

Dygraphs is a JavaScript library for high performance charting with charts containing 10.000 (or more) data points per chart series.


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


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

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 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

  • 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
 |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

{{#ask:[[Data source::DJIA19202009]]
 |?has series=series
 |?has x-date-value=x
 |?has tip text=shortText
 |?has text=text

Other features

Dygraphs format supports error bars including the display (depending on the data set) of standard deviation, fractions, and low/high ranges.



  1. CSV format
  2. Data via URL
  3. Annotations

This documentation page applies to all SMW versions from 1.8.0 to the most current version.

Help:Dygraphs format en 1.8.0