Skip to content
Felipe Poveda edited this page Sep 8, 2017 · 29 revisions

The VistSOS data visualization tool will allow users to configure and customize static and dynamic charts populated with data coming from istSOS. This visualizations can be included in external websites as Web Components with minimum configuration effort.

VistSOS component diagram

In the following diagram it is possible to visualize the main VistSOS components and the relations among them:

VistSOS component diagram

How to use it

To use VistSOS modify your HTML document like this:

Inside the head section include:

<script src="../bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="default-widget.html" async>

Then inside the body of the HTML document include a declaration of a chart with some parameters, e.g.

<div id="f2a24b61">
    <istsos-chart type="line"
     server="http://istsos.org/istsos"
     service="demo"
     offering="BELLINZONA"
     procedures="BELLINZONA"
     property="air-temperature"
     from="2014-05-07T00:00"
     until="2014-05-08T00:00"
     width="500"
     height="250"
     divId="f2a24b61">
    </istsos-chart>
</div>

The previous example define the configuration for a line chart populated with observations taken during the period 2014-05-07T00:00 until 2014-05-08T00:00 and stored in the server http://istsos.org/istsos for the offering and the procedure BELLINZONA.

Note: the id of the div and the parameter 'divId' of the istsos-chart element should match.

NOTE FOR FIREFOX: If the charts are not visible, got to the url 'about:config' and search for 'dom.webcomponents.enabled', then set the value of this characteristic to false.

Documentation

The property 'type' can take one of the following values:

  • line
  • multivariable
  • overview-detail
  • histogram
  • cumulative-histogram

The observed properties supported are:

  • air-rainfall
  • air-relative-humidity
  • air-temperature
  • air-wind-velocity
  • river-discharge
  • river-height
  • soil-evapotranspiration
  • solar-radiation

Common parameters for all charts:

Parameter Description Allowed values / Format Mandatory
type Type of the chart. line, multivariable, overview-detail, histogram Yes
server A valid istSOS server URL. URL Yes
offering Name of the offering. Offering name. Yes
procedures A comma-separated list of procedures. Procedure name. Yes
property A comma-separated list of properties. Property name. Yes
from Initial date of the time series. ISO 8601 format with optional time zone offset: YYYY-MM-DDTHH:MM:SS ±hhmm Yes
until Final date of the time series. ISO 8601 format with optional time zone offset: YYYY-MM-DDTHH:MM:SS ±hhmm Yes
width Total width of the chart. String. No
height Total height of the chart. String. No
divId Id of the div containing the chart. String representing the id of div. Yes
user User name if authentication is requiered. String. No
password Password if authentication is requiered. String. No

Specific parameters for histogram chart:

Parameter Description Allowed values / Format Mandatory
aggregateInterval Time interval used to aggregate the observations. ISO 8601 duration. (e.g.: P1DT = 1 Day, PT12H = 12 hours). Yes
aggregateFunction Function used to compute the value of the aggregation on each time interval. AVG, SUM, MAX, MIN Yes

Specific parameters for cumulative histogram chart:

Parameter Description Allowed values / Format Mandatory
cumulativePeriod Period of time used to aggregate the observations. day (day of month), month, year Yes

Examples

Line and Multi-series chart:

Line chart

<div id="f2a24b61">
    <istsos-chart type="line"
     server="http://istsos.org/istsos"
     service="demo"
     offering="BELLINZONA"
     procedures="BELLINZONA"
     property="air-temperature"
     from="2014-05-07T00:00"
     until="2014-05-08T00:00"
     width="500"
     height="250"
     divId="f2a24b61">
    </istsos-chart>
</div>

Multi-series chart

<div id="f2a24b61">
    <istsos-chart type="line"
     server="http://istsos.org/istsos"
     service="demo"
     offering="temporary"
     procedures="BELLINZONA,GRABOW"
     property="air-temperature"
     from="2014-05-04T00:00"
     until="2014-05-05T23:00"
     width="500"
     height="250"
     divId="f2a24b61">
    </istsos-chart>
</div>

Note: The difference between line and multi-series chart is the list of procedures passed as a parameter. For line it will be only one procedure and for multi-series it can be more than one.

Multi-variable chart:

Multi-variable chart

<div id="f2a24b63">
    <istsos-chart type="multivariable"
     server="http://istsos.org/istsos"
     service="demo"
     offering="BELLINZONA"
     procedures="BELLINZONA"
     property="air-temperature,air-relative-humidity"
     from="2014-05-07T00:00"
     until="2014-05-07T10:00"
     width="500"
     height="250"
     divId="f2a24b63">
    </istsos-chart>
</div>

Overview-detail chart:

Overview-detail chart

<div id="f2a24b64">
    <istsos-chart type="overview-detail"
     server="http://istsos.org/istsos"
     service="demo"
     offering="BELLINZONA"
     procedures="BELLINZONA"
     property="air-temperature"
     from="2014-05-07T00:00"
     until="2014-05-15T23:00"
     width="700"
     height="250"
     divId="f2a24b64">
    </istsos-chart>
</div>

Single bar histogram chart

Single bar histogram chart

<div id="f2a24b65">
    <istsos-chart type="histogram"
     server="http://istsos.org/istsos"
     service="demo"
     offering="BELLINZONA"
     procedures="BELLINZONA"
     property="air-temperature"
     from="2014-04-01T00:46:00"
     until="2014-05-07T23:46:00"
     aggregateInterval="PT12H"
     aggregateFunction="AVG"
     width="550"
     height="250"
     color="#00A800"
     color2="black"
     divId="f2a24b65">
    </istsos-chart>
</div>

Note: In the single bar histogram in example two parameters (color and color2) are passed to define the bar and hover effect color respectively.

Multiple bar histogram chart

Multiple bar histogram chart chart

<div id="f2a24b62">
    <istsos-chart type="histogram"
     server="http://istsos.org/istsos"
     service="demo"
     offering="temporary"
     procedures="BELLINZONA,GRABOW"
     property="air-temperature"
     from="2014-05-04T00:00"
     until="2014-05-05T23:00"
     aggregateInterval="PT12H"
     aggregateFunction="AVG"
     width="550"
     height="250"
     divId="f2a24b62">
    </istsos-chart>
</div>

Authentication

If authentication is requiered by the istSOS REST API you can add the username and password parameters:

<div id="f2a24b61">
    <istsos-chart type="line"
     server="http://istsos.org/istsos"
     service="demo"
     offering="BELLINZONA"
     procedures="BELLINZONA"
     property="air-temperature"
     from="2014-05-07T00:00"
     until="2014-05-08T00:00"
     width="500"
     height="250"
     user="visitor"
     password="Xajhysy1298"
     divId="f2a24b61">
    </istsos-chart>
</div>

Related links