/js-weather-api-houston-web-082718

Primary LanguageJavaScriptOtherNOASSERTION

Visualizing Temperature

Objectives

  • Build a page that uses data from the Weather Underground to render a line chart using Chart.js. It should look something like the picture below.

example pic

  • Learn how to use fetch to keep data current.
  • Use a JavaScript visualization library.

Instructions

  • Sign up for an account to generate a Weather Underground API key here. You'll use this key for API calls.
  • You'll be using Chart.js to visualize the JSON from Weather Underground so check it out. Require the Chart.js library in the head of your HTML file. Double check that you required the library correctly by typing Chart into the browser's console. A function should be returned, not "undefined". (Note, you should require the version of Chart.JS that we have stored in js/vendor directory)
  • Require weatherChart.js below the lines where you required jQuery and Chart.js.
  • In init.js, make a variable, API_KEY, and define it as the string of your Weather Underground key.
  • Also in init.js, make a variable URL that will be the URL that your code will fetch hourly JSON data on New York city's weather. Read the docs to figure out what it'll be. (INCLUDED IN LAB CODE)
  • Get the weather data using a fetch request.
  • Associate each hour, in military time, with a temperature, in fahrenheit.
  • Use the data you found in the line above to make a line chart with Chart.js. Refer to its line chart docs for help. Render the chart in the canvas with the id NYCWeatherChart.

Resources