Chart widget

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

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