Visualizing Temperature w/AJAX

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.

• Learn how to use AJAX 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.
• Require jQuery at the top of index.html. Double check that it was correctly required by typing jQuery in the browser console or just $. This should return a function, not "undefined".
• 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".
• 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)
• Use jQuery to fetch the JSON using an AJAX 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

• Weather Underground - Hourly
• jQuery - AJAX
• Chart.js - Line Charts

View Visualizing Temperature w/AJAX on Learn.co and start learning to code for free.

View Weather Underground API Lab on Learn.co and start learning to code for free.