Join Chris Converse for an in-depth discussion in this video Downloading and setting up Aptana Studio, part of Creating an Animated Bar Chart with jQuery.
In this course we're going to be coding in a tool called Aptana Studio. You can follow along with any text or web editor that you choose. Or if you want to download a free copy of Aptana Studio you can go to aptana.com and download a copy for Macintosh or Windows. When you download and install this particular editor, one of the things that it has is the capability to change themes. By default Aptana Studio 3 has this really dark background. I'm going to come up to the Aptana Studio 3 menu on the Mac or you can choose the Preferences under the Window menu on Windows. Come down to Aptana, come down to Themes, and inside of here I can change the themes that this is going to be using.
For this course I'd like to go back to Aptana Studio 2.x. This is going to give me a white background and it's going to let the color coding really show and be a lot easier for you to follow along. Once I've made this change I'm going to click OK. Now every time I launch Aptana Studio it's going to use this particular theme inside of the darker background. Now that we have our editor set up, in the next movie we're going to start by creating a new project and continuing on.
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