Join Chris Converse for an in-depth discussion in this video Adjusting chart size by updating CSS values, part of Create an Animated Bar Chart with jQuery.
- View Offline
Now to demonstrate the chart working with different heights, let's come back to…chart.css, and we are going to change a couple of rules inside of here.…So the first rule we are going to change is under chart-y-axis, we are going to…change the height from 300 to 150 pixels tall.…On the chart-x-axis, we are going to set the top to 150 instead of 300.…That's the absolute position value of the x-axis.…Lastly let's come in and change the height of chart-area to 150 as well.…Let's choose File > Save.…
Now let's go preview this in a browser.…You will see that the chart area is only 150 pixels tall, and the heights of…each one of the bars is in relation to the overall height of the chart, and in…relation to each other based on the value of each one of the bars.…Now as I mentioned in the introduction video, this is sort of a hybrid between…a static design chart, and a dynamically generated chart.…In the next movie, we will talk about where you might want to go from here, and…talk about some data visualization packages you might want to look at to create…
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