Como usar Google Chart Tools com o IBM Mashup Center

Saiba como o IBM Mashup Center pode funcionar facilmente com pacotes de visualização de terceiros

Google Chart Tools fornece um ótimo conjunto de recursos de visualização, como gráfico de dispersão e calibrador, que complementam os tipos de gráfico disponíveis no widget de gráficos do IBM Mashup Center. Veremos como o Google Chart Images pode ser usado com o IBM Mashup Center para gerar marcadores no widget de mapeamento Navteq. Além disso, o artigo descreve a criação de um widget customizado que usa a API Google Chart Tools para visualizar dados de feeds de dados da empresa.

Louis Mau, IBM Mashup Center Solution Architect, IBM

Louis Mau faz parte da equipe de desenvolvimento do InfoSphere MashupHub. Seu foco atual é ajudar os clientes a criarem aplicativos situacionais usando o IBM Mashup Center. Antes dessa função, ele foi arquiteto do DB2 Everyplace Sync Server, que ajuda a sincronizar dados de bancos de dados corporativos em um banco de dados de pequenas dimensões executado em dispositivos móveis.



Rajesh Kartha, IBM Mashup Center Solution Architect, IBM Cloudscape Group

Rajesh Kartha works at IBM Silicon Valley Lab in San Jose as a Solution Architect for IBM Mashup Center. He has extensive experience in software development on various IBM Information Management products.



28/Nov/2011

Visão geral

O IBM Mashup Center inclui o IBM InfoSphere® MashupHub e IBM Lotus® e a caixa de ferramentas de Mashups.

O Google Chart Tools, incluindo gráfico de dispersão e calibrador, pode ser acessado como imagens ou por API, e este artigo descreve ambas as abordagens. O Google Chart Tools Image Charts permite gerar dinamicamente gráficos como imagens usando uma cadeia de caractere URL. Veremos como usar as imagens geradas como marcadores de localização no widget de mapeamento do IBM Mashup Center. A API do Google Chart Tools fornece classes JavaScript que podem ser usadas para desenvolver visualização altamente interativa. Este artigo mostrará como desenvolver um widget de amostra usando a API de gráfico que pode exibir dados dos feeds de dados da empresa gerados pelo IBM Mashup Center.

Este artigo supõe familiaridade com mashups e feeds de criação, bem como com as noções básicas de escrita de widget. Em especial, é preciso saber programar em JavaScript e ter alguma experiência no uso do IBM Mashup Center. Os artigos "Creating a feed from an enterprise database" e "Developing widgets for IBM Mashup Center" na seção Recursos fornecem informações de introdução que talvez ajudem a acelerar seu aprendizado de algumas das noções básicas da criação de mashups.

Usando imagens de gráfico como marcadores de um mapa

O widget Navteq Map exibe informações de localização em um mapa. Em geral, a origem de dados do mapa é um feed tirado de um website ou de um feed criado usando o conjunto de geradores de feed do IBM Mashup Center. O feed deve estar em formato RSS ou ATOM e cada elemento entry corresponde a uma localização a ser exibida no mapa e deve conter quatro elementos que especifiquem o seguinte:

  • O endereço ou localização do marcador
  • Os dados do evento a serem enviados ao se clicar no marcador
  • As informações a serem exibidas nas bolhas pop-up do marcador
  • O ícone (imagem pequena) a ser usado como marcador para essa localização/endereço

Para o elemento Icon, o widget Navteq suporta o uso de números simples que se refiram a ícones predefinidos fornecidos com o widget. Esses ícones predefinidos incluem imagens normalmente usadas em mapas para marcar localizações, p.ex., casa, carro, alfinete, etc. Contudo, os usuários não estão limitados a esses ícones predefinidos. O widget Navteq suporta, também, o uso de uma URL no elemento Icon que aponte para uma imagem arbitrária. Usando URLs diferentes para localizações diferentes, as imagens podem ser geradas dinamicamente e variar de uma localização para outra. Para o bom funcionamento das imagens, elas devem ser de tamanho pequeno e ter um segundo plano transparente. A Figura 1 mostra um exemplo de uso de gráficos como ícones em um mapa.

Figura 1. Gráficos como marcadores de mapa
Gráficos como marcadores de mapa

Os ícones de gráfico identificam as localizações do cliente. Cada gráfico de barras contém as quantias de vendas para cada ano entre 2008 e 2011. Qualquer serviço de geração de gráfico que produza gráficos dinamicamente como imagens pode ser usado para esse propósito. A seção a seguir mostra como gerar o mapa ilustrado na Figura 1 usando Google Image Charts.

Supõe-se que já haja um feed que exibe uma lista de clientes no widget de mapa Navteq usando os ícones estáticos integrados. Usaremos o criador de mashup de dados do IBM Mashup Center para modificar o feed para usar Google Image Charts como marcador. Consulte a seção Recursos para ver os links para a documentação do IBM Mashup sobre o widget Navteq e o criador de mashup de dados.

Gerando URLs de Google Image Charts usando o criador de mashup de dados

O gráfico de imagem do Google Chart Tools retorna uma imagem de gráfico em resposta a uma solicitação GET ou POST de URL. A API pode gerar muitos tipos de gráficos, de gráficos de setores circulares a gráficos de linha, além de códigos QR e fórmulas. Todas as informações sobre o gráfico, como dados, tamanho, cores e rótulos, fazem parte da URL. Por exemplo, a seguinte é a URL para uma das imagens de gráfico mostradas anteriormente na Figura 1. A URL da Listagem 1 foi dividida em diversas linhas para caber na página.

Lista 1. Exemplo de URL do Google Image Charts
http://chart.apis.google.com/chart?chl=|||&chco=ff0000|0000ff|800000|00ff00
                                  &cht=bvs&chs=40x40&chbh=3,2,3
                                  &chds=0,2000&chf=bg,s,FFFFFF00
                                  &chd=t:1735.92,1335.08,1582.08,1555.08

Os parâmetros de URL usados na Listagem 1 são explicados a seguir.

  • chl=||| - especifica cadeia de caractere vazia para rótulos a fim de suprimi-los.
  • chco=ff0000|0000ff|800000|00ff00 - a cor das quatro barras, correspondendo a 2008,2009,2010,2011, respectivamente.
  • cht=bvs - gráfico de barras vertical.
  • chs=40x40 - tamanho da imagem gerada. Pode até ser tornada variável com base nas vendas totais.
  • chbh=3,2,3 - a largura de cada barra, o espaço entre elas e entre os grupos. Tudo em número de pixels. No exemplo, o último valor não é usado, embora deva ser especificado.
  • chf=bg,s,FFFFFF00 - o segundo plano branco deve ser tornado transparente.
  • chs=0,2000 - o intervalo de dados.
  • chd=t:1735.92,1335.08,1582.08,1555.08 - a lista separada por vírgula de valores do gráfico.

Os nomes de parâmetro de URL são abreviados, mas são bem fáceis de decifrar. Todos começam com o prefixo ch . Por exemplo, aquele que especifica o rótulo termina com l; aquele que especifica o tipo de gráfico termina com t. A seção Recursos contém links para a documentação do Google Charts.

A maioria dos parâmetros de URL é idêntica em todas as imagens de gráfico que aparecem no mapa de amostra anterior e são codificados permanentemente. A única parte da URL que varia de um cliente para outro é a altura de cada barra, correspondendo à quantia de vendas para cada um dos quatro anos entre 2008 e 2011. Na URL mostrada na Listagem 1, as quantias de vendas são números separados por vírgula no parâmetro chd=t:1735.92,1335.08,1582.08,1555.08. Veremos como o parâmetro chd pode ser gerado dinamicamente.

Mashup de dados para gerar URLs de imagens de gráfico

O mashup de dados para URLs de Google Image Charts é bastante simples e usa os seguintes dois feeds de entrada.

  1. Um feed Atom no formato do widget Navteq no qual cada elemento entry corresponde a um cliente. Como mostrado na Listagem 2, também se supõe que cada entrada leva o ID de cliente.
    Lista 2. Feed Atom no formato do widget Navteq
    <feed xmlns="http://www.w3.org/2005/Atom">
       ::::::::::
    <entry><content>
       <Info>IBM<br>555 Bailey Avenue San Jose CA</Info>
       <Data>1060</Data>
       <Address>-121.7484391,37.1954075</Address>
       <Icon>1</Icon>
    </content></entry>
       :::::::::::::::::
    </feed>

    Repare que, no exemplo anterior, o ID de cliente é mantido no elemento Data , e os dados do evento são passados para outros widgets quando se clica no marcador.
  2. Um feed Atom que contenha vendas anuais de 2008 a 2011 é parametrizado por ID de cliente, como mostrado na Listagem 3.
    Lista 3. Feed Atom parametrizado para vendas anuais
    <feed xmlns="http://www.w3.org/2005/Atom">
      ::::::::::
    <entry>:::<content><year>2008</year><totalAmt>1735.92</totalAmt></content></entry>
    <entry>:::<content><year>2009</year><totalAmt>1335.08</totalAmt></content></entry>
    <entry>:::<content><year>2010</year><totalAmt>1582.08</totalAmt></content></entry>
    <entry>:::<content><year>2011</year><totalAmt>1555.08</totalAmt></content></entry>
    </feed>

Em alto nível, o mashup de dados mostrado na Figura 2 incluirá/modificará um elemento Icon em cada entry do alimentar do widget Navteq. Ele gerará dinamicamente uma URL de Google Image Charts usando os dados de vendas de cada cliente. Os dados de dois feeds de entrada são levados para o Builder usando dois operadores Source .

Figura 2. Mashup de dados para imagens de gráfico como marcadores
Mashup de dados para imagens de gráfico como marcadores

O padrão Repeating Entry (na guia Advanced do operador Source) no feed de vendas anuais é alterado de entry para feed. Ambos são então conectados a um operador ForEach . Certifique-se de que o feed formatado para o widget Navteq seja o principal e que o feed de vendas anuais seja o feed de detalhes. Para cada elemento entry no feed principal, o ID de cliente é passado como parâmetro para o feed de detalhe para recuperar os dados de vendas daquele cliente. Esses três operadores são mostrados à esquerda da Figura 2, mostrada anteriormente.

O operador ForEach injetará o feed de vendas completo par cada cliente em cada elemento entry . A saída do operador ForEach é então passada para o operador Transform . Como mostrado na Figura 3, pode-se ver a estrutura do elemento entry injetada pelo operador ForEach à direita (entrada) do operador Transform .

Figura 3. Operador Transform para cada entrada de localização de cliente
Operador Transform para cada entrada de localização de cliente

Agora, estamos prontos para gerar as URLs de Google Image Charts.

Gerando o parâmetro de URL chd

É simples gerar a parte constante das URLs de Google Image Charts. Use a função concat e forneça os parâmetros de URL do gráfico como uma ou mais sequências de texto. Lembre-se que injetou o feed completo com diversas entradas, cada qual contendo a quantia de vendas para os anos de 2008 a 2011. A parte mais difícil é converter as quantias de vendas que aparecem como texto nos quatro elementos entry separados em uma única cadeia de caractere separada por vírgulas. Isso é feito usando a função String-join mostrada na Figura 4. Basta selecionar o elemento que contém a quantia de vendas como primeiro argumento da função String-join e especificar vírgula como segundo parâmetro.

Figura 4. Função String-join para obter as quantias de vendas como lista separada por vírgula
Função String-join para obter as quantias de vendas como lista separada por vírgula

Isso conclui o mashup de dados e podemos ver a saída na Listagem 4.

Lista 4. Saída de mashup de dados
<feed xmlns="http://www.w3.org/2005/Atom">
   ::::::::::
<entry><content>
   <Info>IBM<br>555 Bailey Avenue San Jose CA</Info>
   <Data>1060</Data>
   <Address>-121.7484391,37.1954075</Address>
   <Icon>
http://chart.apis.google.com/chart?chl=|||& ... &chd=t:1735.92,1335.08,1582.08,1555.08
   </Icon>
</content></entry>
   :::::::::::::::::
</feed>

Uma versão similar ao que foi descrito anteriormente se encontra no Lotus Greenhouse.

API do Google Chart Tools

O Google Image Chart funciona muito bem, mas exige que os dados sejam enviados para o servidor do Google para renderização. Isso talvez não seja adequado em todos os aplicativos. O Google Chart Tools também fornece um pacote de API de gráficos de JavaScript que, para a maioria dos tipos de gráfico comuns, renderiza a visualização no navegador sem ter de enviar dados para o servidor do Google.

Além disso, o pacote de API de gráficos de JavaScript pode expor eventos que permitem conectá-los a outros widgets a fim de criar aplicativos de mashup complexos. Na seção Recursos , encontra-se o link para a documentação da API do Google Charts. De acordo com a documentação, os gráficos são renderizados usando tecnologia HTML5/SVG para fornecer compatibilidade entre navegadores (incluindo VML para versões mais antigas do Internet Explorer) e portabilidade entre plataformas para iPhones, iPads e Android.

O restante do artigo mostra o processo de desenvolvimento de um widget muito simples que encapa o pacote de JavaScript de Google Charting. Novamente, suporemos que haja familiaridade com as noções básicas de desenvolvimento de iWidget. Se estiver interessado em usar o widget, poderá fazer o download dele pela seção Downloads , e pular para a próxima seção.

Widget simples que se integra à API do Google Chart Tools

Um widget é especificado por seu arquivo XML de definição. A Listagem 5 mostra a seção mais importante do arquivo XML de definição de widget.

Lista 5. Trecho do arquivo XML de definição de widget
<iw:iwidget name="sample.mashupcenter.GoogleChart"
            xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget"
            allowInstanceContent="true"
            supportedModes="view edit"
            mode="view"
            iScope="sample.mashupcenter.GoogleChart"
            lang="en">

<iw:resource uri="GoogleChart.js" />


<iw:event id="DataUrl" eventDescName="DataUrlDesc"
          handled="true" onEvent="handleDataURL" />  
<iw:eventDescription  id="DataUrlDesc" payloadType="text"
          description="Url to retrieve Data" lang="en" /> 

<iw:event eventDescName="desc_chartClicked" id="chartClicked"
          published="true"/>
<iw:eventDescription lang="en" id="desc_chartClicked"
          description="A part of the chart was clicked" payloadType="text"/>

<iw:content mode="view">
<![CDATA[
    <div  id="_IWID_ChartArea"></div>
]]>
</iw:content>

O atributo iScope do iWidget define o nome da classe da biblioteca Dojo JavaScript que implementa o widget. O elemento iresource especifica o arquivo JavaScript que contém a classe da biblioteca Dojo especificada no atributo iScope . Os arquivos especificados usando o elemento iresource serão carregados antes de o widget ser instanciado. Os seguintes dois eventos são definidos.

  1. DataUrl - o evento tem o atributo chamado handled que o indica como evento de recebimento para mudar a URL de dados de gráfico. O atributo onEvent define o método JavaScript que manipula o recarregamento dos dados ao receber uma nova URL. Isso permite que o widget mude o que é transformado em gráfico dinamicamente.
  2. chartClicked - o evento tem o atributo published que indica que se trata de um evento de envio. Como o nome sugere, ele será disparado quando alguém clicar no gráfico.

O elemento content com o atributo de modo configurado para visualizar define a área HTML para exibir o gráfico no modo de visualização. É muito simples e consiste em um div vazio. Repare que ele contém um atributo do ID que consiste na cadeia de caractere _IWID_ChartArea. O special _IWID_ prefix será substituído pelo ID de instância de widget real gerado pela estrutura quando o widget é instanciado. Isso abrange a parte mais importante do arquivo de definição. Pode-se ver um arquivo completo XML e JavaScript de definição de widget fazendo o download o arquivo zip de widget na seção Downloads .

A seção a seguir explica a implementação de JavaScript.

Download do pacote de API do Google Chart Tools

A primeira coisa a fazer na implementação de JavaScript do widget é o download do pacote de JavaScript a partir do Google. Há duas bibliotecas envolvidas.

  • Biblioteca Google AJAX API - Essa API é usada para carregar outras bibliotecas e manipular algumas funcionalidades principais, como manipulação de eventos. Essa biblioteca de JavaScript é uma API comum usada para carregar a biblioteca de visualização do Google e outras bibliotecas do Google, como as APIs Search e Data.
  • Bibliotecas de visualização do Google - A biblioteca corechart inclui classes e métodos comuns usados para criar e manipular visualizações. Inclui também várias classes de gráfico comuns, como setores circulares, de barra, etc. Para suas finalidades, também faça o download de bibliotecas adicionais de gráficos geográficos e calibrador.

O primeiro pacote, Google AJAX API, é transferido por download dinamicamente ao inserir a tag script na página de mashup, e não é explicado em mais detalhes aqui. Pode-se ver como isso é feito no arquivo de implementação GoogleChart.js. Para fazer o download das bibliotecas de visualização do Google, como já explicado, é preciso fazer o download delas usando a Google AJAX API. Isso é feito na função _loadVisualization mostrada na Listagem 6.

Lista 6. Função loadVisualization
    _loadVisualization: function()
    {
        if ( !window[ 'google'] ) {
            setTimeout( dojo.hitch( this, this._loadVisualization), 500);
        } else {
            try {
                // Load the Visualization API corechart package developed by Google.
      // Set a callback to run when the Google Visualization API is loaded.
                google.load( 'visualization', '1'
                           , { 'callback' : dojo.hitch(this, this._doneLoading)
                             , 'packages':['corechart', 'geochart' , 'gauge']}
                           );

                // google.setOnLoadCallback(  dojo.hitch(this, this._doneLoading)   ); 
            } catch ( e ) {
                this.debugTrace("GoogleChart _loadVisualization exception=" + e.message );
            }
        }		

    },

A primeira coisa a notar na função anterior é que é preciso testar e confirmar se a Google AJAX API (if ( !window[ 'google'] )) foi carregada antes de poder usar google.load para fazer o download das bibliotecas de visualização. Em caso negativo, é preciso configurar um timer e aguardar o download ser concluído antes de tentar novamente. A outra coisa a observar é que é preciso especificar o retorno de chamada para google.load em vez de fazer uma chamada separada para google.setOnLoadCallback.

Configuração e renderização de widget

Depois que todas as bibliotecas necessárias tiverem sido carregadas, a criação da visualização é bastante simples. Basta saber o tipo de visualização, onde obter os dados de entrada e customizações, como título, cor, e assim por diante. A Figura 5 mostra o formulário HTML para coletar essas informações de configuração no modo Edit. O fragmento HTML que gera o formulário está contido no arquivo de definição do widget, que fazia parte dos detalhes que foram ignorados.

Figura 5. Configuração reunida nas configurações Edit
Configuração reunida nas configurações Edit

A maioria dos pacotes de gráfico fornece uma grande variedade de opções para customizar a visualização. A API do Google Chart Tools não é diferente. Em vista do grande número de opções disponíveis, é possível optar por fornecer controles individuais de interface com o usuário para inserir esses valores. Em vez disso, é fornecida aqui uma caixa de texto para inserir as opções de gráfico como a cadeia de caractere JSON. Consulte a documentação para cada tipo de gráfico para determinar quais opções estão disponíveis. É possível encontrar links para a documentação de gráficos e o formato JSON na seção Recursos .

Supondo-se que as informações de configuração tenham sido fornecidas, renderize a visualização desejada na função _drawChart , mostrada na Listagem 7. Primeiro, ela chama a função de conveniência createVisualizationObj para criar uma instância de objeto de visualização do Google com o tipo de gráfico especificado. De acordo com a documentação da API do Google Chart: "Há um evento que qualquer gráfico selecionável deve disparar: o evento selecionado." Para monitorar o evento selecionado, registre _cbSelectHandler no objeto de visualização do Google como função de retorno de chamada do evento selecionado. A seguir, a cadeia de caractere JSON de opções de gráfico é analisada chamando a função dojo.fromJson para convertê-la em objeto JavaScript. Por fim, o gráfico é renderizado chamando o método de desenho com os dados e as opções de gráfico como parâmetros.

Lista 7. Função _drawChart
    // called when data received or onSizeChange
    _drawChart: function( )
    {
        ::::::::::::::::::::

        this.googleVisObj = this.createVisualizationObj( this.ChartType  );
        // "select" is the only event common to all visualization
        google.visualization.events.addListener( this.googleVisObj
                                               , 'select'
                                               , dojo.hitch(this,this._cbSelectHandler));
        :::::::::::::::::::::

        var options    = dojo.fromJson( this.ChartOption );
        options.width  = this.width;
        options.height = this.height;

        ::::::::::::::::::::

        this.googleVisObj.draw(this.gDataTable, options );

        ::::::::::::::::::::
    },

Manipulação de eventos

A função de manipulador selecionada _cbSelectHandler é chamada sempre que uma parte selecionável do gráfico é clicada. Ao contrário de outros eventos do Google Chart, a função de manipulador não é chamada com nenhum parâmetro. Para ver o que foi selecionado, a getSelection() no objeto de visualização do Google deve ser chamada para recuperar um array de objetos que descreve os elementos de dados selecionados. Além dos setores de um gráfico de setores circulares ou das barras de um gráfico de barras, outros componentes, como a legenda, podem ser selecionáveis também. Na implementação atual, apenas uma seleção de elementos visuais correspondentes a uma única célula dos dados é suportada. Como mostrado na Listagem 8, célula refere-se a uma célula na tabela que é o formato de dados de entrada para todos os tipos de gráfico.

Lista 8. Função de manipulador
    // The select event does not pass any properties or objects to the handler
    _cbSelectHandler: function(  ) {
        this.debugTrace( "GoogleChart select event"  );

        var  selections = this.googleVisObj.getSelection();
        if ( !selections || selections.length < 1 ) return; // ignore if nothing selected

        // pick first of returned object array describing the selected data elements
        var  selection  = selections[0];

        // If both row and column are specified, the selected element is a cell.
        // If only row is specified, the selected element is a row. If only column
        // is specified, the selected element is a column.
        // we will only handle cell i.e. not legend selection which returns the column
        // use typeof to handle 0 being a legitimate return value!
        if (   typeof( selection.row ) != undefined
           &&  typeof( selection.column ) != undefined ) {
            // first column, index 0, is always x value
            var eventData = this.gDataTable.getValue( selection.row, 0 );
            this.iContext.iEvents.fireEvent( "chartClicked", null, eventData );
        }
    },

Para determinar se uma célula foi clicada ou selecionada, verifique se o objeto de seleção retornado tem tanto a propriedade row como column . Nesta implementação, a primeira coluna da linha identificada pelo objeto de seleção é retornada como dados do evento chartClicked .

Manipulação de dados de entrada

Como mencionado na seção anterior, todos os gráficos aceitam seus dados em uma tabela. Cada coluna é de um único tipo de dados que deve ser especificado de forma explícita. Em conformidade com todos os outros widgets prontos, o widget Google Chart descrito aqui aceitará qualquer feed Atom como entrada. O que é diferente aqui é o requisito de elemento adicional metadata incluído no elemento-raiz feed . Os elementos filho do elemento metadata devem ser um subconjunto dos elementos contidos em cada elemento entry/content do feed. A Listagem 9 mostra o feed de entrada do exemplo GeoMap, descrito na seção Usando o widget Google Chart para criar uma seção GeoMap.

Lista 9. Feed Atom para o GeoMap
<feed xmlns="http://www.w3.org/2005/Atom">
  ::::::::::::::::::::
  
  <metadata>
	<Country>string</Country>
	<Popularity>number</Popularity>
  </metadata>
  
  <entry>
    <content>
        <Country>United States</Country>
        <Popularity>430</Popularity>
    </content>
  </entry>

  ::::::::::::::::::::::::::::::

</feed>

Repare que a ordem de ocorrência dos elementos filho deve ser a mesma, e o valor pode ser string ou number. Tipos de dados adicionais, como date ou time atualmente não são suportados. As informações de tipo de dados e os dados reais em cada entrada do feed Atom precisam ser extraídos e convertidos em um objeto Google DataTable, o formato exigido pelo pacote de visualização do Google. Isso é feito na função dataFromNodeList , mostrada parcialmente na Listagem 10. Visto que a lógica é bem simples, não será analisada adicionalmente aqui.

Lista 10. dataFromNodeList
    dataFromNodeList: function( nodeList, columnList )
    {
        var  dataTab = new google.visualization.DataTable();
        for ( var k = 0  ;  k < columnList.length  ;  k++ )
            dataTab.addColumn( columnList[k].type, columnList[k].name );
        :::::::::::::
    }

Encontre a implementação completa fazendo o download o arquivo zip do widget a partir da seção Downloads . O arquivo zip do widget também contém um arquivo leia-me com informações adicionais de uso. Isso conclui a breve descrição do funcionamento interno do widget Google Chart. A próxima seção descreve como usar o widget.

Usando o widget Google Chart para criar um GeoMap

Nesta seção, queremos exibir os dados relacionados ao consumo de café em países selecionados usando o widget Google Chart. Os dados de amostra encontram-se em um arquivo CSV chamado Coffee_Popularity.csv, incluído na seção Downloads .

  1. Faça o upload do arquivo CSV e crie um feed Atom usando o IBM Mashup Center (IMC). Para usar o feed Atom como entrada para o widget Google Chart, é preciso incluir uma seção de metadados como já mostrado na Listagem 9. É fácil fazer isso com o desenvolvedor de mashup de dados.
  2. Como mostrado na Figura 6, para criar o mashup de dados, use um operador Source para trazer o feed de CSV criado anteriormente no editor. Conecte o operador Source ao operador Publish, onde a seção necessária <metadata> do widget Google Chart pode ser criada.
    Figura 6. Mashup de dados simples para criar o feed Atom necessário para o widget Google Chart
    Mashup de dados simples para criar o feed Atom necessário para o widget Google Chart
  3. A partir do IMC v3.0, o operador Publish permite criar qualquer formato XML desejado, incluindo manualmente os elementos na árvore de saída final ou importando um modelo existente. Neste exercício, visto que é preciso criar apenas três elementos e os nós de texto correspondentes, pode-se fazer isso manualmente. Como mostrado na Figura 7, clique nas propriedades Publish e selecione Custom para a seção Header e ATOM para a seção Feed Type. Dê um clique com o botão direito do mouse no elemento-raiz, nesse caso <feed> e selecione New Element para criar o elemento <metadata> . Pressione Enter.
    Figura 7. Operador Publish, criar um elemento <metadata>
    Operador Publish, criar um elemento <metadata>
  4. Siga o mesmo padrão para criar os elementos filho. Clique com o botão direito do mouse no elemento <metadata> e crie os elementos filho <Country> e <Popularity> como mostrado na Figura 8.
    Figura 8. Operador Publish, criar elementos filho sob o elemento <metadata>
    Operador Publish, criar elementos filho sob o elemento <metadata>
  5. Como mostrado na Figura 9, dê um clique com o botão direito do mouse nos elementos <Country> e <Popularity> , selecione New Text e inclua um nó de texto sob cada um deles.
    Figura 9. Operador Publish, criar nós de texto sob elementos filho
    Operador Publish, criar nós de texto sob elementos filho
  6. Como mostrado na Figura 10, crie o nó de texto string para <Country> e, para <Popularity> , crie-o como number.
    Figura 10. Operador Publish, criação de nó de texto
    Operador Publish, criação de nó de texto
  7. A seção <metadata> no cabeçalho do feed acabou de ser criada. Agora, é preciso anexar os elementos de repetição que vêm do operador anterior para concluir o feed. Isso pode ser feito clicando com o botão direito do mouse no <feed> (elemento-raiz) e selecionando Attach repeating element, como mostrado na Figura 11.Selecione o elemento entry na caixa de diálogo subsequente e clique em Attach para concluir a tarefa. Os elementos de repetição são então anexados e fazem parte do feed final.
    Figura 11. Operador Publish, anexar elemento de repetição
    Operador Publish, anexar elemento de repetição
    Além disso, pode-se atualizar o elemento <title> sob o elemento <feed> para dar um nome ao feed Atom. Isso conclui a criação de feed, e a saída gerada foi mostrada anteriormente em Lista 9.
    Observação: Para feeds grandes, com muitos elementos, é uma boa ideia executar o feed primeiro e copiar uma das suas entradas para um editor de texto, e depois usá-la para criar um modelo XML primeiro com a seção <metadata> . Depois, importe esse modelo XML para um operador Publish e anexe as entradas repetidas do operador anterior para concluir o feed.
  8. Agora que o feed está pronto, é hora de renderizá-lo no widget Google Chart. Crie uma página no Mashup Builder e inclua o widget Google Chart na página. Vá até as configurações de widget e inclua a URL para o mashup de dados criado anteriormente na seção Data URL . Na lista suspensa Chart Type , selecione Geo Chart. Por fim, na seção Chart Options , inclua o JSON necessário para customizar o Geo Map e salve as configurações de widget. Use {backgroundColor:"#CFECEC"} como JSON para fornecer a cor do plano de fundo do gráfico. Há muitas opções de gráfico que podem ser fornecidas como JSON. Consulte os documentos sobre Google Geo Chart na seção Recursos para obter mais detalhes. A Figura 12 mostra a aparência que terá o widget renderizado.
    Figura 12. Geomap renderizado no widget Google Chart
    Geomap renderizado no widget Google Chart
    Como já visto, é simples criar o feed Atom para renderização no widget Google Chart. Além disso, o mesmo formato pode ser usado para renderizar outros tipos de gráfico. A Figura 13 mostra exemplos adicionais de gráficos que usam o mesmo feed de mashup de dados.
    Figura 13. Diferentes tipos de gráfico renderizados no widget Google Chart usando o mesmo feed
    Diferentes tipos de gráfico renderizados no widget Google Chart usando o mesmo feed
    Esses gráficos são criados apenas selecionando diferentes tipos de gráfico na caixa de diálogo Edit settings do widget!

Conclusão

Este artigo apresentou as etapas básicas de uso do desenvolvedor de mashup de dados para gerar URLs de imagem do Google Chart, bem como feeds de dados para o widget Google Chart. Agora, há opções de visualização adicionais além do que está disponível com os widgets prontos.

Para quem quiser tentar o desenvolvimento de widgets, há muitas áreas potenciais para melhorar o widget. Para começar, a API do Google Chart Tools tem bibliotecas de visualização adicionais não incluídas nesse pacote. O widget pode ser alterado para carregá-las. Outra melhoria seria a inclusão de opções de gráfico no feed de dados, permitindo a geração dinâmica. Isso permitiria que atributos, como título, variassem com os parâmetros de entrada.


Download

DescriçãoNomeTamanho
Sample for this articleGoogleChartDownloadPkg.zip10KB

Recursos

Aprender

Obter produtos e tecnologias

  • Para obter experiência prática no IBM Mashup Center, visite a Lotus greenhouse.
  • Faça download de uma versão de teste gratuita do IBM Mashup Center do developerWorks.
  • Crie seu próximo projeto de desenvolvimento com software de avaliação da IBM, disponível para download diretamente no developerWorks, ou passe algumas horas no SOA Sandbox aprendendo a implementar Arquitetura Orientada a Serviços de modo eficiente.

Discutir

Comentários

developerWorks: Conecte-se

Los campos obligatorios están marcados con un asterisco (*).


Precisa de um ID IBM?
Esqueceu seu ID IBM?


Esqueceu sua senha?
Alterar sua senha

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


A primeira vez que você entrar no developerWorks, um perfil é criado para você. Informações no seu perfil (seu nome, país / região, e nome da empresa) é apresentado ao público e vai acompanhar qualquer conteúdo que você postar, a menos que você opte por esconder o nome da empresa. Você pode atualizar sua conta IBM a qualquer momento.

Todas as informações enviadas são seguras.

Elija su nombre para mostrar



Ao se conectar ao developerWorks pela primeira vez, é criado um perfil para você e é necessário selecionar um nome de exibição. O nome de exibição acompanhará o conteúdo que você postar no developerWorks.

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

Los campos obligatorios están marcados con un asterisco (*).

(Escolha um nome de exibição de 3 - 31 caracteres.)

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


Todas as informações enviadas são seguras.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Information Management, Lotus
ArticleID=777525
ArticleTitle=Como usar Google Chart Tools com o IBM Mashup Center
publish-date=11282011