Join Chris Converse for an in-depth discussion in this video Creating a new project and an HTML file, part of Create an Animated Bar Chart with jQuery.
Now that we have all of our assets in place let's come over to Aptana Studio.…Now if you'd prefer to take this course in a more visual tool we have the…same course available in the lynda.com Library using Adobe Dreamweaver instead of Aptana.…And once Aptana loads we're going to come up to the File menu, choose New,…and then Web Project.…We're going to call this my Bar Chart, uncheck the Use default location…checkbox, choose Browse. Let's go to the desktop and choose the myBarChart…folder that we just created on the desktop.…
Click Open. This little warning here is going to let you know that…Aptana sees that there are files already in this particular folder. We'll choose…Finish to have those added to the project.…Now on the left-hand side I can see all of the images and includes that we…created earlier in the course.…So the first thing we're going to do here is choose File > New From Template > HTML,…and let's come down and create a brand-new XHTML Transitional Template.…Once this is created let's choose File > Save As. We'll call this chart.html and…
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