MatrixAdapt | Logiciel de gestion d'Entreprise, Création et référencement des sites web

Seo Master present to you: By Uwe Maurer, Google Engineer

We're happy to announce the Google Visualization API Library for Google Web Toolkit (GWT). This has been a requested addition to GWT for some time now on the developer forum and we are excited to make it available.

You can now utilize the visualization and reporting capabilities of the Google Visualization API while writing native Java code for your GWT applications and enjoy the best of both worlds. The library includes wrappers for many of Google's visualizations, such as Bar Chart, Annotated Time Line, Map, Motion Chart, Organizational Chart and many others. We have marked all the visualizations that are currently supported by this library in the Visualization Gallery.

The library also includes classes that enable you to easily wrap any existing Visualization API-compliant visualization in GWT so that you can access it from Java complied by the GWT compiler. So if you want to wrap your own visualization or the nifty Piles of Money visualization, you can easily do so.

Lastly, the library includes a class that makes it easy to write new visualizations in GWT-compiled Java and make it available as JS for general use in the Visualization API. This is cool if you've been itching to contribute new visualizations but prefer coding in Java.

Here is example code that draws the well known Annotated Time Line chart in Java using the new Visualization API Library:

UPDATE: Changed the code font size to fit on one line so you can copy & paste

package com.blogpost.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.visualization.client.AjaxLoader;
import com.google.gwt.visualization.client.DataTable;
import com.google.gwt.visualization.client.Query;
import com.google.gwt.visualization.client.QueryResponse;
import com.google.gwt.visualization.client.Query.Callback;
import com.google.gwt.visualization.client.visualizations.AnnotatedTimeLine;


public class BlogPost implements EntryPoint {
  public void onModuleLoad() {
    AjaxLoader.loadVisualizationApi(new Runnable(){
      public void run() {
          Query query = 
                Query.create("http://spreadsheets.google.com/pub?key=pCQbetd-CptH5QNY89vLtAg");
          query.send(new Callback(){
           
            public void onResponse(QueryResponse response) {
              if (response.isError()) {
                Window.alert("An error occured: " + response.getDetailedMessage());
              }

              DataTable data = response.getDataTable();
              AnnotatedTimeLine.Options options = AnnotatedTimeLine.Options.create();
              options.setDisplayAnnotations(true);
              RootPanel.get().add(new AnnotatedTimeLine(data, options, "800px", "400px"));
            }
          });
      }}, AnnotatedTimeLine.PACKAGE);
  }
}

This code draws the same visualization that can be seen in the example for Annotated Time Line in the Visualization Gadget Gallery. Both get their data from Google Spreadsheets, only this code does so in Java instead of Javascript or as a Gadget.

Enjoy!2013, By: Seo Master

Seo Master present to you: It's Friday, time for some fun!

Here is a captivating way to visualize your Google Analytics data in a Treemap visualization and you can visualize your own data with our live demo.
(note: IE currently not supported for visualization part)





The goal of this example was to teach people how to use the Google Analytics API on App Engine in Java. As well as demonstrating how to use both OAuth and AuthSub along with the App Engine's various services. The code looked great, but the output was a boring HTML table. So I used some open source tools to transform the table into a pretty tree map visualization!

All the code has been open sourced on Google Project hosting. I also wrote an article describing how this application works making it easy for developers to use this example as a starting point for new data visualizations and other Google Data projects.

For the data retrieval part, this example uses the App Engine Java SDK and the Google Analytics Data Export API Java Client Library to retrieve data from Google Analytics. The example code implements both unsigned AuthSub and registered OAuth authorization methods allowing developers to get up and running quickly in development environments and later switch to a secure authorization method in production environments. The application also uses the Model-View-Controller pattern, making it flexible and allowing developers to extend the code for new applications. (like adding support for other Google Data APIs)

For the visualization part, I used the open-sourced Protovis SVG Visualization Library to create the Treemap. This JavaScript library is maintained by the Stanford Visualization Group and excels at creating brand new visualizations from a data set (in this case a boring HTML table). To handle all of the interactions, including rollover, tooltips and slider controls, I used JQuery. Here is the JavaScript source to the visualization part of the sample.

Enjoy!

By Nick Mihailovski, The Google Analytics API Team

P.S. If you have created any cool new visualizations using the Google Analytics Data Export API, email us so we can highlight them as well.2013, By: Seo Master

Seo Master present to you: By Nir Bar-Lev, Google Visualization Team

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


2013, By: Seo Master

Seo Master present to you: By Yaniv Shuba and Nir Bar-Lev, Google Visualization Team

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!2013, By: Seo Master

Seo Master present to you: By Nir Bar-Lev, Product Manager

We spend a fair amount of time on data display and visualization projects at Google, and we have found that the "last mile" of these projects tend to become full projects in and of themselves.

Thus when we acquired Gapminder last year, we were excited by the opportunity to use Gapminder's powerful visualization techniques to bring new life and usefulness to Google datasets. And we were not alone -- the web is home to a vibrant community of developers who build amazing visualization applications.

With the community in mind, we're please to introduce the Google Visualization API, which is designed to make it easier for a wide audience to make use of advanced visualization technology, and do so in a way that makes it quick and easy to integrate with new visualizations.

There are a two key elements here: simplicity and ubiquity. We hope we nailed the first, but of course we want to hear your feedback on that. The second will take more time, but we hope we're on the right path. We're releasing this API at an early stage so we can get continuous feedback and be sure we're building it the right way.

This launch is in tandem and in cooperation with the Google Docs team, who just announced support for gadgets and the Visualization API in spreadsheets. This includes a set of gadgets created by Google and several other companies, including some that add pivoting, grouping, and other new functionality to your spreadsheets. You can see all of those in our 'featured' list within the visualization gallery, which includes the Gapminder Motion Chart that has proven especially popular among within Google.

We hope you're as excited about the Google Visualization API as we are -- please be sure to tell us what you think. We'll also be at Google I/O on May 28-29 for deeper discussions about the API or visualization techniques in general.2013, By: Seo Master

Seo Master present to you:

(Cross-posted from The Official Google Blog)

This time of year, everyone in the United States is starting to fill out—with varying levels of enthusiasm—our federal income tax forms. Yet, after we write our checks to the IRS, most of us don’t really know exactly where our money is going.

Fortunately, there’s a new online tool to help us find out. Last year, Andrew Johnson and Louis Garcia, two developers from Minneapolis, Minn., created a website called whatwepayfor.com that uses public data to estimate how our tax money is spent. You enter your income and filing status on the site, and it creates a formatted table of numbers showing your contributions to the federal budget—down to the penny:

We’re impressed by what the website uncovers. In 2010, for example, a married couple making $40,000 a year contributed approximately $14.07 to space operations, $6.83 to aviation security and $0.91 to the Peace Corps…and those are just a few of the hundreds of expenditures revealed on the site. As we spent time exploring all of these details, it got us thinking: how we could make the information even more accessible? So we created a simple interactive data visualization:

Click the image above to try the interactive version—it lets you drag the bubbles around, change the income level and so on. You can now look at the data in a new way, and it’s a little more fun to explore. Of course, there are lots of ways to visualize the data, and we’re very sure there are many talented designers and developers around the country who can do it even better than we have.

To make that happen, we’ve teamed up with Eyebeam, a not-for-profit art and technology center, to host what we’re calling the Data Viz Challenge. Andrew and Louis have built an API to let anyone access the data, so now you can choose how to display it. Could you create a better animated chart? Something in 3D? An interactive website? A physical display somewhere in the real world? We want you to show everyone how data visualization can be a powerful tool for turning information into understanding.

You can enter the challenge at datavizchallenge.org, where you’ll also find more information about challenge and the data. The challenge starts today and ends March 27, 2011, and is open to the U.S. only. The top visualization, as chosen by a jury, will receive a $5,000 award and a shout-out on the site and this blog. We’ll announce the shortlist on the week of April 11, and the winners on April 18, a.k.a. Tax Day.

If you’re a data viz enthusiast, we hope you’ll take a look at the data and build your own creative visualization. But even if you’re not, hopefully the results will help you appreciate what data visualization can do, and its usefulness in turning raw information—like federal income tax numbers—into something you can explore and understand.

By Valdean Klump, Google Creative Lab2013, By: Seo Master