Setting up the Widget

  1. Import jQuery 1.7

    Import jQuery 1.7 into the page in which the widget will appear. If jQuery 1.7 is already imported into the page, skip this step.

    In the <head> section of the page, add the line:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

  2. Import the AnythingWeather Hourly Conditions Widget

    Import the AnythingWeather Hourly Conditions Widget into the page by adding the following line to the <head> section of the page. This must appear after the line that imports jQuery 1.7.

    <script type="text/javascript" src="https://weather-widgets.com/aw-widgets/widgets/aw-hourly-widget.js"></script>

  3. Enable the AnythingWeather Hourly Conditions Widget

    Enable the AnythingWeather Hourly Conditions Widget into the page by adding the following lines to the <head> section of the page. This must appear after the lines that import jQuery 1.7 and the widget. 

    <script type="text/javascript">
  $(function(){
    $('#awHourlyPane').awHourly({
      stationId: '12345'
    });
  });
</script>
  4. Place the AnythingWeather Hourly Conditions Widget

    Place the AnythingWeather Hourly Conditions Widget onto the page by adding the following line to the <body> section of the page where the widget is to appear.

    <div id="awHourlyPane"></div>

Widget settings

This widget supports a number of settings. The settings are specified by placing them between the curly braces ({}) in the code of step 3. See the example below.

The available settings are described in the following table:

Option Description Default
stationid Specifies the station id to use when obtaining the data feed. None, must be supplied
hourCount Specifies the number of hours to fetch from the feed. Each hourly report results in one row of the resulting table. 72

Example

<script type="text/javascript">
  $(function(){
    $('#awHourlyPane').awHourly({
      numHours: 60,
      stationId: '51179'
    });
  });
</script>

Visit an example page that uses this widget. To see the source code for that page, use your browser to view the source once the page is loaded.