learn-co-students / js-weather-api-dc-web-031218

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.

• 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

• Weather Underground - Hourly
• fetch
• Chart.js - Line Charts

js-weather-api-dc-web-031218's Issues

Version of Chart.js is out of sync with the Chart.js docs

Quick fix might be to vendor a new Chart.js. Not sure what the long-term solution is, seems like a deeper issue with dependency management across the whole curriculum