Tip:
Highlight text to annotate it
X
>> Itai: Hello everybody. My name is Itai, I am an engineer from Google Tel Aviv offices, and in the next hour or so
I'll discuss the Google Visualization API, specifically the integration with the GWT library and some other advanced
topic as time permits. So the other advance topics would be latency some tips and tricks on how to improve the latency
when you use this visualization API, and in addition some tips about security, some things that might be important to
know if you implement data source for this API, and a few words about the date of the object, that it's not widely
known as it should be, maybe, questions at the end. So, a few words about the, the Visualization API, just so we start
from the same place, this API is a tool set, that's suppose to enable it to make it easy to visualize structured data
on the web, that's needs a JavaScript based API in it's native way. And, the main component it's a gallery of many
visualization that share the same API. So again, although there are many visualizations and charts and some of them
are flash base, some of them are image base, some of them browser charts, they all share the same API, you just load
them from the, or with the Google or the, I'll show some examples in a second, and after you load them on the same way
for no matter what the implementation is, you just create a new JavaScript object which is the charts that you want to
use and the constructor you give it a parameter of the 'div' the web element in which you want it to be displayed, and
then you just called the dual function of this chart that accept two parameters. The first is mandatory, which is the
data table which I will discuss a bit later and it's the same object for all of the, the same class for all of the
visualizations, and the second one is the option that there are specific for any type of visualization. Some of the
charts have event mechanism for selection events or other events that might be filed from the visualization and you
have like, the same model for all of the events for all of the visualization so you don't have to learn from each one
of them a new different way to handle them. There is another common thing which is the option to get the data from
what we call data source, so you don't have to have all of the data that you want to visualized inside your web page
but you can just have the chart and the options configured in the page, in the web, in the page, sorry, and then you
can send the query to get the actual data that you want to present and present it. In additions, third parties can
also create, wrap their charts in this API and then you can use them also if they are in the gallery. So, let's see a
few examples before we start, [searching], not here, so this is in our documentation this is the gallery of all the
charts, you see there are maps and charts, and tables and all that stuff. Let's take a quick look about one of the
most interesting ones which is the Motion Chart, this is a flash base chart. Some of you may have seen it, it's used
within Google in many places and through this API you can see it, you can use it in your site, you can set chart with
five dimensions of XY, color, size of the bubble and the time as you can see here, so this is like a very elegant and
very sophisticated chart. Let's take a look on the code that is used in this page so, this is the whole code that you
need to do in order to show this chart, what we see here in most of the code is just populating the data, because here
it's part of the page, again it doesn't have to be this way but this is just an example, so the first thing we do, we
just edit script tag brings the loader of the JavaScript APIs of Google, it's the same loader for all of them. Then we
call a Google DocLoad function specifying the component, the library, in this case the visualization library because
there are others and the specific packages that use only the motion chart, but I could specify as many visualizations
as I want it to on the same load function. Then I use the, when the API, when the JavaScript code is loaded to the
page, I create a data table, I populate it to the data, maybe the important thing about data table to know is that,
data table is a two dimension of table, it has columns and rows, it has many columns it has many rows as you want, but
columns has types, so each column is specified as you can see here on the top of the screen, type and optionally
label, type can be streamed, number, date, day time, blow down and a few more, but it's a set of pretty fine types but
each column and each cell of this column has to be from this type. Rows can be as many of them as you want and the
limit is about the cells so again the typing of the cells. So after it you just create a data table with all of the
data I want to present, I create a chart, a motion chart and in this case, place it on the div that I want to and call
the dual function with the data element and some optional parameter in this case, it's the width and height that I
want to create this chart with, and that's it and I'm set. So, this is the whole code that is actually used for
displaying this chart we see here. Just for another example to, so you can see how it's similar no matter what the
chart is, let's look at the area chart. This is a pictographic base chart that you can use from the gallery, it's
animated you can click on this. You can also catch these events and list for these events and react to when the user
clicks, and not only to the two div that are built in. The code as you can see it here is much the same, we bring up
the loader of the JavaScript APIs, we load in this case not the motion chart but the area chart, we create the data
table object we populated it with data and we create a new chart and draw it with the data, here the in addition to
the width and height and also specify that the legend is at the bottom and the title is whatever. But its quiet the
same as you saw before. So, this is how it works in Javascript and now let's see how it's done in GWT. So the first
thing that you would like to do if you want to use GWT is to load the, the wrapping java, the wrapping in the library,
so all you have to do is to Google for, gwt-google-apis and then you get to this page, in which you can find wrapping
library for each one of the JavaScript API that Google provide, search, languages, maps and so on. One of them is the
visualization API; you download the zip to your computer and place the java somewhere accessible. Then the next thing
I did is I created GWT project in a clips, just as you saw today in the keynotes, three clicks and you are there. And,
then in other to be able to use visualization from this project, I have to do initially two things, the first one I
type, I go to project properties and I add this java that I just downloaded to my computer, I add it to the java bill
box very simple. By the way all of the instruction, all of the code and all of example I'm going to show now, are part
of, you can find them in the documentation of the GWT library or of the JavaScript library, it depends on the context.
But all of these things are covered in the documentation. So the next thing that I have to do is to inherit from
Google visualization, this class is also part of this library of the java that we downloaded and then you are all set.
This is the GWT text and mail file as you can see there in the project, this is the configuration file of this
project, so to tell GWT how to work with this. Here you can see this line here is the entry point, this is the class
that is going to be loaded and used when this project goes up, so let's see first what's its doing and then let's have
a brief look at the code. So, I just started the project, with the embedded mode, you can see here on GeoMap when the
values represent the, the color represent the values, okay so you see that the darkest country is Russia here is 700
and Brazil 400 and so on. So this is also a flash base GeoMap, but again the API is JavaScript natively and now we're
gonna see how it's done in java with GWT. So this class is the entry point class, you saw that we mentioned it in the
GWT xml file, and so when everything is loaded which calls the on model load function and that you can see here in
which we are doing one simple thing, and in our case that I just want to show this chart, so I call visualization fill
down here. I call load visualization API and I specify the callback class to be called when the visualizations are
loaded and I specify a list of visualization and in this case it's only the GeoMap. Now when this is loaded to the
browser the unload callback class is activated and they run functions specifically, and then let's see what we are
doing there. So very similar to the JavaScript we create a data table, we've seen that in a minute how it's done and
then we set up options that are specific to the GeoMap, and then we create a new instance of GeoMap with the data
table and options and add it to the panel and that's it, this is all the call that we have here, let's see, create
table as we said. So it's very very similar to what we have in JavaScript, we just create a data table object using
the create static method and we add rows, we add columns with types and optionally labels as we see here, we set the
values of the cells, it depends on the types and return the data table that we created, this is the first thing. As
about the options we saw that we call the create map options, this is the functions that is down here, so we just
create a GeoMap options object, and then we can set all of the pre defined options. So, if I just go to auto complete
here, I can see all of the options, you know colors, data mode, height, width and so on, in this case I left all of
the defaults, I only said that their mode is regent, the other options is markers. So you see circles on some specific
Geo locations instead of countries. And, this is all you have to do in other to see these example which is again very
similar to JavaScript, now we're gonna show you another example that is a bit more complicated and so let's move on
and change the class here but instead of using this entry point, I would use the other one [searching] not like this,
[typing] this is all you have to do. The nice thing about GWT is you don't have to compile anything when you use the
mouse as I just did, I have to just save it and go here and pray. Yeah, okay. So, what do we have here? Here we have 3
charts, the first 2 of them are browser charts using pictographic, the pie chart as you can see is 3D and the reason I
say it is that I want to show you how I did it in some special way, the other one is just a simple bar chart, but I
also use the events, so I kind of combine them together. So if I click now on the slides of the pie chart, I made it
so the same selection is set on the other chart as you can see there. If I click on sleep, you see the sleep here too
and so on, just you can also do this, or don't do anything [laughter], but it's nice [Laughter], alright and this why
people like this job. The other chart that you see at the bottom is the, what we call annotated timeline, you might
know it from Google Finance so it's the general version of the same chart but it's not for finance, you can use it for
your own data and in this case, this is the Terry Gilliam movies if I'm not wrong. So you can see annotation whenever
it makes sense, you can just create the annotation with that on your data table, create columns of annotation. It's
all described in the documentation of this chart which columns means what and so on, and you can catch events. So when
to user select the different range, like here [searching] it doesn't work, let's try here, never mind. So when the
user change the range, okay I want to show it right [searching] okay, so when you change the range, so you see that
the event was filed and I can catch it and alert it or do whatever I want to with it.
Another interesting thing about this chart here is, that the data is not hard coded in the page as it's in the example
that I showed before so I want to show this as well, so let's take a look at the code. The first thing to notice is
that I called the Load Visualization API but with 3 packages, the annotated timeline the pie chart and the bar chart
just one after the other using kind of java stuff and you can specify again as many of them, you can create them, you
can specify in different load functions, but it makes sense to call them all at once, it's just more efficient. Then
when there are back what I do here, I create a pie chart and add the select handler that you would see in the second,
after I edit to the panel I also create the bar chart which is nothing special about it and I also send the Query to
the annotated timeline so when this gets back I will draw it, so let's see the details [searching], so this is the
table that is hard coded for the first 2 charts, nothing special to say about it. Let's take a look at the options, so
I told you about the 3D, it's not only because I wanted to show that we can set this chart with 3D, but I wanted to
show that in some exam, in some cases you might find that in the JavaScript API there are some options that are not
wrapped in the GWT library, because the GWT library is you know is always, almost always might be a step behind
because, we have to add any option, we cannot add them before we add to the JavaScript, the only options had to be
added to the JavaScript and then when they are publish we publish the JavaScript, the java api, the java library and
distribute it so, it might take a while until all of the functionalities is on the GWT, but if you see that some
functionalities is not there, you can wrap it on your own as I show now. So in this case instead of specifying set
3D=true as a code because it is wrapped, I use the native way is a set option is 3D true? And, the same thing with
colors as you can see here to overwrite the default colors. How do I know which option is available? If we already
wrap them so we can just auto complete on the clips and see the functions that are available but if not, you can just
go back to documentation and for each visualization you can see, configuration options, and here you can see all of
the configuration axis color, the type, if it's a string or object and so on or number, all of the option to configure
this chart and this is available on the same format for all of the chart so you can just go there, find the one that
you need and if it's not wrapped you can just use the native set option, function. [Searching]. So about this Select
Handler, in this function we see how we create a select handler so this is very simple as simple as defining a new
create handler on select handle. The unselect function would be called whenever the user select something on this
chart, so notice that not all of the chart have select events, it's also specified in the documentation but if there
are image base chart so there is nothing like selection we cannot let you know if something, if the user cannot
interact in fact with the chart, but if it's flash based or JavaScript based, then we file this event and then what
I'm doing here is just I'm setting the bar chart selection to be the same one as of the pie chart selection, as simple
as that. And again you don't have to do this, you can also say okay I want to open a new page with this information,
the important thing is that you have a JavaScript function that it's been called when the user select something or do
any other interactions that this chart support, and in addition to this you have the data, you know which cell of
underline data table was called, so is not only that you get the value, you know the actual cell in the data table,
then you can, if you know that each row represent something you can go from there to the other cells that mean
anything and use them in other to do something meaningful. And the last thing that I want to show here, in this
example is the way that I got the data from Google spreadsheet in order to display the movies of Terry Gilliam, so
here I define the data url, which is Google spreadsheet but it can be also data source that you implement with your
data on your site, tomorrow there is another section about how to implement data sources of this API but it's fairly
easy and there are already some libraries that do most of the job for you. So in fact most of the things that you have
to do is to create data table as we saw here, all of the other things are taken care of. So you create a query object
with the data table, sorry with the data url of the data source and you called the send request, the send method with
a callback class as we see here inline I created the un-response, I implement the un-response function, this function
is called when the response get back from the data source with the actual data that you want to present and if
everything goes well I can just, call response and get data table and I get the data and from here it doesn't matter
that you get the data from anywhere remote and not even create it in the, locally on the browser. In addition, I also
added here some, the event, the range change handler, so whenever the user change the range selection I can do
anything I want and in this case I just select it but of course this is not the thing that you would like to do.
[Searching] So that's about it, about the GWT integration. You can also wrap your own visualization or wrap unwrapped
methods and events, the library is open source so if you see that something is missing not only that you can maybe
contribute to it, but also you can just take a look and copy the code and locally create the thing that you miss. So
again just to wrap it up, using a visualization is as simple as create a new chart, and create a data table and
options, creating a data table is just like creating an add columns and rows, add the values. Configurations can be
set using the options. The options object, data can be requested from a remote data source using the query object
event, most of them are already wrapped so you just add event handler and do whatever you want when it's filed.
Unwrapped options can be used with the set options and function. [Searching] And that's it about the GWT integration
and some other topics now. Let's start with Latency, it's a good time to . So as we just show before any chart can be
displayed there are some things that have to happen before. The first thing that has to be loaded if is, sometimes
it's just the main library that include the data table and the query and the call library but if it's some
sophisticated visualization like the motion chart that we saw or any other flash based, so all of the resources have
to be loaded all the same. Afterward everything is loaded you create a data table and you populate it with data and
this means that you might need to call remote data source, sometimes you just want to create it locally on the browser
or maybe to generate it dynamically but when you generate the page, so it's not using the data source, it's something
that happens on your page when the page is rendered, and only then you can draw the chart. And the first 2 steps can
be sped up so let's see how it's done. The first thing we saw that there is a single way to load the visualization and
all of the other APIs actually, so if you are using this step is correct also for other API that you might use, you
might wrap in GWT, not in GWT, sorry, you might use in Google. So the first thing is that you just call a script of
jsapi loader and then when you have this script in your browser you can call the google.load with the parameters of
the libraries that you want, the version and all of the packages. The result of this process is 3 http requests, 3
round trips, the first one to bring the jsapi loader itself which is a very light one but still around it, then
another tool from the google.load. The first one is to get the current version of the cached URL of the current
version of all of the library that you want, and the second one that can be cached by the browser is to actually get
all of the JavaScript base. But again the result of this is a 3round trips. So the reason of another new feature of
this loader that you can read the details in the documentation, and I'd let you skip the second one which is a very
light one but still another round trip that cannot be cached in the browser and it saves few milliseconds and might be
important if you have the, I don't know many pages, many users, this latency is important, one lesson that we know in
Google. So as you can see here, you just add to the jsapi script, another parameter in the JSON format of auto load
and then all of the models and the packages that you want to load inside into this page, this will save you one call.
The disadvantage of this approach is that you have to really type all of this JSON and usually you spend more time on
setting it up than the latency of all of the user that we would see this page ever. So one nice tool that there is now
you will find it in the documentation, there is UI so you can just specify all of the features all of the libraries
and all of the packages that you want to include and then the result is this line that you see here you just copy
paste into your page and then you save all of the mistakes, and this way we can save a dozens or hundreds of milli
seconds depending on the internet connection on the users internet connections in fact .Another thing is how you
create the data table, we said that one option is to go to our remote data source and I will explain in a few minutes
about it, but let's say that you create it locally on the browser, so in this case there are two ways to do it. The
first one is what we saw in the example so far. You just create a new data table and populate it with data, add
column, add rows and set the cell values. If you have a very small and static data then fine, you know it don't take
time, but if you have hundreds or thousands of lines data and more than a few columns, the browser needs to process
all of this functions and it takes time, although JavaScript is much faster than it use to be it's still takes time.
There is an alternative which is using the JSON object. The result is about double and there are half of the latency
that it takes to create a data table the bigger the data table is, the impact is bigger of course, and you just create
a data table using the JSON object in a single command and then everything would happen behind the scene and you get a
data table with all of this features. The annotation the exact details I wound not get into it now, and just the same
so I would describe it in the documentation and you can get the same results so everything that you can do with the
data table set column or set cell you can do with this JSON notation, so it's just a matter of you know programming
and if you have a server that generate this code anyway, so once you want to maybe one time you want to sit down and
do something that generate JSON instead of generating close to add cell, add cell and so on.
These are the 2 tips about latency, Security, more correctly Privacy. So I already mention that there is something
called data source and in most of the cases when you have dynamic data or you have a large data, you don't want to
have it as part of your page, you don't want the page to be rendered with all of this data, you want the page to be
rendered only with the, I don't know the titles and the interesting stuff in it and if you have a chart you want only
to load, to hard code the chart, the options and then write a line that saying queries and send, get data from remote
url and present it which is nice but there is a problem. The question is if you can get to this url to get to the data
and maybe some other people can also do it, and until now we use some technique called Script Injection to get the
data. This techniques enable access from what we call cross site access, so you can get the data from other domains
that yours, why it's good for, it's good for a few cases one them is gadgets, gadgets is always rendered in what is
called sub domains, they are always in a form, from different domains than your page, it means that if it was only
possible to get data from your domain you would not be able to use gadgets. And, another good reason that we use this
technique is because Google spreadsheet are very good data source, very huge data source, so people mostly keep data
Google spreadsheet and then access from the web page to get this data on the page, again this is not the same domain,
normal http get request the browser do not send them if there are to a different domain. But again the problem is that
if you can get this data from different domain then maybe some else can do. There are known techniques and known ways
to prevent this, but this is something that you should be aware if you're using data sources of your data, and of
course if this is a public data then there is no issues of course and no issue at all. So we have just introduced in
the latest version of the JavaScript and the protocol that we announce a few days ago and a new mode that we call
restricted mode. This let you use in this case, what we are doing is the request from the java source libraries sent
by xhr, so it's only for the same domain. You should use this mode if you have a data source and you have your web
page and that's served from the same domain and you want to make sure that nobody from any other domain, gadgets or
what it is can access this data. So in this case you would use the enter request and then you would specify that you
want the request to into the xhr mode in AJAX, the browser will let it go because it's on the same domain, but the
most important thing is that when the browser when the JavaScript client would send this request it would add some
header some custom header on this request and this custom header is something that together with cookie authentication
that you anyway need to do if you want to make sure that you want, you know only validated users and only
authenticated user can see this data so. So there is no way that hackers can send request from different site to your
site and still have all of these cookies and these header, no way. So on the service side on the data source, all you
have to do is to make sure that there is this, if you want this data source to support only your domain all you have
to do is to make sure that the user is authenticated and that the header, the custom header is there and you are set
and you know that the request came from the same domain and you can return the response to the client. In the new
JavaScript, java library that is an open source and it was announced a few days ago and I'll discuss in a different
session tomorrow, this is already implemented so if you're using this one you don't have to, to do too much but even
if you do it on yourself and in other language or application you can just take a look and see how it's done, it's
documented and it's very simple and reliable. In the client side, by the way to decide if you want the request to be
an xhr script injection it's just another new parameter, if you don't specify this parameter as it was the case for
any code that was written until few days ago so we just automatically decide if it's with the same domain that we sent
the request or if it's with the xhr and we add these custom, custom parameter, this request was for a different domain
we just use script injection so that the browser will not prevent it. This is not a security risk here because anyway,
in your data source this is the place that you have to make sure, if you want to prevent request from different
domains. Another thing that I'll cover just in a few words, there is some tool of Google called, Google secure data
connector as the same, you can find documentation about it, it's kind of, the thing is that it let's Google services
like app engine, or Google spreadsheet or gadgets at Google sites to access data that is behind your vpm. So of course
it doesn't happen like magic, you have to install some client which is an open source, some agents software that it's
an open source in your firewall to describe exactly [clear throat] sorry, you have to describe exactly the resources
and the user that you want to be able to access these resources behind your firewall. But once you give done this so
Google spreadsheet and app engine and sites can access this data and present it so, since there gadgets that wrap all
of this visualization that we saw [searching] we have in addition to this gallery of visualization and there is
another gallery of gadgets, that can generate gadget are wrapped any one of this visualization. You can also write
your own custom gadgets if you want to specify some different options and then default ones that reset. But the nice
thing is that when you use gadgets you can let the user specify the options you know with the UI of gadget prefs , and
specify the data source, url and everything. So, the nice thing here is that the client library is already supporting
this the way that a request sent to behind this, to this STC stuff , all that you have to do is to add TQRT which
stands for table query which are all of the parameters of this API request type equals make request. Make request is a
technique that is used by Google gadgets to get data and then the request is not sent from the browser itself, but
through the container the server that serve this gadgets with all of the security validation and everything and it's
sent through the vpm through this STC to your data. So it's safe the only thing to make sure that of course that the
configuration of this agent. And last word about security, so Data Policy: Some, most of the visualizations do not
send any data outside of your browsers, this includes the interactive charts, the one that the, the JavaScript ones
that you saw the flash ones. So how it happens, you load the visualization engine from the web from Google, you bring
the data table from the page or from the data source and then you call the dual function, the chart is rendered on
your browser but in some cases, the data you sent to a different service, for example the image base chart of Google
using the Google chart API incase you know it and which these are charts that are rendered by url, it's specified in
the url, all of the parameters, all of the pie charts and the legend should be this and this and the data is that and
that, and all of this url is sent to Google servers, it's not kept there but it's sent outside of your browser and get
back to you and the same goes for third parties chart, some of them send the data to their server in order to do some
pivoting and sophisticated stuff. So this is something to know okay, the risk is something that you have to decide and
[searching] , how can you tell, so you go to the visualization gallery that you saw before you just select anyone of
the chart, say the motion chart and the last item here is, not this, one of the last is Data Policy, you just go there
and see if you send data outside of the browser or not, that's it [searching] .. And the last thing we're going to
cover in this session is Data View. So the ones that are familiar with SQL know the concept of Data View, of view in
SQL and in this API we have something very similar. So far I only said, I all the time said you create the data table
and you pass it to the chart and you create, you bring the data table from the remote data source or you'll bill it
luckily but, this is data table, there is another object called data view, from you can pass it as you can see in the
pass line here to the dual function of each visualization and for them it's just the same, they don't know that this
is data view and not the data table. The difference is that you bill it on top of data table and the data is not
replicated it's kind of a window of a view of a data table, you specify the column that you want to include in this
view and you pass it to the chart and it's kind of an indirection okay, so the chart thinks that these are the columns
that are in the table, it doesn't know that in the underline table there are more columns, what is it good for? We
said that all of the chart using the same data table concept which is true, but each one of them expect a different
columns, for example a pie chart would expect always 2 columns, the first one to be stringed which are the labels and
the second one to be the actual values that is the slides take, but there are other visualizations for example the
table visualization which is a very nice table that you can select cells and rows and you can sort and everything and
but for the table we don't care about the column format, there can be as many columns as you want and they can be from
any type we don't have to show we don't care. So what happens let's say that you have a page and you have 2 charts
that you want to show, you want to show table, visualization and a pie chart, we'll take, the pie chart is only 2
columns from the one that you want to show in the table, but if there was no data view, you have to do one of 2
things, you have to do all that you sent to queries and big data tables on the first place it takes more time and more
storage in your browser, or you could maybe create a data table and then maybe replicate it and remove some rows and
some columns and so on. Using this data view, you can just create a data view specify the right columns, sorry and
maybe you need to change the order of this columns and then you are set. Let's see a good example [searching], so this
is by the way a very nice tool that is, you know it maybe sorry, it's called the AJAX API Playground, you can, it has
examples and codes that you can play with for all of the AJAX APIs, again search, maps, visualizations, languages and
so on and, you can actually take the code you see the code and play with it around the new code and you can save local
copies under your profile, a very nice tool I use it all the time. So in this example what we see is we create a data
table up here, we populate it with data and then we draw and which the result is this original data table, this is the
table visualization and I can sort it, I can select rows, this is a very useful table but the fact is that it had 4
columns and I want to have another chart here with only the age and the names of the people here so, I need to take
only the first 2 columns and in this case you can see here I create a data view with columns 1, 0 and 1, which are 1
and 2 as you know, you all like it and just pass this data view as the first parameter to the draw function
[searching]. In addition to this you can also filter the rows not only the columns, you can set the rows, the row in
excess of the underlined data table that we would be use in this view so you can do the same tricks not only for
columns but rows based on their value. So as you can see here there is a function on data table called
getFilteredRows, the return type of this is an array of indexes and not the actual rows but the indexes of the rows
and you can specify as many filters as you want and combination you can specify column 2 value equal to 42, and like
here, you can specify mean and max values instead of a single value, and you can create multiple of these as you can
see it's an array and you can say, column 2, value for the 2 . Columns 3 mean and max and so on. And, then you get the
filters and then you can also sort them but get sorted rows and which is another function of data table and then set
rows on data tables and only these rows would be on the data view and then you would have only this rows and only this
columns that you want and then you can use then in any chart that is in data table and it's data view [searching]. You
already saw the example, and that's it. Again tomorrow there is another session about this visualization API and which
specifically about data sources and the new java library, that was release as open source few days ago which include
clearing language implementation and many other features, that's it. If you have any questions this is the time. Thank
you. [Clapping]
>> Hey, most of JavaScript libraries you can just take them and imbed them in your application server and serve them,
why does the visualization API require you to [?] to the Google, is there supposed to be a way that I can Google and a
way that we can also access?
>> Itai: I'm not sure I got the question.
>> So you have the URL google.com/ jsapi?
>> Itai: Okay so the question is why do you have to load the visualization and the code every time from Google,
>> yeah
>> Itai: And not host it in your application.
>> correct
>> Itai: The fact is that in this way we can ensure that you use the latest version of the chart and everything and
otherwise we will get into trouble of maintain version and people will use later older version and then we have to
support them and then we go and use the next version of some other feature which would not work together and so this
is how we decided to do it. I see the disadvantage but since most of our users are web based
>> yeah
>> Itai: we don't see the big problem
>> Is there any way to get around it at all or it's totally not allowed, because we really don't want to host with
Google.
>> Itai: So this is the way to do it, it's easy; you have to be online in order to use this library
>> I see. So I have one more question that is the visualization engine, what we found out was that each time you load
visualization and such as pie chart and line chart the performance degrades depending on the number of visualizations
that you want to load. It's that true, is there someway we can get around it, because you know you might have plenty
visualizations that your application might use but at any given time it just might load, might use tool.
>> Itai: So there is a way to load, not to load all of the visualization at the first time, you can read more in the
documentation but you can, so all of the example that I showed here were using the unload callback, so you just
specify on the first time that the page is loaded you say okay I want to use, I wan to load this visualization you
load them and when you get them you start working, you can also use loading what's called laze loading
>> yeah, okay
>> Itai: there is an option to do it, you can read in the documentation and it's very simple, all you have to do is to
specify callback function that would be called when they come back so you don't use the unload callback.
>> The problem is when I load the visualization lazily, the total time of load is less then if I load them together,
so if I load them together and if I just say load them on pie chart and line chart and I get one callback it's faster,
but if I load them asynchronously, it's slower, so I pay a penalty which ever direction
>> Itai: So I'm not to, there are only two ways you can do it
>> yeah
>> Itai: Either you load all of them together and wait to get all of them anytime that you need anyone of them that
you load it, I just can't think of any other way but we can discuss it later if you have any ideas so
>> Okay, I like to
>> Itai: alright
>> I think the last year you said that there would be some way in the future to access other data besides
spreadsheets. Like is there, has Google made, and is there a provision made to, that would be use on data source
either than Google spreadsheet?
>> Itai: So today there are no public data sources outside of Google spreadsheet from many data sources that are
private for users, for example in Google there are like dozens of project that use the same API internally and provide
a data source for the pages but they are not public and. In additions to our library you can find them in the
documentation and some tools gallery of library that implement the data source so you can just download them there is
one in python of Google another one in java of Google and there are many other open source and so on, so you can just
download and create your own data source. There are not, I am not aware of any other like public data source. There
are some interesting chart, like chart.net that provide an interface that you can just load the data to and create
kind of like wizard to create visualization and share them with others, but there are no tools like Google spreadsheet
or data source.
>> In my application I have to grade and delete a lot of chart and collect and when I do it after destroying charts
left and some of that in rows and memories [?], what is a true way to destroy a chart?
>> Itai: No I'm not sure I got you, could you repeat?
>> Okay if I create a chart and delete it dynamically, this charts left some data in JavaScript
>> Itai: okay
>> How I should destroy charts correctly, not to call memory leaks.
>> Itai: So generally speaking there is a java collector mechanism in JavaScript and if you create chart and if you
delete the object it should relieve the storage.
>> yes, but Google visualization chart creates some attributes on windows level
>> Itai: on what?
>> On window document object module
>> Itai: This is something if you have any specific question I can check them, generally speaking we try to avoid this
of course and we try to let everything so if you just delete the chart and everything should be deleted.
>> But it's the same thing as any kind of chart that I should try to use?
>> Itai: Okay, so again I've never heard these complains, and I would be happy to see it and of course you can send it
to the, there is a user groups on the documentation so you can just, you just send it to them.
>> Okay. Thank you.
>> Itai: Alright.
>> I'm not questioning I don't understand when you mention about Google visualization chart solution and how to
prevent a cross site single ingestion, you said that there is a customized header to http package you called the SHS,
so in other words this is not a standard implementation of http protocol, so you know I don't understand the detail
that's why I'm asking now, is it that's why we have to talk to the Google server to .
>> Itai: No, no it's totally unrelated to the question before as why the visualization go to the Google server. You
have to load them from the Google server even if you don't have any data source, even if you are just using you know
creating your JavaScript on your page and don't go to any other data source to get the data from, this is from
questions that nothing to do with security, it's about version and, it's about serving, being able to serve, it's
correct to all of the Google AJAX APIs not to this visualization chart
>> okay
>> Itai: The thing about the custom header which again I want to cover tomorrow about the data source implementation
is, the known way to ensure that our request comes from your domain and not from different domains, some people use
referrals and some other technique that are less, not that strict as to customize that so in other words if your users
use normal browsers or good browsers, any browsers that you know of, so there is no way that hackers can get from
another site and send a request to your sites, having discards themselves and the cookies, of your cookies of your
user from your site together, if there is without discussing header it can be done in some ways, it's not that simple
but it can be done, and even referrals are something that good hackers can manage and find out what fit but there is
no known way in normal browsers to get all of this information and the custom header and the cookies from a different
site, so it's safe.
>> So this is not a topic related to Google visualization package as in some other, I guess my question is as it's
there a standard http protocol part of the protocol itself or it is something you added by.
>> Itai: it's nothing new, custom header is something that is part of the http specification
>> okay, okay
>> Itai: so it's nothing that we just use something quite known technique to help you make sure that the request is
from your site, that's all.
>> Alright, thank you.
>> Itai: okay.
>> Just quickly are there any limits on how much data you can create and carry them into the visualizations API and
like how much like how many,
>> Itai: There is no strict limit like how many browsers and JavaScript so,
>> there are tens and thousand of, can you guess
>> Itai: I guess, so let's put it in either words, it doesn't make sense to send million rows to your browser in order
to visualize them right
>> right
>> Itai: You should group them or filter them or do something on the service side, if it is about thousand it should
work, if it's a few thousand it would work. If you try to use above I guess ten thousand let's say then it would take
time latency off the network until you get the data, it would take time for the browser to process it, and usually it
means that I don't know I think most of the users cannot really understand chart that contains thousand or ten
thousand of data.
>> okay, thank you.
>> Itai: alright.
>> Itai: Last one okay and after that just come here If you want to discuss.
>> For the annotated timeline and right now you only have the choice between line or area, chart type, is there any
plans to add bar or any other chart type
>> Itai: to do what?
>> For the annotated time line there is only line chart type and area chart type, is there any plans to add bar chart
to
>> Itai: Not in the near future but what you might find interesting is that thing is that in the motion that I show in
the moving bubble
>> yeah
>> Itai: there is a way to create a bar chart there
>> okay
>> Itai: there is on the top per right corner there is bars and icon there that you can use this bar which is a very,
very nice chart so that you can use bar chart there, not in the one that you asked about.
>> Is there any plans to ascends some of the chart visualization or like add more features or
>> Itai: we constantly add new features, if can you can take a look at the documentation of the last one, that we just
added more option to the table to this chart even
>> and for the table is there any plan to add column reorder?
>> Itai: to add what?
>> column reorder, reordering the columns and the table?
>> Itai: not in the very near future, and after that, I'm not sure. Alright. Thank you. [Clapping]. [Unclear voices].