Posted:


We recently came across a great use of the Visualization Platform. In fact, this is something that we never thought the platform would be used for.

Steve Aitken, a developer contributing to the Visualization Developer Group, created a simple graphics calculator for Javascript-supported math functions that plots functions using the Google Visualization Scatter Chart. Here is a screenshot of a simple calculation of -sin(2x):



Steve has been kind enough to share the code with us (even though it was originally written for his girlfriend). A slightly modified version is pasted below:
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["scatterchart"]});
function drawChart(equation,xmin,xmax, numPoints, pointSize) {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'y');
data.addRows(numPoints);
var step = (xmax-xmin) / (numPoints-1);
for(var i = 0; i < numPoints; i++)
{
var x = xmin + step * i;
data.setValue(i,0,x);
with(Math) {
var y = eval(equation);
}
data.setValue(i,1,y);
}
document.getElementById("chart_div").innerHTML = "";
var chart = new google.visualization.ScatterChart(
document.getElementById('chart_div'));
chart.draw(data, {width: 600, height: 400, titleX: 'X',
titleY: 'Y', legend: 'none', pointSize: pointSize});
}
</script>
</head>

<body>
equation: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<input id="txteq" type="text" value="-sin(2*x)" />
<br />
minimum value(x): &nbsp;<input id="txtmin" type="text" value="-3.14" />
<br />
maximum value(x): &nbsp;<input id="txtmax" type="text" value="3.14"/>
<br />
Precision (number of points): &nbsp;<input id="precision" type="text" value="1000"/>
<br />
Point size: &nbsp; <input id="pointSize" type="text" value="2"/>
<br />
<input id="Button1" type="button" value="Draw Graph"
onclick="javascript:drawChart(
document.getElementById('txteq').value,
parseFloat(document.getElementById('txtmin').value, 10),
parseFloat(document.getElementById('txtmax').value, 10),
parseInt(document.getElementById('precision').value, 10),
parseInt(document.getElementById('pointSize').value, 10))" />

<div id="chart_div"></div>
</body>
</html>

We thank Steve for the inspiration and would love to see more creative uses of the platform from you.

The Visualization Team


Posted:
By Venu Vemula, Google Book Search Team

Since I joined Google, I've been working on Book Search, our project to help users discover what's inside all the world's books.

Today we are happy to include the developer community in this historic effort with the announcement of two new APIs:
  • An Embedded Viewer API, which allows you to embed book previews on your site and control them programmatically using JavaScript.
  • A robust Data API, which allows you to access full-text search results and access with users' book reviews, ratings, and individual My Library collections.
By allowing anyone to integrate with the complete Google Book Search index, we hope this broader community will find new ways to connect users with books that are interesting and relevant to them.

To learn more about the sites already using these APIs — including Books-A-Million, Worldcat, and GoodReads — check out our post on the Book Search Blog.

Or, if you want to dig right in, go straight to our newly revamped developer site.

Posted:
By Alyssa England, Google Developer Programs

We are excited to open registration for one last Google Developer Day this year, to be held on November 2 in Tel Aviv, Israel.

At this Google Developer Day, developers will learn about the latest with our APIs and developer tools, ranging from App Engine and OpenSocial to Google Chrome, plus more. The topics will vary so you can be sure to discover new and interesting best practices. And don't forget to socialize with fellow developers and Google engineers.

If you are in Europe, registration for some of the October Google Developer Days is still open, including Italy and Czech Republic, though space is running out fast. We hope you can join us for one of our upcoming events.

Posted:
By Eric Sachs, Product Manager, Google Security

Federated login has been a goal of the Internet community for a long time, but its usage is still quite low, especially in the consumer space. This has led to the constant need for users to create yet another account to log in to a new website, and most consumers use the same password across websites even though they realize this is a poor security practice. In the enterprise space, many software-as-a-service vendors such as Salesforce.com and Google Apps for Your Domain do support federated login, but even those vendors encounter usability problems.

On September 12 the OpenID Foundation held a meeting to gather feedback on how to evolve the best practices for using OpenID so that it might be used by websites in a larger number of market segments. The meeting included representatives from many mainstream websites including The New York Times, BBC, AARP, Time Inc., and NPR. Google has been researching federated login techniques, and at the meeting we showed how a traditional login box might evolve (see below) to a new style of login box that better supports federated login.



We also shared a summary of our usability research that explains how this helps a website add support for federated login for some users without hurting usability for the rest of the website's user base. We hope that industry groups, such as this committee in the OpenID Foundation, will continue to share ideas and experiences so we can develop a model for federated login that can be broadly deployed by websites and broadly used by consumers. If your company has experience or research that you can share, we hope you will get involved with the OpenID community and join the further discussions on this topic.

Posted:


Visualizations are usually nifty, small pieces of code that make our data come alive. In order to live in peace on the web, they need to be streamlined and compact.

At times, these visualization applications are a product of a creative designer who publishes their work for free for all of us to use. Often these designers do not have the time and resources to deal with data input structures.

Therefore, when integrating with a specific visualization, we often need to format the DataTable just right, so it fits the way the visualization expects to get the data. Say as an example, a first column needs to be of type date, the second a number and the third a text comment. What if our DataTable is not in that exact format? What if we want to create several visualizations over the same data source? To date this required manipulating the DataTable to fit the particular visualization and made the API a bit less flexible.

To make fitting data to the visualization even easier and simpler, and the Visualization API even more flexible, we've borrowed from the well-known SQL concept of Views and created our own DataView. Today, with Google Visualization's DataView you can reorder columns and "hide" a column such that the view includes only the columns you need to visualize. And, the DataView stays fully synchronized with the DataTable at all times, so any change to the underlying DataTable is reflected in the DataView.

Let's see a simple example that demonstrates this.

The following code creates three charts from a DataTable. The data displayed is yearly results for the imaginary Acme Rail company. We display a table, a bar chart and a BarsOfStuff chart. The BarsOfStuff chart is used because we are showing data for Acme Rail, and we thought it'd be cool to use the little trains in the chart:
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<link rel="stylesheet" type="text/css" href="http://visapi- gadgets.googlecode.com/svn/trunk/barsofstuff/bos.css"/>
<script type="text/javascript" src="http://visapi- gadgets.googlecode.com/svn/trunk/barsofstuff/bos.js"></script>
<script type="text/javascript">

google.load("visualization", "1", {packages:["barchart","table"]});

google.setOnLoadCallback(drawData);

// Initialize the DataTable
function drawData() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Line');
data.addColumn('number', 'Revenue');
data.addColumn('number', 'Expenses');
data.addColumn('number', 'Commuters');
data.addRows(4);
data.setValue(0, 0, 'NorthEast');
data.setValue(0, 1, 38350);
data.setValue(0, 2, 15724);
data.setValue(0, 3, 1534);
data.setValue(1, 0, 'Cross-Pacific');
data.setValue(1, 1, 25740);
data.setValue(1, 2, 12613);
data.setValue(1, 3, 1170);
data.setValue(2, 0, 'Midwest');
data.setValue(2, 1, 11550);
data.setValue(2, 2, 4389);
data.setValue(2, 3, 660);
data.setValue(3, 0, 'Pan-America');
data.setValue(3, 1, 21720);
data.setValue(3, 2, 9774);
data.setValue(3, 3, 362);

//Draw the charts
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true});

var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, is3D: false, title: 'Acme Rail Yearly Performance'});

var stuffoptions = {title: 'Acme Rail Commuters by Line'};
var stuffchart = new BarsOfStuff(document.getElementById('stuff_div'))
stuffchart.draw(data, stuffoptions);

}
</script>
</head>

<body>
<div id="table_div"></div>
<div id="chart_div"></div>
<div id="stuff_div" style="width: 400px"></div>
</body>
</html>
The result looks like this:



The problem is that BarsOfStuff is a cool chart, but it is very simple. It can only accept a single data series in the format: [Series Title; Series Value].

Notice that right now the chart compares revenue per rail line, but we wanted it to display the number of commuters per line (as the title suggests).

How can we fix this? With DataView it is a simple matter of adding two lines of code and pointing the BarsOfStuff chart to the DataView instead of the DataTable. We add:
        var view = new google.visualization.DataView(data);
view.setColumns([0,3]);
And initialize the BarsOfStuff chart with the DataView:
        stuffchart.draw(view, stuffoptions);
And we get:



Voila! The BarsOfStuff chart now shows the data we wanted it to visualize - commuters per rail line.

Yet another new feature to make developing complex dashboards with Google Visualization even easier is the clone() method, used to clone a DataTable instead of constructing a new copy from scratch.

We're working on making the DataView even more powerful, and of-course, working on other features and additions to the Visualization platform.

For more information on Google Visualization, check out our developer documentation pages.

Happy visualizing!

Posted:


If you have a custom search engine, you can jazz up the customization gig by integrating Subscribed Links into your search engine. The Subscribed Links API enables you to create custom result snippets, as well as define the keywords or queries that would trigger them.

For instance, users who want to search for information about the comic book character Asterix might do the following: Type the search query in the search box, scan the search results for the most promising website, click the link to that website, wait for the website to load, and—finally—skim the page for pieces of pertinent information. However, if your custom search engine has a subscribed link for comic book characters, users can just type "asterix" in the search box and immediately get your custom result at the top of the results page. They don't have to scroll, scan, or click anything else to get the answer to their query.

Subscribed Links can directly answer questions, display links to services, provide news and status information, and calculate quantities, among other things. To get an idea of what you can do with Subscribed Links, read the developer guide and check out some live examples in the Google Subscribed Links Directory.

As if that's not cool enough, you can also integrate subscribed links created by other developers with your search engine. To learn more, read the Custom Search Developer's Guide.

Posted:
By Detlev Schwabe, Software Engineer

Many developers and partners use the Picasa Web Albums Data API to enable users to upload photos to Picasa from web sites and desktop applications. Now, we are excited to announce the same PWA Data API can be used to upload videos to Picasa Web Albums as well!

The API commands for uploading videos are similar to those you may already use to upload photos. You can upload videos up to 100MB in AVI, QuickTime, MPEG4, WMV and other formats. The system will automatically create a thumbnail image to represent the video, or you can choose one yourself at any time.

There are many ways you can use video uploading, including enabling users to upload all the content from their cameras — including still images as well as videos — all to Picasa Web Albums at the same time. And, of course, the Video Uploader API is the perfect way to integrate dedicated webcams with Picasa!

The Video Uploader API is part of the standard Picasa Web Albums Data API. You can find the updated documentation here.

Posted:


It has been an exciting couple of days. Google Chrome launched along with a new blog for Chromium the underlying open source project. Whenever you see an internal project go live to the world, and see the source become open it feels great. We've reposted the blog's first post below, by Ben Goodger:

Today, Google launched a new web browser called Google Chrome. At the same time, we are releasing all of the code as open source under a permissive BSD license. The open source project is called Chromium - after the metal used to make chrome.

Why did Google release the source code?

Primarily it's because one of the fundamental goals of the Chromium project is to help drive the web forward. Open source projects like Firefox and WebKit have led the way in defining the next generation of web technologies and standards, and we felt the best way we could help was to follow suit, and be as open as we could. To be clear, improving the web in this way also has some clear benefits for us as a company. With a richer set of APIs we can build more interesting apps allowing people to do more online. The more people do online, the more they can use our services. At any rate, we have worked on this project by ourselves for long enough - it's time for us to engage with the wider web community so that we can move on to the next set of challenges.

We believe that open source works not only because it allows people to join us and improve our products, but also (and more importantly) because it means other projects are able to use the code we've developed. Where we've developed innovative new technology, we hope that other projects can use it to make their products better, just as we've been able to adopt code from other open source projects to make our product better.

How will we be working with the open source community?

To begin with, we are engaging with the WebKit community to integrate our patches back into the main line of WebKit development. Because of Chromium's unique multi-process architecture, the integration of the V8 JavaScript engine, and other factors, we've built a fairly significant port of WebKit on Windows, and are developing the same for Mac OS X and Linux. We want to make sure that we can find a productive way to integrate and sync up with the WebKit community in this effort as we move forward.

Today, you can visit our project website at www.chromium.org, where you can get the latest source code or the freshest development build. If you're interested in keeping track of what's going on, you can join one of our discussion groups, where you can participate in development discussions and keep track of bugs as they're filed and fixed. Maybe you'll want to fix a few, too! You'll also find information on reporting bugs and all the various other aspects of the project. We hope you'll check it out!

This is the Chromium blog. The posts here will be of a mostly technical nature, discussing the design theory and implementation details of work we've done or are doing. Over the next few weeks there'll be a number of posts that give a high level tour of the most important aspects of the browser.

Finally, if you've not yet done so, take Google Chrome for a spin. You can download it from http://www.google.com/chrome/.