API Example

More advanced uses of the WeatherSTEM API can be used to request and display live or historic weather data. When used in combination with other tools like Flot Charts and the WeatherSTEM Flot plugin, you can create interesting visualizations of the weather at your favorite WeatherSTEM unit.

Copy
<!-- Meta data for API key and station identifier -->
<meta name="WeatherSTEM-api-key" content="3zxaakeb"> <!-- IMPORTANT! REPLACE "3zxaakeb" WITH YOUR REGISTERED API KEY -->
<meta name="WeatherSTEM-station" content="monroe/broadkey"> <!-- Replace "monroe/broadkey" with your county/station -->

<!-- CSS -->
<link rel="stylesheet" href="http://www.flotcharts.org/flot/examples/examples.css"> <!-- Flot charts plugin CSS -->

<!-- HTML snippet (for use with Flot chart plugin) -->
<div id="jdata"></div>
<div class="demo-container">
  <div id="placeholder" class="placeholder"></div>
</div>

<!-- JavaScript -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> <!-- jQuery needs to load before the API file -->
<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script> <!-- Flot charts plugin JS (core) -->
<script src="http://www.flotcharts.org/flot/jquery.flot.time.js"></script> <!-- Flot charts plugin JS (time add-on) -->
<script src="https://learn.weatherstem.com/modules/learn/lessons/js/wxstem_flot.js"></script> <!-- WeatherSTEM Flot Plugin -->
<script src="//static.weatherstem.com/api.min.js"></script> <!-- API file (must load after jQuery) -->
<script>
$(function() {

  // Options for the WeatherSTEM Flot plugin
  var extra_options = {
    lines: {
      show: true
    }
  }
  wxstem_flot(
    '#placeholder', // container
    ["Thermometer"], // sensor
    ["broadkey@monroe.weatherstem.com"], // station
    [0,0,-1,0,0], // from: year, month, day, hour, minute (set to one day ago)
    [0,0,0,0,0], // to: year, month, day, hour, minute (set to current time)
    'max', // operation (datapoint, average, max, min)
    'hour', // interval (month, day, hour, minute)
    [4, "hour"], // tick size
    '%I%p', // time format: view source on WeatherSTEM Flot plugin for other options
    extra_options
  )

});
</script>