Join Chris Converse for an in-depth discussion in this video Setting up the project folder, part of Create an Animated Bar Chart with jQuery.
To begin our project let's create a new folder on the desktop.…We'll name this myBarChart.…Inside of here, let's create two additional folders.…One is going to be called images and another one called includes.…Once these two folders are created, let's come back to the exercise files.…Let's open up the folder called Files to start. Let's select the three files…inside of here, two CSS files and a copy of jQuery, and just Option+Drag on Mac…or Alt+Drag in Windows and copy into the folders we just created.…
Now back in the exercise files let's open up the Art Templates folder, and…let's open up template_artwork.psd in Photoshop.…Now this Photoshop file has all of the sliced artwork contained inside of it,…so if you don't see the slices you can come over to the Crop Tool and select…the Slice or the Slice Selection Tool.…Once you select these, you'll see the slices showing up inside of Photoshop.…I'm going to zoom up here a little bit.…Now in order to see this artwork, you can come over to the Layers Panel and at…
To preview the finished project, visit codifydesign.com.
- Adding markup for chart bars
- Adding jQuery and CSS to an HTML document
- Declaring and setting the global variables
- Writing a custom function to position the bars
- Adding labels and value text to the bars
- Animating the bars based on their value
- Fading in bar values labels after the bar animations
- Adjusting chart sizing by updating CSS values