learn-co-curriculum / fe-js-spotify-api-ajax

Visualizing Spotify's Popular Genres

Objectives

• Build a page that uses data from the Spotify's Chart API to render a bar chart using Chart.js. It will display the latests top 20 streamed songs in the US and will have track names on the x-axis and number of streams on the y-axis.

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

Steps

1. Fork this repository.
2. Clone your fork locally.
3. cd into the local repos folder.
4. Open SpecRunner.html in your browser. Also open index.html
5. Make the tests pass in spec/spotifyChartSpec.js by writing the code neccesary in js/spotifyChart.js also make sure when your finished the chart is appearing in index.html

Instructions

• 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 spotifyChart.js below the lines where you required jQuery and Chart.js.
• Get the address where the latest most streamed songs in the US for the week are returned. Read the docs to figure out what it should be. You will need to use the URL for jsonp.

Resources

• Spotify Chart Docs
• jQuery - AJAX
• Chart.js - Bar Chart
• Jasmine 2.0 Documentation

View Visualizing Spotify's Popular Genres on Learn.co and start learning to code for free.

fe-js-spotify-api-ajax's Issues

Label length issue

from a student: On the Spotify JQuery lab, I ran into this bug with Chart.js where if you tried to make one of the labels (ie, the song titles) too long (longer than about 30 characters or so), it would cause an infinite loop to happen.