Home
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.
In the following diagram it is possible to visualize the main VistSOS components and the relations among them:
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.
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 |
Line and Multi-series 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>
<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:
<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:
<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
<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
<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>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>