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. And I'm going to start by
| | 00:13 | opening the index.html file. What you'll
notice when this opens right away
| | 00:17 | is we have a bar chart in the center
here. Each of the bars will animate in
| | 00:21 | succession, and after each bar animates,
we'll have a label that fades on showing
| | 00:25 | 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 | Now the 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 in CSS to
construct the outer shell of the chart,
| | 00:44 | and then we're going to use JavaScript
in jQuery to calculate the height of each
| | 00:47 | one of the bars, both in relation to
each other, and then 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,
| | 01:11 | I'll get the exact same animation,
the relative heights of each of these
| | 01:15 | items in relation to the
overall chart is changing.
| | 01:18 | And I'll show a second example and hit
reload of the same chart, again, showing
| | 01:23 | more bars, 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
| | 01:47 | 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 a semi-
transparent png file to maintain some of
| | 02:01 | that transparency effect that we have
here and the trade off to this approach
| | 02:05 | is, since we're using a background png,
| | 02:07 | we can't use the individual icon
background graphics with 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:19 | 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 first movie.
| | Collapse this transcript |
| Using the exercise files| 00:00 | When you download the exercise files,
| | 00:01 | there is going to be three
folders and a file inside of there.
| | 00:04 | First is the Art Templates directory.
| | 00:06 | This has a source Photoshop file with
slices intact, so you can actually go in
| | 00:10 | there and make changes to the bar
icons or the background graphic.
| | 00:13 | There's a code_snippets file.
This has the HTML markup
| | 00:17 | we're going to be using for the bar-
chart and it also has some starting
| | 00:20 | JavaScript statements, the global
variables we're going to use for our charts
| | 00:23 | that we can start off
our 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 video,
| | 00:43 | there is a chart_ie.css file that has
two alternate design options for designing
| | 00:48 | around the limitations with
IE 7 and 8 in regards to CSS3.
| | 00:53 | And then finally we have a copy of Final
Project. This contains the final project
| | 00:56 | we're going to be creating throughout
the course.
| | 00:58 | So now that we know
what's in our exercise files,
| | 01:00 | in the next movie we'll start 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.
| | 00:26 | 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,
| | 00:43 | let's open the Art Templates folder, and
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 the
| | 00:56 | 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.
Now in order to see this artwork,
| | 01:07 | you can come over to the Layers panel
and at the very bottom there is a layer
| | 01:10 | called FPO, which will fill the
whole background with gray, so we can
| | 01:12 | 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 semi-
transparent 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. So of course
| | 01:33 | 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,
| | 01:38 | you can simply save these out.
If we double-click using Slice Selection Tool,
| | 01:42 | we can actually see how these are named.
| | 01:45 | 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. 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,
| | 02:04 | we're going to choose All
User Slices, then hit Save.
| | 02:08 | 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
JPEG 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,
| | 02:30 | in the next movie we'll create our
HTML file, and start bringing in some
| | 02:33 | code snippets.
| | Collapse this transcript |
|
|
1. Starting Your ProjectCreating new project and HTML files| 00:01 | Now we're ready to create our HTML
page, so let's go over to Dreamweaver.
| | 00:05 | Let's choose File > New.
| | 00:07 | Now if you'd rather take this
course in a code only environment,
| | 00:10 | you can take the same course in the
lynda.com library using Aptana Studio
| | 00:14 | instead of Adobe Dreamweaver.
| | 00:16 | From the New Document dialog box choose
Blank Page on the left-hand side. Choose
| | 00:20 | the page type as HTML, and under
DocType let's choose XHTML Transitional.
| | 00:25 | We want to choose this format so that
the HTML file will be compatible with IE 7
| | 00:29 | and 8, and we're also going to use some
CSS3, and we'll create a CSS alternative
| | 00:34 | for items in CSS3 that are not supported
IE 7 and 8.
| | 00:39 | So with that selected, let's choose
Create.
| | 00:40 | First thing we'll want to do is choose
File > Save. From our desktop
| | 00:47 | make sure we're inside of the myBarChart.
Let's name this chart.html, then hit Save.
| | 00:55 | Now since this is course is really
focusing on animating a sequence of elements,
| | 00:58 | such as bars in a bar-chart in jQuery,
| | 01:01 | I've gone ahead created a few code
snippets to sort of get us to the layout
| | 01:05 | piece quicker. So let's choose from
the File menu > Open. From the desktop
| | 01:11 | let's go to our exercise files and
let's open the code_snippets.html file.
| | 01:18 | So again this just has a bunch of
different code pieces that we can just copy
| | 01:21 | and paste into our HTML so that we are
not focusing so much on HTML and CSS as
| | 01:24 | the jQuery animation piece.
| | 01:27 | So under the very first area here,
Debug markup, as we talked about in
| | 01:31 | the introduction video,
| | 01:32 | this is going to reflect some of the
variables that we set in jQuery, so we can
| | 01:35 | actually see them on the stage.
| | 01:38 | So let's select these and choose
Edit > Copy.
| | 01:40 | Let's come back to the chart.html
file that we just created.
| | 01:43 | Let's hit a few returns inside of
the body tag and simply paste these in.
| | 01:49 | I'm going to hit a tab on the first one
and just format that a little bit.
| | 01:54 | The next set of code we're going to
want to grab is for the bar-chart.
| | 01:57 | So let's go back over to code_snippets.
| | 01:59 | Let's scroll down a little bit
and after the bar-chart comment,
| | 02:02 | let's just grab all of these items here,
| | 02:04 | Command or Ctrl + C to copy to
the clipboard, back to chart.html.
| | 02:11 | After the debug area,
let's hit a few returns and hit paste.
| | 02:15 | So the chart has an outer most div
called chart-container that contains
| | 02:19 | everything for our animated chart.
| | 02:21 | Inside of there we have the chart-title div,
which is going to have an h2 and
| | 02:24 | a paragraph tag. We have another div
called chart-content.
| | 02:28 | Inside of chart-content we're going to
have a Y axis, a chart-area, and an X axis.
| | 02:34 | Inside of the chart-Y-axis is where
we're going to list all of the increments.
| | 02:38 | Inside of chart-area is where we're
actually going to put the bars and actually
| | 02:42 | position the height of those
based on their relative data.
| | 02:45 | In the X axis is where we were
actually going to put all of the labels for
| | 02:47 | the individual bars.
| | 02:48 | So now that we can see the relationship
of the HTML in conjunction with the CSS
| | 02:53 | to the layout that it's going to be creating.
| | 02:55 | In the next movie we'll start creating
the individual divs that are going to
| | 02:58 | be the bars in our bar-chart and then
we can continue on to hooking in our CSS
| | 03:01 | and JavaScript files.
| | Collapse this transcript |
| Adding markup for chart bars| 00:00 | Now all of the bars in the bar-chart
are actually going to be divs, and we're
| | 00:03 | going to style them and size them with CSS,
and then position their heights with jQuery.
| | 00:08 | So what we're going to do is come
inside of the chart area, hit a tab,
| | 00:12 | and we're going to add the div tags
inside of this chart area.
| | 00:14 | So I'll type div, space.
| | 00:19 | Next I want to add an attribute that
we're going to use to determine the value
| | 00:22 | of these. So we'll create an attribute
called bar-value equals two quotes.
| | 00:28 | Inside of here let's give this a
value of 376, let's hit a space.
| | 00:35 | Next let's give it another attribute that
we make up called label equals two quotes.
| | 00:42 | We'll call the Sporting. This is
actually going to be the value that we pull
| | 00:45 | out and actually position on the X axis
with jQuery once we actually position the bars.
| | 00:50 | Next we're going to add a class, class
equals, two quotes, chart-bar,
| | 01:01 | then a space and then sporting.
| | 01:05 | We've classes already made for chart-bar
and sporting which is actually going to
| | 01:09 | put the soccer ball graphic inside of
that particular chart. Once this is done,
| | 01:14 | let's close that tag and
then let's close out the div.
| | 01:20 | Now that we have the first div
in place for the sporting bar,
| | 01:22 | let's go up to the code_snippets and
let's come down here to chart bars markup,
| | 01:27 | and let's select the rest of these,
which includes housewares, shipping,
| | 01:31 | clothing and jewelry.
| | 01:32 | Let's copy these to the clipboard.
| | 01:33 | Let's come back to the chart.html, and
after the sporting div we just created,
| | 01:38 | let's hit a return and
then paste all of these in.
| | 01:43 | I'll just format these a
little bit so they're all lined up.
| | 01:46 | Now that we have all the
markup in place for our bar chart,
| | 01:48 | in the next movie we'll hook
in our CSS and JavaScript files.
| | Collapse this transcript |
|
|
2. Linking CSS and JavaScript to Your HTML DocumentAdding jQuery and CSS to your HTML document| 00:00 | At this point we're ready to hook in
our CSS and JavaScript files that we added
| | 00:04 | earlier in the course. So inside of
Dreamweaver on the chart.html file,
| | 00:08 | let's right-click, choose CSS
Styles and then Attach Style Sheet.
| | 00:14 | Choose Browse.
| | 00:16 | From the desktop, let's go into myBarChart,
| | 00:19 | into the includes directory, and let's choose
chart.css, then click Choose, then say OK.
| | 00:27 | Dreamweaver is going to write up here in
the heading area a link with an href to
| | 00:32 | the includes/chart.css with a
relationship of stylesheet and a type of text/css.
| | 00:39 | Now we do need to add a second CSS file
for IE. So let's right-click,
| | 00:44 | choose CSS Styles > Attach Style Sheet.
| | 00:47 | Let's choose Browse > myBarChart >
includes, and let's grab chart_ie.css.
| | 00:55 | Then hit Choose, then OK.
| | 00:58 | Now that we have two style
sheet references in our document,
| | 01:01 | we want to set up the second one so that
only Internet Explorer will see it.
| | 01:04 | And we can actually use
conditional statements inside of HTML,
| | 01:08 | inside of an HTML comment, so that
only Internet Explorer will see these
| | 01:12 | particular CSS rules.
| | 01:15 | So what we're going to do is add a
line break before and after the link that
| | 01:19 | brings in the second CSS rule, and then
we're going to start by creating an HTML
| | 01:23 | comment, which is less than
sign, exclamation point, two dashes,
| | 01:29 | then we're going to put
two square brackets and we're going to
| | 01:32 | end the tag with a greater than sign.
| | 01:35 | Inside of the square brackets we're
going to type if, space, lt for
| | 01:42 | less than, space, IE9. And then after the
link tag that brings in the second CSS file,
| | 01:50 | we're going to do less than sign,
exclamation point, two square brackets,
| | 01:58 | two hyphens and a greater than sign.
| | 01:59 | That's going to close out the HTML
comment, and then inside of the square
| | 02:03 | brackets we're going to type endif.
So again, this code is only
| | 02:10 | going to be seen by Internet Explorer
and it's only going to
| | 02:13 | be brought into IE if the version of
IE is less than IE 9, since IE 9 does
| | 02:18 | support the CSS3 that we're going
to be using inside of the chart.
| | 02:22 | So now that our CSS files are in place.
| | 02:24 | Let's come up and create
brand new JavaScript file.
| | 02:26 | Let's choose File > New.
| | 02:28 | Let's choose JavaScript from
the Page Type. Let's hit Create.
| | 02:34 | Let's save this right away.
| | 02:35 | Let's choose File > Save.
| | 02:38 | From the desktop let's
choose myBarChart > includes.
| | 02:42 | We're going to call this chart.js,
then hit Save.
| | 02:49 | Let's come back over to chart.html.
| | 02:53 | Let's get our cursor after the HTML
comment that we created. Let's hit return.
| | 02:57 | Now in Dreamweaver's insert menu,
under Common, let's come over and choose
| | 03:01 | the Script item here.
| | 03:03 | Let's choose a Script tag.
| | 03:05 | We're basically going to be
importing a JavaScript file.
| | 03:07 | Let's choose Source.
| | 03:11 | The first file we're going to bring in
is going to be jQuery. Let's hit Choose.
| | 03:15 | Let's click OK, and let's hit a return.
| | 03:19 | Let's come up to the Script item.
| | 03:21 | Let's add a second Script.
| | 03:24 | Let's add the chart.js
file that we just created.
| | 03:26 | Let's hit Choose then say OK.
| | 03:29 | It's always important to make sure
that we bring in the jQuery file first,
| | 03:33 | before we bring in our JavaScript
file that has any jQuery instructions.
| | 03:36 | That way the browser has all of the
jQuery framework loaded so that our jQuery
| | 03:40 | instructions can be understood.
| | 03:42 | So now we have all of the CSS files hooked in.
| | 03:44 | We even have a conditional statement on the
CSS IE for Internet Explorer, and we have
| | 03:48 | jQuery hooked in and our own custom
JavaScript file that is blank at the moment,
| | 03:52 | but we'll start actually
scripting in that in the next movie.
| | Collapse this transcript |
|
|
3. Global Variables and Custom FunctionsDeclaring and setting global variables| 00:00 | Now to begin working with our
JavaScript file let's switch over to chart.js.
| | 00:03 | This is the new blank
JavaScript file we got from Dreamweaver.
| | 00:07 | I'm going to add a few line returns into here.
| | 00:09 | Now the first thing we want to do is
set up a series of global variables, so we
| | 00:12 | can get information about
what's happening inside of our chart.
| | 00:14 | So let's switch over to code_snippets.
html, and down in the JavaScript Snippets
| | 00:19 | area, under section 1, let's select all
of these global variables.
| | 00:24 | Let's copy these to the clipboard, go back
over to chart.js, and then paste them all in.
| | 00:30 | Now these global variables are going
to tell us information about our chart.
| | 00:34 | Things like the highestYlabel that we
are listing on the Y axis, the chart
| | 00:39 | height, the width of the bars, and
the amount of spacing and so forth.
| | 00:43 | So now that we have the global variables set up,
let's start creating some jQuery inside of here.
| | 00:47 | We're going to start by creating the
document ready, so we're going to start
| | 00:51 | with a dollar sign,
beginning and ending parentheses.
| | 00:55 | Inside of the parentheses, we're going
to type document.
| | 00:59 | Outside of document I'm
going to type a .ready.
| | 01:03 | Now one thing you might notice.
| | 01:04 | If you're not using Dreamweaver CS5.5,
then you won't see this code completion
| | 01:09 | label that I see here.
| | 01:11 | That's a new feature that
Adobe added in Dreamweaver 5.5.
| | 01:14 | If you don't have 5.5. you can simply type
in the same thing I'm typing here.
| | 01:18 | So after the (document).ready, beginning
and ending parentheses, semicolon.
| | 01:24 | Inside of the parentheses we're
going to type function, another set of
| | 01:29 | parentheses, beginning and ending
bracket, and inside of the brackets
| | 01:33 | let's split that open.
| | 01:35 | So this is jQuery's built-in way of
testing all of the HTML that's been
| | 01:39 | downloaded to the browser, and
once the browser has all of the HTML,
| | 01:43 | we can start to run our jQuery instructions.
| | 01:45 | I'm going to get my cursor inside of
here, so what we're going to do is use
| | 01:49 | jQuery to go and lock on to all of the
HTML and CSS that relates to our chart,
| | 01:55 | and populate all of the global variables
that we just initiated in the top of the script.
| | 02:00 | So let's go back over to
code_snippets. In section 2,
| | 02:03 | let's select all of these variables here.
Let's copy these to the clipboard.
| | 02:08 | Let's switch back to chart.js, and
let's paste all of these inside of
| | 02:12 | the document ready.
| | 02:13 | So now what is going to happen is
things like chartHeight for example,
| | 02:18 | that variable which is being defined up
here, the value of that is going to be
| | 02:24 | the chart-area class getting the
height value from that, converting that to a
| | 02:29 | number, and then using window.
chartHeight will target these global variables,
| | 02:33 | and the chartHeight will be set to the
height of the chart-area. And throughout
| | 02:38 | all of these individual pieces,
| | 02:39 | we're going to be just picking out
information that's either going to be based
| | 02:42 | on the HTML or the CSS
that's driving the HTML's layout.
| | 02:46 | Now that we have the global variables
in place and we have a document ready,
| | 02:50 | and a jQuery set of instructions that will set
those global variables based on the HTML and CSS,
| | 02:55 | in the next movie we'll be able to
create our own functions and start
| | 02:58 | populating the chart.
| | Collapse this transcript |
| Writing a custom function to position the bars| 00:00 | Now the first function we're going to
create is going to actually take the
| | 00:03 | individual divs that are going to act as our
bars, and position them across the chart-area.
| | 00:08 | So let's go back over to the chart.html
for a moment. So what we're going to be
| | 00:11 | doing is if I scroll down inside of here,
| | 00:14 | inside of chart-area here,
| | 00:16 | we have the five divs that we
pasted in from our code snippets.
| | 00:20 | Each one of these has a different value,
a different label, and they each have
| | 00:24 | an individual CSS rule, in addition
to having a CSS rule called chart-bar.
| | 00:30 | Now we also have a bar spacing
value inside of here as well,
| | 00:33 | that will allow us to control how
far apart the bars are positioned.
| | 00:37 | So what we're going to be doing is
inside of jQuery we're going to look for
| | 00:40 | every div that's got a chart-
bar class inside of chart-area.
| | 00:47 | So let's come back over to chart.js.
| | 00:50 | Let's hit a few returns outside of our
document ready, and let's start by typing
| | 00:56 | function, space, positionBars, beginning
and ending parentheses, beginning and
| | 01:04 | ending bracket.
Let's split the brackets open.
| | 01:09 | And inside of positionBars, the first
thing we're going to do is start by
| | 01:13 | searching for all of the
chart-bars inside of chart-area.
| | 01:15 | So we're going to start with a dollar sign,
beginning and ending parentheses.
| | 01:20 | Inside of the parentheses, two
tick marks for a string literal
| | 01:23 | ('.chart-area .chart-bar').
| | 01:33 | What this is going to do is search for all of
the chart-bars that are inside of chart-area.
| | 01:38 | Outside of the parentheses,
We're going to type .each.
| | 01:41 | We want to search for each one of
those, beginning and ending parentheses,
| | 01:47 | then a semicolon.
| | 01:49 | Inside of each, we're going to type
function, beginning and ending parentheses,
| | 01:56 | beginning and ending bracket.
Let's split that bracket open.
| | 01:59 | Now inside of the parentheses for function,
inside of the each statement,
| | 02:05 | we're going to type index.
| | 02:08 | This is going to tell jQuery to count
each chart-bar class it finds inside of
| | 02:13 | chart-area, and it's going to
stored in the index variable.
| | 02:16 | Every time it finds one it's going to take
index and add one to it.
| | 02:20 | Now inside of our each function, the
first thing we're going to do is declare a
| | 02:23 | variable, var, barPosition.
| | 02:31 | We're going to set that equal to,
beginning and ending parentheses.
| | 02:36 | Inside of the parentheses (window.
barWidth * index) and outside of
| | 02:49 | the parentheses we're going to
add a plus sign, beginning and
| | 02:54 | ending parentheses.
| | 02:55 | Inside of these (index * window.
barSpacing), outside of those parentheses,
| | 03:08 | + window.barSpacing;.
| | 03:18 | So now what's happening is barPosition
variable has been set to whatever the
| | 03:21 | bar width is, times the index, which
is the number of times that each one of
| | 03:25 | these barCharts have been found, and
then we're adding that to the index times,
| | 03:31 | the amount of spacing, so we can
accommodate the amount of spacing for each bar
| | 03:34 | that's been placed. And then we're
adding the spacing after each one of these
| | 03:38 | pieces as well, so that we can account
for every bar, every space plus every bar,
| | 03:44 | that previously was placed, plus the
additional spacing, so that every one of
| | 03:47 | the bars will be spaced based on the
value that we set inside of that attribute.
| | 03:51 | Now that we know what the barPosition
should be, on the next line we'll type
| | 03:56 | dollar sign, beginning and ending
parentheses, the word this inside, so
| | 04:02 | we're going to target the actual item
that was found, .css, beginning and ending
| | 04:08 | parentheses, semicolon.
| | 04:11 | Inside of the css, two
tick marks for a string literal.
| | 04:14 | We're going to type
left,barPosition+,
| | 04:22 | two tick marks for a string literal,
and then px.
| | 04:26 | So now what this is doing is for
every chart-bar class assigned to a div,
| | 04:31 | we're taking each item and setting the
left property, because they're absolutely
| | 04:35 | positioned to whatever the barPosition
that we just calculated up here is, plus
| | 04:41 | px for pixels, so that this new CSS
property gets assigned to that bar.
| | 04:44 | Now to see this working,
| | 04:46 | we're going to come up here and select
positionBars function name, copy that
| | 04:51 | to the clipboard, and inside of the document
ready, after we've declared all of our variables,
| | 04:56 | we're going to paste in that function name.
| | 04:59 | So once the global variables have
been defined in the document ready,
| | 05:02 | it will run the positionBars function and
then position all of the bars. So to test this,
| | 05:08 | let's choose File > Save All, to make sure
all of our JavaScript and HTML files are saved.
| | 05:13 | Let's switch over to chart.html,
then I'm going to choose File > Preview in
| | 05:19 | Browser, and then we can see in the
browser all of the individual bars are now
| | 05:24 | being drawn based on the CSS.
| | 05:26 | They have their individual
background graphics that are being defined in
| | 05:29 | the CSS, and they're positioned
all way across the chart area with 30
| | 05:33 | pixels in between each item.
Now that this is working properly,
| | 05:36 | in the next movie we'll add some HTML
into the divs for the individual bars so
| | 05:40 | we know what the values are, and
we'll add some HTML into the X axis to add
| | 05:44 | labels to these individual bars.
| | Collapse this transcript |
| Adding label and value text to the bars| 00:00 | Now there's two more instructions we
want to add into the position bars function.
| | 00:04 | So let's go over to chart.js.
And the first one is
| | 00:07 | we want to add a paragraph tag inside of
each div with the chart-bar class, with
| | 00:13 | the actual value of each one of the bars.
| | 00:15 | So let's hit a return after the
statement that's applying the CSS left
| | 00:20 | property to each one of the bars. So
let's do dollar sign, beginning and
| | 00:24 | ending parenthesis.
| | 00:26 | Inside of the parenthesis, type
this.html();
| | 00:35 | Inside of the parenthesis for html,
two tick marks for a string literal.
| | 00:39 | Let's type a p tag.
Outside of the string literal,
| | 00:46 | type a plus sign. So we have the beginning
paragraph tag for html, and then we
| | 00:50 | want to add in the attribute, dollar sign,
beginning and ending parenthesis.
| | 00:57 | This, outside of the parenthesis,
.attr for attribute, beginning and
| | 01:02 | ending parenthesis.
| | 01:04 | Inside, two tick marks for
string literal, bar-value.
| | 01:10 | We want to add the attribute bar-value
from each chart-bar that's being found
| | 01:15 | inside of the chart-area.
| | 01:18 | Then after the parentheses, plus
sign, two tick marks for a string literal,
| | 01:24 | then end the paragraph tag.
| | 01:29 | Now in the next line we want to add a
paragraph tag into the chart-x-axis div
| | 01:34 | for every bar-chart we
found inside of the chart-area.
| | 01:37 | This is going to give us the labels
across the X axis. So to do that,
| | 01:40 | let's type dollar sign,
beginning and ending parenthesis.
| | 01:45 | Inside of here we are going to type
two tick marks for a string literal, dot
| | 01:49 | chart dash x, dash axis, dot append,
beginning and ending parenthesis,
| | 01:58 | semicolon. What this will do is
take whatever is inside of the parentheses
| | 02:02 | and continue to add it
into this chart-x-axis div.
| | 02:07 | So inside of append, two
tick marks for a string literal.
| | 02:10 | Let's start a paragraph tag, p, space.
| | 02:15 | We are going to add a style attribute
onto this paragraph tag, equals, two full
| | 02:21 | quotes, and the paragraph tag.
Style inside,
| | 02:25 | we are going to type, left, colon
capital letter X, and then a little
| | 02:31 | letter px, then a semicolon.
| | 02:34 | We are going to replace the capital X
with a calculation in a few minutes.
| | 02:38 | Outside of the string literal we are
going to type plus, and now we want to
| | 02:42 | add the label from the bar that's
actually found during this each statement.
| | 02:47 | Dollar sign, beginning
and ending parenthesis.
| | 02:50 | This inside, dot attr,
beginning and ending parenthesis.
| | 02:57 | Inside of the attribute, two tick marks
for a string literal, label, outside of
| | 03:04 | the parenthesis plus sign, two tick
marks for a string literal and then end
| | 03:10 | the paragraph tag.
So again, this is going to
| | 03:13 | add a paragraph tag into the
chart-x-axis div, for every chart-bar
| | 03:18 | that's found inside of the chart-area.
| | 03:21 | Now to position each one of these
paragraph tags directly under the bar,
| | 03:24 | we're going to replace this letter X
over here with the calculation that's
| | 03:28 | going to figure out exactly where
these need to be placed along the X axis.
| | 03:33 | So select the letter X, put in two
single tick marks for a string literal,
| | 03:40 | two plus signs, and inside of the
plus signs let's add two parentheses.
| | 03:46 | Inside of the parentheses we are
going to type barPosition-,
| | 03:53 | let's add two more parentheses inside of
there. First we are going to figure
| | 03:58 | out the windows bar width divided by two.
So window, dot, barWidth, divided by 2.
| | 04:10 | Now unfortunately,
Dreamweaver when it sees this,
| | 04:13 | it is actually going to show the rest
of the statement in green, telling us
| | 04:17 | that that's actually an html comment.
But the math calculation will
| | 04:20 | actually happen properly.
| | 04:22 | So what's going to happen is
window.barWidth/2,
| | 04:25 | is going to give us the width of the
bar divided in half, and then we are going
| | 04:29 | to take the barPosition, subtract that
from this value, which is going to give
| | 04:34 | us a centered paragraph tag, and what
this will do again is give us all those
| | 04:38 | paragraph tag across the X axis, to
line up with all the bars.
| | 04:43 | To test this, let's choose File > Save.
Let's go back over to our html file.
| | 04:48 | Let's choose File > Preview in Browser,
and now we'll see in our browser
| | 04:52 | everyone of the bars has an html
paragraph tag showing you the value of each one
| | 04:56 | of these bars, and underneath we have a
paragraph tag with the individual label
| | 05:01 | for each bar showing up to down here
in the X axis div, lined up to exactly
| | 05:04 | where the bars are showing up in the chart-area.
| | 05:07 | Now that we have all of the bars
positioning properly, and we have the values of
| | 05:11 | the bar showing up inside of the divs
that constitute the bars, and we have the
| | 05:15 | paragraph tag showing up on
the X axis, in the next movie,
| | 05:17 | we will figure out what the highest
chart label is. And we'll figure out the
| | 05:21 | multiplier so that we can get all the
heights of the individual bars to be in
| | 05:25 | relation to each other.
| | Collapse this transcript |
| Figuring out which bar has the highest value| 00:01 | Now inside of this each function that
we have running to position the bars and
| | 00:04 | figure out all of the values and
labels for every one of the bars,
| | 00:07 | we want to add another variable in here to
figure out what the highest bar-value is.
| | 00:13 | So we are going to start by creating a
new variable, named var value. So var
| | 00:19 | barValue, equals, Number, beginning
and ending parentheses, semicolon.
| | 00:28 | Inside of the parentheses for a
number, we are going to type dollar sign,
| | 00:33 | beginning and ending parentheses,
| | 00:35 | this, dot attribute, beginning
and ending parentheses, semicolon.
| | 00:46 | Inside of attribute, two tick marks,
bar-value. Now again, this color syntax
| | 00:55 | is going to look a little different
because Dreamweaver is being
| | 00:57 | sort of tripped up here by
dividing the bar-width by 2.
| | 01:01 | But inside of this statement here,
we are converting whatever the item
| | 01:05 | this is, attribute bar-value into
a number to make sure that we can
| | 01:09 | actually multiply it out.
| | 01:12 | Then in another line,
| | 01:14 | we are going to type if, beginning and
ending parentheses, beginning and ending bracket.
| | 01:20 | Let's split the brackets open.
| | 01:22 | Inside of the if statement, we are going to type
barValue > window.maxValue,
| | 01:36 | which again we set up as our global variable.
We can see it up here.
| | 01:41 | So if the current bar-value that we've
just evaluated, as we're running
| | 01:44 | through this each statement,
is greater than that value,
| | 01:48 | we are going to type,
window.maxValue = barValue;.
| | 01:59 | Once we've run this function, the next
thing we are going to do is set the new
| | 02:02 | multiplier, which is the
height of the overall chart.
| | 02:06 | We are going to scale all of the
values for the bars, again, so that they all
| | 02:09 | show their height in relation to
each other. So then we are going to say,
| | 02:14 | window.valueMultiplier = window.maxValue /
window.highestYLabel;.
| | 02:36 | So in that case it's the 1000 mark
that we have in the div for the Y axis as
| | 02:41 | being the highest value for our chart.
| | 02:44 | Now that we know the maximum value of
all the bars, and we were able to calculate
| | 02:48 | the value multiplier by dividing the max
value by the highest Y label, in the next movie,
| | 02:53 | we can create an animation that will
animate the bars to a height that relates
| | 02:58 | to each other based on their values
and in relation to the height of the
| | 03:01 | chart-area div.
| | Collapse this transcript |
|
|
4. Calculating and Animating the BarsAnimating the bars based on their value| 00:00 | Now to begin animating our chart,
| | 00:01 | we are going to create a
second custom function.
| | 00:04 | Again, this is going to be
outside of the document ready.
| | 00:07 | So after the position bars function,
| | 00:11 | We're going to type function, space
animateChart, beginning and ending
| | 00:19 | parentheses, beginning and ending bracket,
split this open.
| | 00:24 | So inside of here what we're going
to do is start
| | 00:26 | with a dollar sign, beginning ending
parentheses, two tick marks for a string literal.
| | 00:32 | Inside we are going to type
.chart-area .chart-bar.
| | 00:44 | After the parentheses we are going
to type dot each, beginning and ending
| | 00:49 | parentheses, semicolon.
| | 00:51 | Inside of the each we are going to
type function, beginning and ending
| | 00:56 | parentheses, beginning and
ending bracket, split that open.
| | 01:02 | Inside of the function, parentheses,
| | 01:05 | we are going to type index, just
like we did on the position bars.
| | 01:11 | Inside of the brackets we are
going to start by creating a variable,
| | 01:13 | var, revisedValue.
| | 01:19 | We are going to set that equal to a
number, so type number, beginning and ending
| | 01:24 | parentheses, semicolon.
| | 01:27 | What we are going to do here is take
the value of the actual chart and scale it
| | 01:31 | or multiply it by the multiply
value that we created in the last movie.
| | 01:35 | This is going to make sure that every
bar will animate to its height in relation
| | 01:39 | to the other bars and in relation to
the height of the parent container.
| | 01:43 | In this case, the div with the chart-area class.
| | 01:46 | So inside of the number
parentheses, dollar sign, beginning and
| | 01:51 | ending parentheses.
| | 01:53 | This, outside of the parentheses
dot attr for attribute, beginning and
| | 01:59 | ending parentheses.
| | 02:00 | Inside of attribute, two tick marks for a
string literal, bar-value, so we want to
| | 02:08 | take the bar-value and make sure
that it is processed as a number.
| | 02:14 | Now get your cursor outside of the number
parentheses, and then we are going to multiply
| | 02:18 | that times window dot
chartScale;.
| | 02:26 | Next line we are going to type dollar
sign, beginning and ending parentheses.
| | 02:30 | This, dot animate, beginning
and ending parentheses, semicolon.
| | 02:39 | Inside of the animate parentheses,
I am going to put two brackets.
| | 02:45 | Inside of the brackets, we are going
to type height, colon, revisedValue.
| | 02:52 | This the variable that we just
created up here. So we are going to animate
| | 02:57 | this chart, each one of the items that we
find in the each statement to the revised value.
| | 03:04 | Inside of the brackets, but before the
ending parentheses, put a comma, then a
| | 03:08 | 1000 milliseconds.
| | 03:10 | Now in order to run this
function, let's come over here and select
| | 03:13 | animateChart function.
| | 03:14 | Let's copy this and let's put this as the
last item inside of the position bars function.
| | 03:21 | So after all of each
statements run for the bar positioning.
| | 03:25 | We are going to run the animateChart function.
| | 03:27 | Put a semicolon after that.
| | 03:30 | Choose File > Save, and now let's go back to
chart.html, then to File > Preview in Browser.
| | 03:39 | Once this loads,
| | 03:39 | we should see all of the chart items
animate, and you'll notice that the
| | 03:43 | relative heights of each one of these
charts relates to the overall height of 1000.
| | 03:50 | So the value multiplier actually takes
the chart scale, which means the height
| | 03:55 | of this background graphic,
even though it's only 300 pixels,
| | 03:58 | is representing a 1000.
| | 04:01 | And then each one of these bar-charts
is then positioning themselves based on
| | 04:05 | that 1000 value, and then the
multiplier then converts that from the 1000 value
| | 04:11 | into the actual number of pixels
that we have to animate the bar-chart.
| | 04:15 | So a few things you might notice, first,
| | 04:17 | we have the heights of the chart
set to 50 pixel high, so that we could
| | 04:20 | actually see them being positioned, and
the labels are showing up immediately.
| | 04:23 | So in the next movie,
| | 04:24 | we will add a little bit of finesse
here and we will stagger the animation so
| | 04:28 | that the bars will play one at a time.
| | 04:30 | The labels will be hidden and then
fade in, once the animation is stopped,
| | 04:33 | and the charts will actually start
from zero and grow all the way up from
| | 04:36 | the bottom.
| | Collapse this transcript |
| Fading in bar value labels after the bar animations| 00:01 | Now in order to fade our labels on in
the bar-charts after the animation,
| | 00:04 | we are going to need to make sure that
the paragraph tags inside of the chart
| | 00:08 | bars are set to display none.
| | 00:10 | And in order to animate the charts from zero,
| | 00:12 | we need to set the CSS height of
zero for the individual charts as well.
| | 00:16 | So to make those CSS changes,
| | 00:19 | let's switch over to chart.html.
In the CSS panels,
| | 00:23 | let's scroll all the way down to the
bottom, and let's double-click and edit
| | 00:28 | .chart-area .chart-bar p
| | 00:31 | Let's come in here to the Block properties,
come down to Display and choose none and click OK.
| | 00:38 | Next let's go into chart-bars, so let's
scroll up a little bit, .chart-area .chart-bar.
| | 00:43 | Let's double-click that.
| | 00:45 | Let's come over to the Box
properties and under Height.
| | 00:48 | Let's change the height to 0, then click OK.
| | 00:51 | Let's switch back to chart.js. So inside
of the animation here what we are going
| | 00:56 | to want to do is make some changes.
So first,
| | 01:01 | let's add another variable
after the first variable we created.
| | 01:04 | We are going to say var newDelay.
| | 01:09 | We are going to set that
equal to a 125 times the index.
| | 01:19 | So this is going to be used as times, so
this is a 125 milliseconds, times the index,
| | 01:24 | that is running on this function on the
each statement. So now in the animation
| | 01:28 | statement after this,
| | 01:29 | we're going to type dot delay, which
is a jQuery function for delay, and the
| | 01:35 | delay time is going to be newDelay.
| | 01:37 | We are going to copy this variable
and paste it in here.
| | 01:41 | So now each one of the bars is going to
take one quarter of a second before the
| | 01:46 | next one animates, so we are going to
get this sort of one at a time play of all
| | 01:50 | of the charts animating.
| | 01:52 | And we set the CSS to 0, so that the
charts will start from 0, but the labels have
| | 01:57 | been set to display none, so
we need to turn those back on.
| | 02:00 | So what we are going to do is
use a feature called a callback.
| | 02:04 | So after the 1000 inside of the animate area.
| | 02:06 | We are going to type a comma, type
function, beginning and ending parentheses,
| | 02:13 | beginning and ending bracket, and so
this is what's called a callback function.
| | 02:18 | This means that this function will only
happen after this animation has played.
| | 02:24 | So let's tab in, dollar sign,
beginning and ending bracket.
| | 02:30 | This, dot children, beginning and
ending parentheses.
| | 02:38 | So this particular bar-chart,
| | 02:39 | we're going to look for
children inside of here.
| | 02:41 | Again, we injected a paragraph style with a
label in each bar, so this dot children.
| | 02:48 | Inside of children, two tick
marks for a string literal.
| | 02:51 | We're going to look p tags inside
of each bar, outside, delay, beginning
| | 03:00 | and ending parentheses, 500
milliseconds, outside of delay, dot fadeIn,
| | 03:08 | beginning and ending parentheses,
semicolon, and then inside of fadeIn we're
| | 03:12 | going to type 250 milliseconds,
so a quarter of a second.
| | 03:16 | So again, what's going to happen is
each one is going to play on a delay, of a
| | 03:20 | quarter of a second times the index.
| | 03:22 | We're going to animate to its revised
height over the course of a second, and
| | 03:27 | then we're going to run a
function once it's done animating,
| | 03:30 | that's going to take all the paragraph
tags inside of each bar, wait for half a
| | 03:34 | second and then fade them in over a
quarter of a second.
| | 03:38 | To test this, let's choose
File > Save All.
| | 03:41 | Let's go to chart.html.
| | 03:44 | I'm going to hold option or
Alt + F12 to play in a browser.
| | 03:47 | Now we'll see every chart will animate up, and
then after they animate to their full height,
| | 03:51 | we'll see each of the
labels fade in one at a time.
| | 03:53 | To watch that again,
| | 03:55 | I'll hit reload, charts start from 0,
animate up and then each of the labels
| | 04:00 | fades in one at a time.
| | 04:02 | And that concludes animating our bar-chart.
| | 04:04 | Now you can take the same principle
and animate any series of html elements
| | 04:08 | running through in each statement, and
then using the delay to actually set how
| | 04:12 | much time passes or having all
the elements animate at the same time.
| | 04:17 | Now since we do have portions
of this particular chart being
| | 04:19 | dynamically generated,
| | 04:21 | in the next movie we will look at how
to change the chart area, how to move the
| | 04:24 | X and Y axis to create a different size
to chart, and then we'll see all of the
| | 04:28 | bars animate to the relative
height based on the new chart height.
| | Collapse this transcript |
|
|
5. Resizing the Chart via CSSAdjusting chart size by updating CSS values| 00:00 | Now to make some changes to
the dimensions of our chart,
| | 00:02 | we're going to come back to the chart.
html file in Dreamweaver, and the first
| | 00:06 | thing we're going to do is come over
and make some changes to the JavaScript
| | 00:08 | file to reflect those global
variables back out in our debugging area.
| | 00:12 | So if we come over to code_snippets,
down at the bottom in the JavaScript
| | 00:15 | section under number three.
| | 00:16 | Let's grab all of these debug statements here.
Let's copy these to the clipboard.
| | 00:21 | These are going to reflect the global
variables into our HTML page, so we can
| | 00:25 | actually see what's happening.
| | 00:26 | Let's come back to chart.html.
| | 00:28 | Let's go over to chart.js,
and inside of the animateChart,
| | 00:34 | let's just paste in all
of these debug statements.
| | 00:36 | Let's hit File > Save.
| | 00:38 | Now let's go over to the chart.css.
| | 00:41 | So in order to make the layout changes
here, we're going to come down and change
| | 00:44 | three of the properties, the X axis height,
the Y axis top position value and the
| | 00:48 | chart areas height. So let's come down
to chart-area down here and right now the
| | 00:53 | chart-area is set to 300 pixels.
| | 00:55 | Let's change that to 150 pixels high.
| | 00:59 | Next, under chart-x-axis on the top positioning
value, let's set that to 150 pixels high.
| | 01:04 | That will position the top of the X
axis to the very bottom of the chart
| | 01:08 | area, and then lastly let's come up to the
chart-y-axis and set the height here to 150.
| | 01:15 | At this point let's choose save.
| | 01:17 | I'm going to hit Option + F12 or Alt +
F12 on Windows to preview in browser.
| | 01:23 | So now we'll see that the overall
chart is now only 150 pixels high, and each
| | 01:27 | of the animated bars will animate to
their height relative to each other based
| | 01:31 | on their value, and scaled between the
pixels here from the 0 to the 1000 pixel mark.
| | 01:38 | Up at the very top here we can see all
the numbers that are being multiplied out.
| | 01:42 | The key here is the chartScale.
| | 01:44 | The actual representation of 0
to 1000 is 15% of the actual size.
| | 01:49 | So 15% of actually using 1000 pixels
to represent 0 to a 1000, and then we can
| | 01:55 | see here the multiplier value what each
of the values is being scaled to as we've
| | 02:00 | gone across to each one of the different bars.
| | 02:02 | So as I mentioned in the introduction video,
| | 02:03 | this is sort of a hybrid between a
fully dynamic data visualization tool and a
| | 02:08 | fully static design. What we have here
is the ability to again change the chart
| | 02:12 | area and have the chart actually draw
the bars in relation to each other based
| | 02:16 | on the overall scale of the object.
| | 02:19 | Now in the next movie we'll talk
about some data visualization plug-ins you
| | 02:22 | might want to add into jQuery, or use
other JavaScripts altogether to create
| | 02:26 | charts that are fully dynamically generated.
| | Collapse this transcript |
|
|
ConclusionWhere to go from here| 00:00 | So after you've completed this course,
| | 00:01 | there's 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
| | 00:16 | you've set for the chart-area.
| | 00:18 | So just as we set this CSS
properties in the individual paragraph tags in
| | 00:22 | the chart-x-axis area,
| | 00:24 | you can simply make one single CSS
change to the chart-area, and then position
| | 00:28 | the X and Y axis based on querying
the height and width of that chart-area.
| | 00:33 | That'll 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:40 | 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 a charting framework
| | 00:51 | 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. So they have in here an entire
| | 01:05 | data visualization package.
| | 01:06 | If we scroll down we can see
| | 01:08 | we even have a few different
options for how the charts are going to be
| | 01:11 | rendered. HTML5 and SVG for example,
are going to give us a lot more
| | 01:15 | capabilities, however, they do require
newer browsers.
| | 01:18 | So I'm going to come up here and click
Getting Started. All of the ways that we
| | 01:22 | can use these charts are documented.
So here is a pie chart for example,
| | 01:26 | I can scroll down 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're 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 website.
| | 01:53 | Sencha is a framework that has a
bunch of capabilities for both computer
| | 01:56 | screens and for touch devices. And if we
scroll down to the Ext Designer, and click on this,
| | 02:03 | they have a full charting capability
inside of their particular framework as well.
| | 02:07 | Let me scroll down here a little
bit, and we can see New Ext JS 4 Charts
| | 02:11 | 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 |
|
|
