navigate site menu

Start learning with our library of video tutorials taught by experts. Get started

Create an Animated Bar Chart with jQuery and Dreamweaver

Create an Animated Bar Chart with jQuery and Dreamweaver

with Chris Converse

 


In this course, Chris Converse creates an animated bar chart or other visual graphic using a combination of jQuery and the tools in Dreamweaver. This approach is dynamic, allowing a designer to adjust the size of a chart and letting jQuery calculate the new position and size of the bars based on the data associated with each bar. The course also covers designing the chart with HTML and CSS, as well as creating labels and timing delays with jQuery.

To preview the finished project, visit codifydesign.com.
Topics include:
  • 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

show more

author
Chris Converse
subject
3D + Animation, Business, Web, Web Graphics, Charts + Graphs, Web Design, Infographics, Projects, Web Development
software
jQuery 1.5
level
Intermediate
duration
46m 35s
released
Dec 19, 2011

Share this course

Learn more about lynda.com

Start learning today. Lynda explains how.

Ready to join? get started

Keep up with news, tips, and latest courses.

submit Course details submit clicked more info

Please wait...
Chris Converse

Chris Converse

Chris Converse graduated from Rochester Institute of Technology with a degree in graphic design. He began his career in print, designing and preparing digital files for commercial offset printing. Chris has spent the last 15 years studying and applying design and interface principles to technology. His work spans various distribution media (CD-ROMs, web sites, and interactive DVDs) and applies many authoring media and techniques (HTML, CSS, JavaScript, AJAX, image optimization, motion graphics, Flash, Director, Shockwave, sound engineering, digital video compression, PHP, and ASP). Chris has a passion for and a commitment to conceiving, creating, and delivering the best possible user experience, regardless of the medium.
Course Title   Level   Duration   Released  
Create an Interactive Map with jQuery and Dreamweaver Intermediate 1h 12m 08/2011  {8}
Create an Interactive Homepage Marquee with jQuery and Dreamweaver Intermediate 1h 34m 05/2011  {8}
Create an Interactive Photo Gallery with jQuery and Dreamweaver Intermediate 1h 55m 04/2011  {8}
Set a Marquee to Autoplay with jQuery Intermediate 36m 43s 06/2011  {8}
Set a Marquee to Autoplay with jQuery and Dreamweaver Intermediate 38m 22s 06/2011  {8}
Create an HTML5 Video Gallery with jQuery Intermediate 59m 53s 07/2011  {8}
Create an Animated Bar Chart with jQuery Intermediate 39m 36s 12/2011  {8}
Create an HTML5 Video Gallery with jQuery and Dreamweaver Intermediate 1h 10m 07/2011  {8}
Create a Rotating Carousel with jQuery Intermediate 51m 13s 02/2012  {8}
Create an Expandable FAQ Listing with jQuery Intermediate 40m 18s 04/2012  {8}
Create Animated Rollovers with jQuery and Dreamweaver Intermediate 28m 13s 10/2011  {8}
Create Animated Rollovers with jQuery Intermediate 29m 26s 10/2011  {8}
Create an Interactive Map with jQuery Intermediate 47m 38s 09/2011  {8}
Create an Interactive Homepage Marquee with jQuery Intermediate 46m 49s 03/2012  {8}
Create an Expandable FAQ Listing with jQuery and Dreamweaver Intermediate 41m 47s 04/2012  {8}
Create an Animated Bar Chart with jQuery and Dreamweaver Intermediate 46m 35s 12/2011  {8}
Create a Rotating Carousel with jQuery and Dreamweaver Intermediate 58m 47s 02/2012  {8}
Create an iPad Web App Beginner 1h 27m 06/2012  {8}
Create and Embed a Photo Gallery in a PDF Intermediate 11m 30s 05/2012  {8}
Add a Wraparound Effect for a Marquee with jQuery Intermediate 35m 51s 05/2012  {8}
Add a Wraparound Effect for a Marquee with jQuery and Dreamweaver Intermediate 41m 46s 05/2012  {8}
Add a Video to an iBook for iPad Intermediate 11m 22s 06/2012  {8}
Add Your jQuery Project to a Digital Magazine Intermediate 16m 43s 06/2012  {8}
Create Navigation Menus with jQuery and Dreamweaver Intermediate 25m 49s 08/2012  {8}
Create Navigation Menus with jQuery Intermediate 24m 1s 08/2012  {8}
Create a Tooltip with jQuery Intermediate 54m 23s 08/2012  {8}
Create a Tooltip with jQuery and Dreamweaver Intermediate 54m 15s 08/2012  {8}
Create a Sliding Tabbed Panel with jQuery and Dreamweaver Intermediate 1h 6m 10/2012  {8}
Create a Sliding Tabbed Panel with jQuery Intermediate 58m 25s 10/2012  {8}
Edge Animate Essential Training Beginner 3h 52m 06/2013  {8}
Creating a Responsive Web Design Beginner 1h 31m 10/2012  {8}
Create an Animated Star Field with Edge Animate Appropriate for all 42m 6s 12/2012  {8}
Create a Sortable Photo Gallery with jQuery Intermediate 1h 50m 03/2013  {8}
Create a Homepage Marquee with Edge Animate Intermediate 1h 8m 03/2013  {8}
Design the Web: Layer Comps Intermediate 20m 51s 02/2013  {8}
Design the Web: Smart Objects Beginner 29m 2s 03/2013  {8}
Design the Web: Clipping Masks Beginner 17m 29s 01/2013  {8}
Design the Web: Video Graphics and Animation Beginner 24m 44s 04/2013  {8}
Design the Web: Simulating Web Text Beginner 12m 25s 04/2013  {8}
Creating an Animated Infographic with Edge Animate Beginner 36m 3s 04/2013  {8}
Create an Interactive Animated Timeline with jQuery Intermediate 1h 7m 07/2013  {8}
Design the Web: Sprite Sheets Beginner 20m 49s 07/2013  {8}

Are you sure you want to delete this bookmark?

cancel

Bookmark this Tutorial

Name

Description

{0} characters left

Tags

Separate tags with a space. Use quotes around multi-word tags. Suggested Tags:
loading
cancel

bookmark this course

{0} characters left Separate tags with a space. Use quotes around multi-word tags. Suggested Tags:
loading
cancel

Error:

go to playlists »

Create new playlist

name:
description:
save cancel

You must be a lynda.com member to watch this video.

Every course in the lynda.com library contains free videos that let you assess the quality of our tutorials before you subscribe—just click on the blue links to watch them. Become a member to access all 104,069 instructional videos.

get started learn more

If you are already an active lynda.com member, please log in to access the lynda.com library.

Get access to all lynda.com videos

You are currently signed into your admin account, which doesn't let you view lynda.com videos. For full access to the lynda.com library, log in through iplogin.lynda.com, or sign in through your organization's portal. You may also request a user account by calling 1 1 (888) 335-9632 or emailing us at cs@lynda.com.

Get access to all lynda.com videos

You are currently signed into your admin account, which doesn't let you view lynda.com videos. For full access to the lynda.com library, log in through iplogin.lynda.com, or sign in through your organization's portal. You may also request a user account by calling 1 1 (888) 335-9632 or emailing us at cs@lynda.com.

Access to lynda.com videos

Your organization has a limited access membership to the lynda.com library that allows access to only a specific, limited selection of courses.

You don't have access to this video.

You're logged in as an account administrator, but your membership is not active.

Contact a Training Solutions Advisor at 1 (888) 335-9632.

How to access this video.

If this course is one of your five classes, then your class currently isn't in session.

If you want to watch this video and it is not part of your class, upgrade your membership for unlimited access to the full library of 2,025 courses anytime, anywhere.

learn more upgrade

You can always watch the free content included in every course.

Questions? Call Customer Service at 1 1 (888) 335-9632 or email cs@lynda.com.

You don't have access to this video.

You're logged in as an account administrator, but your membership is no longer active. You can still access reports and account information.

To reactivate your account, contact a Training Solutions Advisor at 1 1 (888) 335-9632.

Need help accessing this video?

You can't access this video from your master administrator account.

Call Customer Service at 1 1 (888) 335-9632 or email cs@lynda.com for help accessing this video.

preview image of new course page

Try our new course pages

Explore our redesigned course pages, and tell us about your experience.

If you want to switch back to the old view, change your site preferences from the my account menu.

Try the new pages No, thanks

site feedback

Thanks for signing up.

We’ll send you a confirmation email shortly.

By signing up, you’ll receive about four emails per month, including

We’ll only use your email address to send you these mailings.

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

By signing up, you’ll receive about four emails per month, including

We’ll only use your email address to send you these mailings.

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked