Welcome to our project Google Developers Hackademy,
where Spanish-speaking experts from Latin America
will show you some of our tools,
developer products, APIs and new tricks.
This course is divided into five parts.
We invite you to watch it and learn along.
Let's get it started.
Hello. Welcome back to the HTML5 web development
on Google Drive introduction course.
My name is Cesar Anton Dorantes,
Google Developer Expert for the Google Drive platform.
In this lesson we will see the following subjects:
introduction to Google Charts,
my first chart with Google Table Charts,
Google Pie Charts,
and finally, a practice in which we'll build
your first HTML5 app with Google Charts.
You ready? Here we go!
Google Charts offers a simple and professional way
to visualize the data on a website or web app.
Google Charts has an extended library
that offers charts to cover all important points
and a bit more,
from line charts, bar charts or pie charts,
to powerful dashboards,
and the very popular geocharts.
The most common way to develop with Google Charts
is using JavaScript.
In order to do this, we load the libraries
according to the type of chart we wish to use,
we introduce the data we wish to show,
we customize the charts the way they best adapt to our needs,
and we finally create a chart object
with an ID we choose.
We will use it to call the chart
from our HTML code.
Pretty soon you'll see how easy it is to do this
thanks to the incredible Visualization API.
Charts are declared as classes in JavaScript
and Google Charts has an extended library
so you can always represent your data
in the best way.
Usually, the by-default appearance will be enough
but we can customize it to adjust it
more precisely to our data
and to our page or web app style.
Google Charts generates interactive charts
capable of triggering different types of events
that allow us to connect several visualizations
so we can create powerful dashboards,
and we can also connect it with our own code
to give a very dynamic experience
from our website or web app.
All charts receive their data by using a class
called dataTable,
which allows us to easily change the chart type
until finally finding the one that adjusts to our data.
It also lets us represent the same data
by using several graphs.
A quite common example would be showing a chart
and a pie graph to represent our data
in the clearest way possible.
Incredible, right?
Let's move on to programming our first app
in Google Charts.
Let's start by declaring the necessary HTML
for our presentation.
I recommend you recycle the code you built last time.
MY FIRST CHART WITH GOOGLE TABLE CHARTS
First, we need to import Google's API
and then select the library that we will be needing.
We'll start with the most common representation,
Table Charts.
All this with just 4 very simple code lines.
Time to start using JavaScript.
In this example, we'll name our file charts.js.
We'll start by declaring the data we will represent
within the variable data,
contained in a function called drawVisualization.
For our example, we'll show how we usually distribute
the hours throughout our day.
Notice we introduce the data
using a JSON ordered array,
within a method called arrayToDataTable.
The first line corresponds to the headings in the table
and the rest are the subsequent lines.
Now we need to declare a TableChart-type visualization
to which we will assign the ID "chart",
which we'll use later on to designate
in which part of the app we're going to show the chart.
We also need to put, always at the end of the code,
the method google.setOnLoadCallback
and put the name of our function
in the parenthesis.
What this does is wait for everything to correctly load
before ordering the drawing of the graphs.
Turn for the CSS.
Let's remember that CSS
allows us to declare the visual characteristics
for the elements in our HTML5 projects.
In this case we'll use it to determine the chart's area.
For this we create a class named charts
and we assign the width and height for our chart.
Time to go back to our HTML code.
Let's start by indicating the route to the files
we just created.
Remember to do this in the G section of your HTML code.
Remember the ID we assigned the chart
in the JavaScript code?
Now it's time to use it to declare
in which part we want this chart to be shown.
We will also use the class we declared in our CSS
to determine the area it will occupy.
Did you notice something very important
is missing in the HTML5? That's right!
The "article" tag we saw in last lesson,
which indicates the main contents in our page.
This time we'll also use the "header" tag
to point the heading for our application.
Though this is totally optional,
it's a recommended practice in HTML5
and is particularly useful
when we're embellishing our code with CS3.
In the beginning of this lesson we said you can use
the same Data Table to draw different presentations
of the data at the same time.
And now it's time to put this to the test
by adding a pie chart to our app.
The first thing to do is to declare a new visualization
in our file charts.js,
but this time we will use PieChart instead of Table.
To give it a little more presentation,
we'll add a title that says:
"How do you use your day?"
Let's go back to our HTML code.
In order to add the pie chart, we first need
to add the corechart library alongside to the table one
in section G of our code.
Then, we just select in which part we wish
the chart to be drawn by using the ID we chose,
in this case, pie, and that's it,
we already have an app that shows our data
in two different ways.
It was really easy, right?
I invite you to watch this lesson again,
this time making pauses to follow the steps
and copying the code that is shown.
For a comparison, you can see an example
in the website shown on screen.
This will be it for now.
See you next time with:
"Connecting your app with Google Spreadsheets,"
where we'll learn to import data in real time
from Google Spreadsheets.
And if you liked this lesson, you'll just love next one.
I say goodbye for now and remember:
keep on programming!