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