IntroductionPreviewing the final project| 00:04 | Hi! This is Chris Converse and this is a
course on creating an animated bar chart.
| | 00:07 | I want to start by opening the exercise
files and showing you the final project
| | 00:10 | we're going to be
creating throughout this course.
| | 00:12 | I'm going to start by
opening the index.html file.
| | 00:15 | What you'll notice when this opens right
away is we have a bar chart in the center here.
| | 00:19 | Each of the bars will animate in
succession, and after each bar animates,
| | 00:23 | will have a label that fades on, showing
us the value of each one of the chart bars.
| | 00:27 | I'll hit Reload on here, so
we can see this one more time.
| | 00:33 | Another technique we're going to use
to build this is going to be a hybrid
| | 00:36 | approach between static
design, and dynamic design.
| | 00:39 | We're going to be using HTML and CSS to
construct the outer shell of the chart,
| | 00:43 | and then we're going to use JavaScript
and jQuery to calculate the height of
| | 00:47 | each one of the bars both in relation
to each other and in relation to the
| | 00:50 | overall height of the chart.
| | 00:52 | This will give us the ability to change
the height, and dimensions of the chart,
| | 00:55 | and have the bars redraw
themselves based on that relationship.
| | 00:59 | To show an example of that working,
I'm going to open up another page here.
| | 01:03 | In the first version, we have the
same chart with changes being made to the
| | 01:06 | overall width of the chart, the number
of bars, and the height of the chart.
| | 01:10 | So if I hit Reload here, I'll get the
exact same animation. The relative heights
| | 01:15 | of each of these items in relation to
the overall chart is changing, and I'll
| | 01:19 | show a second example, and hit Reload of
the same chart again showing more bars,
| | 01:24 | and the overall height being
much less than the taller version.
| | 01:27 | And we can see the bars are drawing
themselves in relation to each other and the
| | 01:30 | height of the overall chart as well.
| | 01:32 | So this gives us a lot of flexibility
through CSS to change parameters of our
| | 01:36 | chart, and not have to go back and
recalculate the individual heights.
| | 01:40 | The other consideration we have in
here is we're using a little bit of CSS3
| | 01:43 | here to create semi-transparency in the
backgrounds and rounded corners on the individual bars.
| | 01:48 | Some of these techniques are not
going to translate to IE 7 and 8.
| | 01:51 | So what we've done here is provided two
sets of CSS alternatives for Internet Explorer.
| | 01:57 | Option one will allow us to use the
semitransparent PNG file to maintain some
| | 02:01 | of that transparency effect that we
have here, and the trade-off to this
| | 02:05 | approach is since we're using a
background PNG, we can't use the individual icon
| | 02:08 | background graphics with the individual bars.
| | 02:11 | Whereas option two gives us the ability
to pick a solid color in the background
| | 02:15 | and still use the background image
to bring in the individual icons.
| | 02:17 | So it's your choice on how you want
this design to translate to IE 7 and 8, and
| | 02:23 | you'll find these files inside of the
Internet Explorer ie.css file that we'll
| | 02:27 | talk about in the next video where we
go through the individual files that are
| | 02:30 | included in the exercise files.
| | 02:32 | So I hope this sounds interesting,
and if so, let's get started with the
| | 02:35 | first movie.
| | Collapse this transcript |
| Using the exercise files| 00:00 | When you download the exercise files
there is going to be three folders and a
| | 00:03 | file inside of there.
| | 00:04 | First is the Art Templates directory.
This has a source Photoshop file with
| | 00:08 | slices intact, so you can actually go in
there and make changes to the bar icons
| | 00:12 | or the background graphic.
| | 00:13 | There is a code snippets file. This has
the HTML markup we're going to be using
| | 00:17 | for the bar chart, and it also has
some starting JavaScript statements, the
| | 00:21 | global variables we're going to use
for our charts that we can start off our
| | 00:24 | jQuery statements with.
| | 00:25 | There is also a Files to start folder.
| | 00:28 | Inside up here, we have a copy of
jQuery and then we have two CSS files;
| | 00:32 | the chart.css file here contains all
of the design and layout that we need
| | 00:37 | to create our chart.
| | 00:38 | It also uses some CSS3 properties,
and as we discussed in the introduction
| | 00:42 | video, there is a chart_ie.css file
that has two alternate design options for
| | 00:47 | designing around the limitations
with IE 7 and 8 in regards to CSS3.
| | 00:53 | Then finally, we have a copy of Final Project.
| | 00:55 | This contains the final project we're
going to be creating throughout the course.
| | 00:58 | So now that we know what's in our
exercise files, in the next movie we'll start
| | 01:01 | by creating the folders
and files for our project.
| | Collapse this transcript |
| Setting up the project folder| 00:01 | To begin our project let's
create a new folder on the desktop.
| | 00:07 | We'll name this myBarChart.
| | 00:11 | Inside of here, let's
create two additional folders.
| | 00:16 | One is going to be called images
and another one called includes.
| | 00:25 | Once these two folders are created,
let's come back to the exercise files.
| | 00:28 | Let's open up the folder called Files
to start. Let's select the three files
| | 00:32 | inside of here, two CSS files and a
copy of jQuery, and just Option+Drag on Mac
| | 00:38 | or Alt+Drag in Windows and copy
into the folders we just created.
| | 00:42 | Now back in the exercise files let's
open up the Art Templates folder, and
| | 00:45 | let's open up template_artwork.psd in Photoshop.
| | 00:49 | Now this Photoshop file has all of the
sliced artwork contained inside of it,
| | 00:53 | so if you don't see the slices you
can come over to the Crop Tool and select
| | 00:56 | the Slice or the Slice Selection Tool.
| | 00:59 | Once you select these, you'll see the
slices showing up inside of Photoshop.
| | 01:02 | I'm going to zoom up here a little bit.
| | 01:04 | Now in order to see this artwork, you
can come over to the Layers Panel and at
| | 01:09 | the very bottom there is a layer
called FPO, which will fill the whole
| | 01:11 | background with gray so we
can actually see the artwork.
| | 01:13 | So on the top here, these are the icons that
we actually place inside of the charting bars.
| | 01:19 | This little box down here is a
semitransparent graphic that we're actually
| | 01:22 | going to use as alternatives inside
of IE 7 and 8 since we don't have CSS3
| | 01:26 | support, and this large graphic down here
is actually the background that we have
| | 01:30 | behind the chart area.
| | 01:32 | So of course, you can come into this
Photoshop file and modify any of this artwork.
| | 01:36 | If you keep your artwork inside of these
slice areas, you can simply save these out.
| | 01:40 | If we double-click using the Slice Selection
Tool, we can actually see how these are named.
| | 01:44 | So what we're going to do here is let's
come over to the Layers Panel, turn off
| | 01:48 | the FPO layer. Come up to the File menu.
Come down to Save for Web & Devices.
| | 01:55 | Let's choose Save.
| | 01:58 | On the desktop we'll choose myBarChart.
| | 02:00 | Let's click the images directory, and
down here under the Slicing options we're
| | 02:04 | going to choose All User
Slices. Then hit Save.
| | 02:11 | We can close and save our file, come
back out to the folder we created on the
| | 02:14 | desktop, and in addition to the three
files that we brought over from the Files
| | 02:18 | to start folder, we'll have the
background.jpg and all the icon graphics and an
| | 02:22 | ie_transparency.png that we can use in our
CSS to recreate our bar chart in HTML and CSS.
| | 02:27 | So now with all of our supporting
files in place, in the next movie we'll
| | 02:31 | create our HTML file and start
bringing in some code snippets.
| | Collapse this transcript |
|
|
1. Starting Your ProjectDownloading and setting up Aptana Studio| 00:00 | In this course we're going to be
coding in a tool called Aptana Studio.
| | 00:03 | You can follow along with any text or
web editor that you choose. Or if you want
| | 00:07 | to download a free copy of Aptana Studio
you can go to aptana.com and download a
| | 00:11 | copy for Macintosh or Windows.
| | 00:13 | When you download and install this
particular editor, one of the things that it
| | 00:17 | has is the capability to change themes.
| | 00:20 | By default Aptana Studio 3
has this really dark background.
| | 00:24 | I'm going to come up to the Aptana
Studio 3 menu on the Mac or you can choose
| | 00:28 | the Preferences under the Window menu
on Windows. Come down to Aptana, come
| | 00:34 | down to Themes, and inside of here I can
change the themes that this is going to be using.
| | 00:39 | For this course I'd like to go back to
Aptana Studio 2.x. This is going to give
| | 00:43 | me a white background and it's going to
let the color coding really show and be
| | 00:46 | a lot easier for you to follow along.
| | 00:48 | Once I've made this
change I'm going to click OK.
| | 00:51 | Now every time I launch Aptana Studio
it's going to use this particular theme
| | 00:54 | inside of the darker background.
| | 00:55 | Now that we have our editor set up, in
the next movie we're going to start by
| | 00:59 | creating a new project and continuing on.
| | Collapse this transcript |
| Creating a new project and an HTML file| 00:00 | Now that we have all of our assets in
place let's come over to Aptana Studio.
| | 00:04 | Now if you'd prefer to take this
course in a more visual tool we have the
| | 00:07 | same course available in the lynda.com
Library using Adobe Dreamweaver instead of Aptana.
| | 00:13 | And once Aptana loads we're going to
come up to the File menu, choose New,
| | 00:17 | and then Web Project.
| | 00:22 | We're going to call this my Bar
Chart, uncheck the Use default location
| | 00:26 | checkbox, choose Browse. Let's go to
the desktop and choose the myBarChart
| | 00:31 | folder that we just created on the desktop.
| | 00:34 | Click Open. This little warning
here is going to let you know that
| | 00:38 | Aptana sees that there are files already
in this particular folder. We'll choose
| | 00:42 | Finish to have those added to the project.
| | 00:45 | Now on the left-hand side I can see
all of the images and includes that we
| | 00:48 | created earlier in the course.
| | 00:50 | So the first thing we're going to do
here is choose File > New From Template > HTML,
| | 00:56 | and let's come down and create a
brand-new XHTML Transitional Template.
| | 01:01 | Once this is created let's choose File >
Save As. We'll call this chart.html and
| | 01:08 | we'll put this in the
myBarChart folder then click OK.
| | 01:13 | Next thing we're going to want to do
let's choose File > Open, and from the
| | 01:17 | exercise files on the desktop
let's open the code_snippets.html file.
| | 01:22 | So since the main focus of this
course is the actual animation process of
| | 01:26 | animating a sequence of
elements inside of jQuery.
| | 01:29 | I've gone ahead and set up some of the html
markup in CSS to get us past the layout phase.
| | 01:34 | So let's come up here into the code
snippets and select all of the markup for
| | 01:39 | the debugging area in the chart.
| | 01:41 | Let's copy this to the Clipboard. Let's
switch over to chart.html. Inside of the
| | 01:46 | body tag here let's hit a Return
and let's paste in all that markup.
| | 01:53 | I'm going to come in here and
get rid of these comments as well.
| | 01:59 | And this is going to give us all of
the markup that we're going to need to
| | 02:01 | create the debugging area so that we can
see the global variables that we've set
| | 02:05 | and all of the markups for the chart container.
| | 02:07 | So at this point I want to bring up a
sketch, move the code over here, and based
| | 02:13 | on the sketch that we have for our
layout we can see that the overall chart
| | 02:16 | container area is going to encompass
all of the divs that are going to make up
| | 02:20 | our chart, then we're going to have an
area for the Y Axis. We're going to have
| | 02:23 | an area for the chart area, which is
actually going to be the place where we
| | 02:27 | calculate the height of all of the bars.
And we're going to have an area for the
| | 02:30 | X Axis which is going to give us the
ability to put labels that relate to the
| | 02:33 | individual bars based on the
HTML markup that's in this page.
| | 02:36 | So I'll move my window back,
let's choose File > Save.
| | 02:42 | Now that we have all of the markup and
CSS in place, in the next movie we'll add
| | 02:45 | additional HTML that we'll
use for the bars of the chart.
| | 02:48 |
| | Collapse this transcript |
| Adding markup for chart bars| 00:00 | Now the bars of our chart are actually
going to be created out of div elements,
| | 00:04 | and so what we're going to do is inside
of the chart-area div let's hit a return
| | 00:08 | and let's add some divs inside of here.
| | 00:10 | So I'll start the first div tag, div
space, and the first attribute is going to
| | 00:15 | be an attribute that we make up, call bar-value.
| | 00:21 | We're going to set that equal to, two
quotes then 376 as the value, hit a space.
| | 00:28 | Label equals two quotes, again another
variable we're making up.
| | 00:35 | We'll call this Sporting, hit a space.
| | 00:37 | Next we'll type class, this is going to
equal chart-bar then a space and add
| | 00:47 | a second class called sporting,
and we'll end that div tag.
| | 00:54 | So what we're doing here is adding in
the sporting class and the chart-bar class
| | 00:58 | to this particular div and bar value
is going to be the height that that bar is
| | 01:01 | going to animate to, and the label
Sporting is going to be what we're going to
| | 01:05 | add to the X Axis when we generate
the different bars across the chart.
| | 01:08 | Now to save us a little time,
let's come over to code snippets.
| | 01:13 | After the bar-chart markup I have
additional snippets for the additional bars,
| | 01:19 | so let's come in here and copy all of
these divs. Copy to the Clipboard, back to
| | 01:23 | chart.html. After this sporting div we
just created hit a return and paste in
| | 01:30 | all of the additional divs.
| | 01:35 | So now we have all of the divs that are
going to constitute all of the bar charts.
| | 01:38 | Now with all of our markup complete
in the next movie we'll hook in our CSS
| | 01:41 | and JavaScript files.
| | Collapse this transcript |
|
|
2. Linking CSS and JavaScript to Your HTML DocumentAdding jQuery and CSS to your HTML document| 00:00 | Now at this point we want to hook
in our CSS and JavaScript files.
| | 00:04 | So let's scroll up to the top of the
document, and then come in here and get rid
| | 00:08 | of some of that white space.
| | 00:09 | After the title attribute inside of the
heading area we're going to start typing
| | 00:13 | a link tag, hit a space, attribute of
relationship, equals stylesheet.
| | 00:21 | Hit a space, type, it's going to be text/
css, hit space and then href.
| | 00:35 | That's going to equal, start typing includes,
code completion will come up showing us
| | 00:39 | that folder, includes/chart.css.
| | 00:44 | Now we want to create a conditional
statement only for Internet Explorer if it's
| | 00:47 | less than version 9 so that we can use
those CSS alternative designs since IE7
| | 00:52 | and 8 don't support some
of the CSS3 we're using.
| | 00:55 | So we're going to start by creating an
HTML comment, beginning tag, Exclamation
| | 00:59 | Point, two hyphens, and then two
hyphens and then close the tag.
| | 01:03 | Let's come in there and
split that across two lines.
| | 01:08 | On the first line let's add in two
square brackets and an ending tag. Inside of
| | 01:13 | the square brackets we're going to
type if lt IE 9, before the ending HTML
| | 01:20 | comment let's add another beginning
tag, two square brackets and type endif.
| | 01:28 | So now this statement is only going to
be seen by Internet Explorer and if it's
| | 01:31 | less than version 9 what we want to
do is add in our chart IE CSS file.
| | 01:35 | So let's come up here to line eight.
Let's copy that entire link element. Let's
| | 01:42 | paste it on this line here and
let's change chart to chart_ie.css.
| | 01:48 | Now after this conditional statement let's
hit a return, let's bring in our jQuery file.
| | 01:52 | So let's start by typing a script tag,
type is going to be text/javascript,
| | 02:02 | source it's going to be equal, start typing
includes, let's come down and choose jQuery.
| | 02:10 | Now in the next line we want to bring
on our own custom JavaScript that we're
| | 02:13 | going to be scripting inside up, although
we haven't actually created that file yet.
| | 02:16 | So let's come up to the
File menu, choose New From Template >
| | 02:19 | JavaScript > JavaScript Template.
Let's choose File > Save As, let's save
| | 02:29 | that into the Bar Chart's folder,
inside of includes and we'll call this
| | 02:35 | chart.js, and hit OK.
| | 02:40 | Let's come back to our chart.html file.
Let's create a link over to this file,
| | 02:44 | script type="text/JavaScript"
source equals, type in for includes, grep
| | 02:59 | chart.js, and hit File Save.
| | 03:02 | So now we have our CSS files in place
the chart IE CSS being inside of an HTML
| | 03:08 | conditional statement
that only IE will understand.
| | 03:10 | Our jQuery JavaScript file and our own
custom chart.js file which we're going to
| | 03:14 | be writing our custom scripts into.
| | Collapse this transcript |
|
|
3. Global Variables and Custom FunctionsDeclaring and setting global variables| 00:00 | Now the first thing we're going to
add to our JavaScript file is a series
| | 00:02 | of global variables.
| | 00:04 | So let's switch over to code_snippets
and inside the code_snippets, let's scroll
| | 00:07 | down to the JavaScript Snippets and
under section 1 we have a series of
| | 00:11 | variables that we're going to be declaring.
| | 00:13 | Let's select all of
these variables and hit copy.
| | 00:16 | Switch over to chart.js. Hit a few
returns and let's paste these variables in.
| | 00:22 | So what these variables are going to do
is they're going to set up some global
| | 00:25 | properties that we're going to be
hooking on to with our jQuery in order to
| | 00:28 | figure out the scale of the chart like
we looked at in the introduction video
| | 00:32 | and be able to space out the bars
and animate them to specific heights.
| | 00:35 | So now with these variables in place, let's
start by creating the document ready in jQuery.
| | 00:40 | So we'll start with the dollar sign,
beginning and ending parenthesis inside of
| | 00:44 | the parenthesis, I'll type document.
| | 00:47 | Outside of the parenthesis .ready
beginning and ending parenthesis semicolon.
| | 00:53 | Inside of the ready, we're going to
type function beginning and ending
| | 00:58 | parenthesis, beginning and ending
bracket, let's put the bracket open.
| | 01:03 | So this is jQuery's document ready function.
| | 01:05 | Once all of the HTML is ready, we
know that all of the HTML and the browser
| | 01:09 | DOM or Document Object Model and we can then
begin to manipulate or query the HTML elements.
| | 01:15 | Let's switch back over to code_snippets.
Let's go into section 2 and let's
| | 01:19 | select all of these variable
declarations here and copy to the clipboard, switch
| | 01:24 | to chart.js and then paste them in.
| | 01:27 | So what each one of these is doing is it's
targeting the global variables. So we have window.
| | 01:32 | in front of each of the variable names,
and what we're doing is setting chart
| | 01:35 | height, for example, to the chart area's
heights and converting that into a number.
| | 01:41 | So up here the chart height variable
is going to be set to whatever the chart
| | 01:46 | height is and we're using jQuery
here to query each of these elements.
| | 01:49 | So all of these elements are going to
go into the document object model, query
| | 01:52 | those items and then
populate those global variables.
| | 01:55 | Let's choose File > Save.
| | 01:56 | Now that we've all of our global
variables defined, in the next movie, we'll
| | 01:59 | start by creating our first custom function.
| | Collapse this transcript |
| Writing a custom function to position the bars| 00:00 | Now that our global variables are
being defined once the document ready has
| | 00:03 | triggered, let's add a few lines after
the document ready and let's create a
| | 00:07 | first custom function.
| | 00:10 | So let's type function, space, positionBars.
| | 00:16 | That's going to be the name of our
function, beginning and ending parenthesis,
| | 00:19 | beginning and ending bracket.
Let's split that open on the bracket.
| | 00:23 | So inside of here, what we're going to
do first is figure out how many times we
| | 00:28 | see chart-bar inside of the chart-area.
| | 00:31 | So if we switch back to our HTML really quick;
| | 00:34 | inside of here we have all of the chart-bar
classes defined to each one of these
| | 00:40 | divs inside of the chart-area.
| | 00:42 | So what we're going to do over here in
jQuery is run in each statement, pick out
| | 00:47 | each time we find that particular instance.
| | 00:49 | So let's add a dollar sign, beginning
and ending parenthesis, two tick marks
| | 00:54 | inside, first string literal, dot chart-
area which is targeting the parent div
| | 01:01 | space dot chart-bar.
| | 01:06 | Outside the parenthesis we're going
to type dot each beginning and ending
| | 01:11 | parenthesis, then a semicolon.
| | 01:12 | So we're looking for each one of these items.
| | 01:16 | Inside of the each, we're going to
type function beginning and ending
| | 01:20 | parenthesis, beginning and ending bracket.
| | 01:22 | Let's split that open on the brackets.
| | 01:25 | Let's go back inside of the
parenthesis per function and type in index.
| | 01:29 | What this is going to do is count each
time it finds one of these items,
| | 01:33 | chart-bar inside of chart-area.
| | 01:36 | So the first thing we're going to do is
set a variable inside of this function
| | 01:38 | called barPosition.
| | 01:42 | We're going to set that equal to, let's
type beginning and ending parenthesis,
| | 01:48 | let's type window.barWidth
asterisk for times, the index.
| | 02:01 | Outside of the parenthesis we're
going to type a plus sign, beginning and
| | 02:05 | ending parenthesis again.
| | 02:07 | Inside up here, we're going to type
index * window.barSpacing and outside of the
| | 02:18 | parenthesis we're going to add, let's
grab barSpacing, copy that, paste it and
| | 02:25 | then hit a semicolon.
| | 02:27 | So what we're doing here is setting up
a variable each time this function runs
| | 02:30 | that's taking the width of the bar
setting which it's getting from the CSS file.
| | 02:34 | Multiplying it times the index which
is the number of times this has run and
| | 02:38 | then adding the index times the
window barSpacing and then we're adding the
| | 02:43 | barSpacing to each one of these pieces.
| | 02:44 | What that's going to do is the first bar
that runs that the index is going to be 0.
| | 02:47 | It's going to set it to the width
plus the space and the second time it
| | 02:50 | runs, index will be 1 times the
barWidth and this will account for all of the
| | 02:54 | individual spacing and each one of the
bars will be placed across the chart-area.
| | 02:58 | Now that we have the variable in
place, let's hit dollar sign, beginning
| | 03:02 | and ending parenthesis.
| | 03:04 | This inside of the parenthesis,
.CSS, beginning and ending
| | 03:10 | parenthesis semicolon.
| | 03:12 | Inside of the parenthesis, two tick
marks for a string literal. We're going to
| | 03:16 | type left, then a comma barPosition +
two tick marks for a string literal, PX.
| | 03:27 | Now each one of the chart-bars is
absolute positioned, so this is going to go
| | 03:31 | into each one of those items and set
the left CSS property to whatever the bar
| | 03:36 | position is that we just calculated here.
| | 03:38 | Now that that's complete, let's hit File >
Save.
| | 03:40 | Now the last thing we need to do before
we can test this is let's come up here
| | 03:44 | and grab positionBars function.
| | 03:47 | Let's copy the name and the parenthesis.
Inside of the document ready, after we
| | 03:51 | declare the last variable, let's
paste in this function and then put a
| | 03:55 | semicolon after it.
| | 03:56 | So after all of the window
declarations are declared on the document ready,
| | 04:00 | we're going to run position bars which
is going to come down here, search for
| | 04:03 | each chart-bar inside of chart-area,
calculate the position and then set the CSS
| | 04:07 | of each one of the items.
| | 04:08 | Let's choose File > Save, let's come up
to the chart.html. Let's come down to
| | 04:13 | Commands > HTML > Open in Default Browser.
| | 04:17 | So now we can see each one of the bars
being positioned across the chart
| | 04:20 | area and the spacing is being picked
up from the spacing variable and the
| | 04:23 | width of each chart is being picked up
and calculated when we run this across
| | 04:27 | the chart-area axis.
| | 04:28 | Now that the bars are being positioned
properly across the chart-area based on
| | 04:32 | the width and the spacing, in the
next movie we'll add in paragraph tags
| | 04:36 | inside of the divs for the bars to
show their values and we'll add the labels
| | 04:40 | across the X axis as well.
| | Collapse this transcript |
| Adding label and value text to the bars| 00:00 | So the first thing we want to do is
put a paragraph tag inside of each one of
| | 00:02 | the chart-bar divs and put
the value inside of the p tag.
| | 00:06 | So let's add another line after
the this.CSS jQuery statement.
| | 00:10 | Let's create another jQuery statement,
| | 00:14 | $(this).html();.
| | 00:24 | Inside of the parentheses, we're
going to type two tick mark for a string
| | 00:26 | literal, we're going to put a p tag.
| | 00:30 | After the string literal but still
inside of the parenthesis, we're going to
| | 00:34 | type a plus sign, another jQuery statement,
| | 00:39 | $(this).attr for attribute('bar-value').
| | 00:56 | Outside of the parenthesis we're going
to type a plus sign, two tick marks for a
| | 00:59 | string literal, and then we're
going to end the paragraph tag.
| | 01:03 | Next we're going to add a paragraph tag
inside of each one of the chart X axis,
| | 01:07 | so that we can line those up on
the X axis right underneath the bars.
| | 01:10 | So let's type a $('.chart-x-axis').append();.
| | 01:28 | So what append is going to do is
add each one of these items into the
| | 01:31 | chart-x-axis to the last item that we added.
| | 01:34 | So it's going to continue to
append each one of these items.
| | 01:38 | So for every chart-bar found in chart
area, we're going to get another set of
| | 01:41 | HTML inside of chart-x-axis.
| | 01:44 | Now what we're going to add inside
of here is two tick marks for a string
| | 01:46 | literal, create a paragraph tag outside
of the string literal, but still inside of
| | 01:51 | the parenthesis, we're going
to type +, jQuery statement,
| | 01:55 | $(this).attr('label').
| | 02:09 | Outside of the first side of
parenthesis, +, string literal, and the
| | 02:16 | paragraph tag.
| | 02:18 | So now we're going to get a paragraph
tag in the chart-x-axis for every chart
| | 02:21 | bar that's found inside of the chart area.
| | 02:23 | Now we're going to need to position these.
| | 02:25 | So let's come back inside of the paragraph tag.
Let's hit a space, let's type style="".
| | 02:34 | Inside of the quotes, we'll type left:Xpx;.
| | 02:44 | So now that we know that the syntax is
correct, let's come back and let's delete
| | 02:47 | that X, let's put a single tick
mark, two plus and another tick mark.
| | 02:52 | So now we're going to concatenate in a
calculation, so that we can set the left
| | 02:58 | in relation to the bar-charts position
that we've set in the statements above.
| | 03:02 | So to calculate where this is going to go
we're going to put parentheses inside
| | 03:06 | of here. We're going to type
barPosition and then we're going to subtract,
| | 03:13 | let's put another set of parenthesis inside
of here, window.barWidth divided by 2.
| | 03:22 | So as each one of these runs and we add
a paragraph tag inside of chart-x-axis,
| | 03:26 | we're going to set the left property of
each one of those paragraph tags to the
| | 03:29 | barWidth divided by 2 and then we're
going to subtract bar-position from that.
| | 03:34 | Now each one of the paragraph tags in
our CSS has the text aligned to center.
| | 03:39 | So this is going to give us the labels
directly underneath each one of the bar-charts.
| | 03:43 | To test this, let's choose File > Save.
Let's switch over to chart.html, come to
| | 03:47 | Commands > HTML > Open in Default Browser.
| | 03:52 | So now we can see down here that each
one of these items is getting a paragraph
| | 03:55 | tag with the value, so we can see the
value of each one of these charts, and we
| | 03:58 | can see the paragraph tags underneath
aligning perfectly with the chart that's
| | 04:02 | being placed above in the chart area.
| | 04:04 | So at this point, we have the bars
positioned properly, we have the value
| | 04:08 | showing up inside each one of the
bars and we have the labels in the X axis
| | 04:11 | aligning to the position of each of
the bars that we set in the chart area.
| | 04:15 | In the next movie, we have to calculate
one more global variable before we can
| | 04:18 | start the animation of the bars.
| | Collapse this transcript |
| Figuring out which bar has the highest value| 00:00 | Now back in our JavaScript file we are
going to need to calculate the maximum
| | 00:03 | value of all of the different chart-bars
that are inside of the chart area.
| | 00:07 | So inside of the each statement, inside
the positionBars function, let's declare
| | 00:11 | a variable var barValue. I am going
to set that equal to, I am going to type
| | 00:21 | Number, beginning and ending parenthesis,
semicolon, this is a JavaScript statement.
| | 00:26 | Inside of here we are going to put a
jQuery statement, dollar sign beginning and
| | 00:31 | ending parenthesis, this, inside of the
parenthesis, .attr beginning and ending
| | 00:38 | parenthesis, two tick marks
for a string literal, bar-value.
| | 00:45 | So what number is doing here is it's
making sure that JavaScript pulls the
| | 00:49 | bar-value out and treats this as an
integer, so that we can do some math
| | 00:52 | calculations with it.
| | 00:54 | So after bar-value let's hit a return.
| | 00:56 | What we are going to do is we are
going to type if, beginning and ending
| | 01:00 | parenthesis, beginning and ending
bracket. Let's split the brackets open,
| | 01:06 | inside of the if statement we want to check
and see if barValue, that we just declared
| | 01:12 | above, is greater than window.maxValue,
and inside of the brackets that we want
| | 01:23 | to set window.maxValue = barValue.
| | 01:31 | So each time this runs if the barValue
that we've just calculated is greater
| | 01:35 | than the last time we set the max
value, then we are going to know what the
| | 01:39 | highest value is of all of the
different bars. And if a value comes up later on
| | 01:43 | that's less than this, than this
particular instruction won't run.
| | 01:47 | Let's hit a semicolon after barValue.
Now in the next line we want to type
| | 01:52 | window.valueMultiplier, and that's
going to be equal to window.maxValue /
| | 02:07 | window.highestYlabel, semicolon.
| | 02:14 | This is going to give us the amount
that each one of the bars is going to be
| | 02:17 | divided by in order to get the height
to be relative to its number versus the
| | 02:22 | actual chart height.
| | 02:24 | With that complete let's choose File > Save.
| | 02:26 | Now in the next movie we have all of
the variables in place that we need to
| | 02:29 | create our animations.
| | Collapse this transcript |
|
|
4. Calculating and Animating the BarsAnimating the bars based on their value| 00:00 | Now to animate the bars of our chart
we are going to create a new function.
| | 00:03 | So after the function positionBars I
will type function, space, animateChart,
| | 00:14 | beginning and ending parentheses, beginning
and ending bracket. Split the brackets open.
| | 00:20 | Now inside of the animateChart function
we are going to type a jQuery statement,
| | 00:23 | dollar sign, parenthesis, two
tick marks for a string literal,
| | 00:27 | .chart-area, space, .chart-bar.
| | 00:37 | After the parenthesis we are going
to type .each, beginning and ending
| | 00:41 | parentheses, semicolon.
| | 00:44 | Inside of the each statement we are
going to type function, beginning and ending
| | 00:49 | parentheses, beginning and ending bracket.
| | 00:53 | Split that function open. So we are
going to search for each of the chart bars
| | 00:57 | inside of the chart area, and when we
find each one the first thing we are going
| | 01:01 | do is set a variable.
| | 01:03 | So var, space, revisedValue, we are
going to set that equal to, we're going to
| | 01:12 | type Number, beginning and ending
parentheses, semicolon. Inside of Number we are
| | 01:18 | going to put a jQuery statement, dollar
sign, beginning and ending parentheses,
| | 01:22 | this inside of the parenthesis.
| | 01:25 | Outside of the this parenthesis, but
still inside the Number parenthesis .attr
| | 01:32 | beginning and ending parentheses, tick
marks inside of the parenthesis for the
| | 01:35 | attribute, bar-value. Outside of the
parenthesis for Number, we are going to put
| | 01:44 | an asterisk to multiple
this times window.chartScale.
| | 01:52 | So what this is going to do is every
time we find a chart-bar we are going to
| | 01:55 | pick out the value and
multiply it by the revised value.
| | 01:58 | This is going to give us the height as that
number relates to the overall chart height.
| | 02:04 | On the next line we are going to
type a jQuery statement, dollar sign
| | 02:07 | parenthesis, this outside the
parenthesis .animate, beginning and ending
| | 02:15 | parentheses, semicolon.
| | 02:16 | Inside of the parenthesis we are going
to add a beginning and ending bracket.
| | 02:21 | Inside of the brackets we are going to
type height:revisedValue. Outside of the
| | 02:32 | brackets but inside of the parenthesis
for animate we are going to put a comma
| | 02:37 | and put it at a 1000 milliseconds.
| | 02:39 | So after we find every one of the
chart-bars and multiply the value by the
| | 02:43 | revised value, we are going to use this
line here to animate the new height of
| | 02:46 | each one of the charts over the course
of a 1000 milliseconds or one second.
| | 02:51 | Now before we can test this we need
to run this function so let's come up
| | 02:54 | here and copy animateChart function,
copy that to the clipboard and inside of
| | 02:59 | positionBars after the each statement
let's paste animateChart and put a semicolon.
| | 03:07 | Let's save our work, let's switch
over to chart.html. Let's come down to
| | 03:11 | Commands > HTML > Open
in Default Browser.
| | 03:18 | Now we see in the browser every one of
the bars will actually animate to their
| | 03:21 | relative value, relative to each other and
relative to the overall height of the chart.
| | 03:25 | Now you may notice that all of the
bars animated at the same time. The values
| | 03:29 | inside of the bars are visible the whole time
and the bars didn't actually start from zero.
| | 03:34 | So in the next movie we will add in a
few finishing touches for this animation.
| | Collapse this transcript |
| Fading in bar value labels after the bar animations| 00:00 | Now the changes I want to make to
the animating bars is I want the bars to
| | 00:03 | animate from 0, and once they animate
to their height, I want to fade in the
| | 00:08 | labels on the bars that represent their value.
| | 00:10 | So in order to do that we need
to make some changes in the CSS.
| | 00:14 | So let's open chart.css, and the two
changes we are going to make at the
| | 00:19 | bottom, on chart-area chart-bar p. We are
going to set these, default state to display none.
| | 00:29 | So display: space none.
| | 00:32 | That way all of the paragraphs that
are being injected into the bar-charts,
| | 00:35 | when we are running our first each
statement will not be displayed at all.
| | 00:39 | The second thing we are going to change
is under chart-area chart-bar, we have
| | 00:43 | the default height of these set to 50.
| | 00:45 | Let's change that back to 0. Let's hit save.
| | 00:49 | Let's go over to chart.js.
| | 00:51 | Now back in our JavaScript function
on our each statement, inside of the
| | 00:55 | parentheses for function,
we are going to type index.
| | 00:59 | After the variable for revised
value, we are going to create a new
| | 01:02 | variable called newDelay.
| | 01:06 | We are going to set this equal to 125*index.
| | 01:13 | So what we're doing here is creating a
delay of 125 times of whatever the index
| | 01:18 | is, and setting a custom
delay for each one of the bars.
| | 01:21 | Now in order to use this, let's get
our cursor after the parentheses for this
| | 01:26 | on the next statement, .delay().
| | 01:32 | This is a jQuery statement for delay.
| | 01:33 | We are going to copy the newDelay variable
name and paste it inside of the parentheses.
| | 01:39 | Now that the bars are going to animate
one at a time, let's come after the 1000
| | 01:43 | milliseconds inside of the animation
area here inside of the parentheses.
| | 01:46 | We are going to type a comma, type
function, beginning and ending parenthesis,
| | 01:53 | beginning and ending
bracket, let's split that open.
| | 01:56 | Putting a function inside of the animation
area here is what's called a callback function.
| | 02:00 | So this function is not going to run
until after this animation has happened.
| | 02:04 | So inside of the callback function,
what we want to do is animate those
| | 02:07 | paragraph tags back up, so we can see them.
| | 02:09 | So we are going to start by
typing $(this).children.
| | 02:18 | We are going to search inside of
each one of the chart-bars, put our
| | 02:23 | parentheses, string literal, type the
letter p, we are going to look for that
| | 02:27 | paragraph tag that we injected
into each one of the chart-bars.
| | 02:31 | When we find that paragraph tag,
outside of the parentheses, type .delay(), 500
| | 02:41 | milliseconds or half a second.
| | 02:43 | Outside of those parentheses,
we are going to type .fadeIn.
| | 02:48 | This is a built-in jQuery animation
feature, it will take the display
| | 02:51 | none of the paragraph, and
actually fade it in. Beginning and ending
| | 02:54 | parentheses, semicolon, and inside of
the fadeIn, we will put 250 milliseconds
| | 03:00 | or quarter of a second.
| | 03:01 | Let's choose File > Save.
| | 03:03 | Let's go over to chart.html, come up to
Commands and let's preview this in our browser.
| | 03:11 | So now we will see each of the charts
start from 0, they animate up and when
| | 03:14 | the chart is finished animating, the
label inside of the bars that represent
| | 03:19 | the value will fade in.
| | 03:21 | I'll hit Reload to watch this again.
| | 03:25 | Now that completes animating our bar-chart.
| | 03:28 | In the next movie, I will show you
where we can make adjustments to our CSS to
| | 03:31 | change the height of the chart area
and we can see the calculations will
| | 03:35 | actually adjust themselves, so that the
bars will always animate in relation to
| | 03:38 | each other and in relation to the chart height.
| | Collapse this transcript |
|
|
5. Resizing the Chart via CSSAdjusting chart size by updating CSS values| 00:00 | Now to demonstrate the chart working
with different heights, let's come back to
| | 00:03 | chart.css, and we are going to
change a couple of rules inside of here.
| | 00:07 | So the first rule we are going to
change is under chart-y-axis, we are going to
| | 00:10 | change the height from 300 to 150 pixels tall.
| | 00:15 | On the chart-x-axis, we are going
to set the top to 150 instead of 300.
| | 00:20 | That's the absolute
position value of the x-axis.
| | 00:24 | Lastly let's come in and change the
height of chart-area to 150 as well.
| | 00:29 | Let's choose File > Save.
| | 00:30 | Now let's go preview this in a browser.
| | 00:35 | You will see that the chart area is
only 150 pixels tall, and the heights of
| | 00:38 | each one of the bars is in relation to
the overall height of the chart, and in
| | 00:43 | relation to each other based on
the value of each one of the bars.
| | 00:46 | Now as I mentioned in the introduction
video, this is sort of a hybrid between
| | 00:50 | a static design chart, and a
dynamically generated chart.
| | 00:53 | In the next movie, we will talk about
where you might want to go from here, and
| | 00:57 | talk about some data visualization
packages you might want to look at to create
| | 01:00 | charts that are fully dynamically generated.
| | Collapse this transcript |
|
|
ConclusionWhere to go from here| 00:00 | So after you've completed this course, there
are a few directions you might want to head in.
| | 00:04 | One of the first things you might
want to consider is creating another
| | 00:06 | function before the position bars
function that will automatically change the
| | 00:11 | height of the Y axis and the top of the
X axis based on the dimensions you set
| | 00:16 | for the chart area.
| | 00:18 | So just as we set the CSS properties
and the individual paragraph tags in the
| | 00:22 | chart-x-axis area, you can simply
make one single CSS change to the chart
| | 00:27 | area and then position the X and Y
axes based on querying the height, and
| | 00:31 | width of that chart area.
| | 00:32 | That will save you a few steps in
changing things in the CSS file to create
| | 00:36 | different heights as
we've done in the last movie.
| | 00:38 | The other direction you might want
to head in is looking at examples and
| | 00:43 | frameworks available online that
allow you to create charts completely
| | 00:47 | dynamically, where you just do some
of the HTML and CSS and the charting
| | 00:51 | framework will do all of the
calculations and plotting all the different points.
| | 00:54 | So one that I really like is code.google
.com/apis/chart, and you can find this
| | 01:01 | by just simply searching for Google Charts.
| | 01:03 | So they have in here an
entire data visualization package.
| | 01:06 | If we scroll down, we can see we even
have a few different options for how the
| | 01:10 | charts are going to be rendered.
| | 01:12 | HTML5 and SVG for example are going
to give us a lot more capabilities.
| | 01:16 | However they do require newer browsers.
| | 01:18 | So I'm going to come up
here and click Getting Started.
| | 01:21 | All of the ways that we can
use these charts are documented.
| | 01:24 | So here is a pie chart for
example. I can scroll down
| | 01:29 | and we can see some of things
that Google is doing here.
| | 01:31 | For example, using the DataTable,
capabilities of JavaScript, and then setting
| | 01:35 | up a series of paired values.
| | 01:38 | We kind of touched on this by creating
divs with data values inside of the bars,
| | 01:42 | so we were using HTML to create that data.
| | 01:45 | Google is going to use everything inside
of JavaScript in order to create those.
| | 01:49 | Another option I really like is if we
go to the sencha.com web site. Sencha is
| | 01:53 | a framework that has a bunch of capabilities
for both computer screens, and for touch devices.
| | 01:59 | If we scroll down to the Ext Designer
and click on this, they have a full
| | 02:04 | charting capability inside of
their particular framework as well.
| | 02:07 | So I am going to scroll down here a
little bit, and we can see New Ext JS 4
| | 02:11 | Charts are now included in their framework.
| | 02:13 | So again, both Google, Sencha, and a
few other things you might be able to
| | 02:16 | find online will take code base, and
completely dynamically construct the
| | 02:21 | charts, which goes one step beyond
the hybrid approach we did here where we
| | 02:25 | built part of the chart in HTML, and
then calculated the heights and the
| | 02:28 | animations with JavaScript.
| | 02:30 | So I hope this course has inspired
you to go out and play with additional
| | 02:34 | frameworks and start creating charts
that are 100% dynamically generated.
| | Collapse this transcript |
|
|
