Join Chris Converse for an in-depth discussion in this video Where to go from here, part of Create an Animated Bar Chart with jQuery.
So after you've completed this course, there are a few directions you might want to head in.…One of the first things you might want to consider is creating another…function before the position bars function that will automatically change the…height of the Y axis and the top of the X axis based on the dimensions you set…for the chart area.…So just as we set the CSS properties and the individual paragraph tags in the…chart-x-axis area, you can simply make one single CSS change to the chart…area and then position the X and Y axes based on querying the height, and…width of that chart area.…
That will save you a few steps in changing things in the CSS file to create…different heights as we've done in the last movie.…The other direction you might want to head in is looking at examples and…frameworks available online that allow you to create charts completely…dynamically, where you just do some of the HTML and CSS and the charting…framework will do all of the calculations and plotting all the different points.…
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