Skip to content

Chart widget

Jump to bottom
Johannes Strassmayr edited this page Jan 22, 2023 · 13 revisions

Contact us at office@sobos.at

Clone this wiki locally

You can freely integrate every station's waterlevel into your website. Follow these 4 simple steps

  1. Open our website at http://earlyfloodalert.com/paw
  2. Click on the gauge that you want to integrate
  3. Click on "Share" and "Embed HTML diagram"
  4. Copy the iframe-code into your HTML page and you are good to go.

Integration

You can customize the iframe's content using HTML and CSS.

<iframe
	src="https://pegelalarm.at/paw/chart.html?commonid=205641-at&lang=de&autoReloadMins=3"
	width="100%" height="303px"
	style="border:0px"
	name="waterchart">
</iframe>

Example result

Waterlevel of a gauge in a chart

Attributes

Response attribute description

Name Optional Example Description
src no https://pegelalarm.at/paw/chart.html?commonid=205641-at&lang=de&autoReloadMins=3
src.commonid no 205641-at The unique id of this measurement station.
src.lang yes en, de, it The language in which the chart should be displayed.
src.autoReloadMins yes 3 Define how often - in minutes - the chart should be reloaded. 0 means no auto-reload. Default is 4.
src.timeWindow yes 1day, 7day, 30day, all Define the number of days to be displayed.
src.timeOffset yes 0, 1, 2... Define the number of timeWindows you want to see before 'now'. Defaults is 0.
src.showValueInTitle yes true, false Define if the headerline with current waterlevel and source date is shown. Default is true.
src.showMetaData yes true, false Define if suggested prealert- and alert levels should be shown. Default is true.
src.showLegend yes true, false Define if the legend for prealert- and alert levels (bottom left) should be shown. Default is true.
src.type yes height, flow Define if you want to initially show waterlevels in cm or flow in m³/s
src.customerCss yes https://... Define a URL to your custom CSS file.
width no 100% The width of the iFrame in % of the full page or as pixel value. A minimum for this value is 360px.
height yes 303px The height of the iFrame in pixels. Suggested value is 303 px.
style yes border:0px The height of the iFrame in pixels. Suggested value is 303 px.
name yes Flood info A title on top of the iFrame.

Optional CSS

If you want to adapt the look of the iFrame to match your containing website, you can customize the iFrame using CSS. See above's parameter customerCss. We have prepared a few example CSS files to fasten your implementation.

  1. Download the example CSS file from our server: grey-chart.css
  2. Adapt the CSS file to your UI needs
  3. Upload the CSS file to your server
  4. Refer to the CSS-file in the URL-parameter 'customerCss' of the 'src'-URL