language | tags | resources |
---|---|---|
javascript |
AJAX, data visualization, JavaScript library, Chartkick, API |
3 |
- 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.
- 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 typingjQuery
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 typingChart
into the browser's console. A function should be returned, not "undefined". - Require
weather-chart.js
below the lines where you required jQuery and Chart.js. - In
weather-chart.js
, make a variable,API_KEY
, and define it as the string of your Weather Underground key. - 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. - Use jQuery to fetch the JSON using an AJAX request.
- Filter the JSON so that each hour, in military time, is associated 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
.