Introdução

Muitas formas de visualização têm apresentações significativas e customizáveis. Gráficos são um exemplo disso. Talvez você queira customizar muitos aspectos visuais, tais como cor, rótulo, legenda, escala e tipo. Você pode também querer uma visualização baseada em mapa em que pode controlar a localização e o ícone, bem como exibir informações quando cada marcador for clicado. XML é uma ótima solução para codificação de informações quando as informações da apresentação são complexas e estruturadas.

Este artigo descreve como fazer o seguinte:

1. Criar um widget de gráficos com uma apresentação significativa e customizável em que você especificará tanto os dados do gráfico como a customização da apresentação.
2. Use o data mashup editor do IBM Mashup Center para gerar o XML para o widget.
3. Crie um gráfico de amostra em que os elementos da apresentação variam dinamicamente com os dados.

Este artigo pressupõe que você já está familiarizado com a criação de mashups de dados e com noções de como escrever um widget. Particularmente, você precisa saber como programar em JavaScript e ter experiência com o uso do data mashup editor do IBM Mashup Center. O artigo IBM Mashup Center and the InfoSphere® MashupHub, Part 2: In-depth look at Feed Mashup Editor within IBM Mashup Center's InfoSphere MashupHub HTML5 (consulte Recursos ) oferece uma boa introdução para o data mashup editor. Para uma apresentação sobre como criar widgets, consulte o artigo Mashups, beyond Reporting HTML5 (consulte Recursos ).

Criando um widget de gráficos

Esta seção descreve como criar uma apresentação significativa e customizável na qual você especificará tanto os dados do gráfico como a customização da apresentação em XML.

Compreendendo o FusionCharts Free

O exemplo de widget de gráficos usado neste artigo se baseia no pacote de criação de gráficos FusionCharts Free. FusionCharts oferece inúmeros pacotes para gráficos e criação de mapas. O exemplo do artigo usa a versão de software livre do FusionCharts Free. Trata-se de um componente que dá suporte aos seguintes tipos de gráfico:

• Tipos de gráficos comuns, incluindo de setores, barra e linha.
• Gráficos de combinação que combinam diferentes tipos de gráfico em um único gráfico designando diferentes tipos de gráfico para diferentes séries no gráfico.
• Gráficos especiais, como gráfico de Gantt para gerenciamento de projeto e gráfico de barras para preços da ação.

Para ver exemplos dos tipos de gráfico suportados, visite o site do FusionCharts Free na seção Recursos e verifique a página Chart Gallery. O site também contém licença do produto, demos e outras informações.

FusionCharts usa XML para especificar tanto os dados a serem plotados como o aspecto visual da apresentação. FusionCharts oferece o exemplo especializado do poder do uso de XML para especificar dados e informações de apresentação.

A primeira parte do artigo descreve como criar um wrapper de widget fino em volta do pacote FusionCharts Free para transformá-lo em um widget. O restante deste artigo descreve como usar o IBM Mashup Center para gerar o XML. O IBM Mashup Center tem geradores de alimentação para extrair dados de diferentes fontes de dados e convertê-los em alimentações. Um data mashup editor projetado para aumentar e reformatar o XML está incluso. O IBM Mashup Center oferece uma maneira fácil de gerar o XML em um formato que o pacote do FusionCharts Free exige para criar gráficos interativos e diretamente a partir dos dados.

Criando um arquivo de definição do widget.

O pacote de widget do FusionCharts Free (leve) para este exemplo consiste em um arquivo de definição de widget, dois arquivos JavaScript, e arquivos swf do pacote FusionCharts Free. Esta seção descreve o arquivo de definição de widget, iWidget.xml.

Lista 1 mostra o elemento-raiz do arquivo XML. O atributo iScope no elemento-raiz do iwidget especifica o nome do objeto JavaScript que implementa as funções de retorno de chamada do iWidget. Esse widget é implementado usando dois arquivos Javascript. O FusionCharts.js vem no pacote FusionCharts Freee, o FCFWidget.js é nosso wrapper de widget fino. Eles são carregados usando dois elementos. Para detalhes sobre os atributos, consulte o link da documentação da API e programação do widget nos Recursos .

<iw:iwidget name="FCFWidget" xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget"
               iScope="FCFWidget"
               allowInstanceContent="true"
               supportedModes="view edit" mode="view" lang="en">

  <iw:resource uri="FusionCharts.js"/>
  <iw:resource uri="FCFWidget.js"/>  

Lista 2 mostra as definições para os eventos de recebimento e envio do widget. O widget tem um evento de recebimento para a URL de entrada, o que permite que os outros widgets mudem o XML de gráficos. O widget também tem um evento de envio, que é disparado quando um elemento de gráfico é selecionado. O envio de recebimento é indicado pela presença dos atributos handled e onEvent . O valor do atributo onEvent é o nome da função chamada quando o evento é recebido. O atributo published indica o evento de envio.

<iw:event id="Display from URL"
             handled="true" onEvent="graphURLChanged"
             eventDescName="desc_DataSourceURL"/>
<iw:eventDescription id="desc_DataSourceURL" 
                     payloadType="url"
                     description="Text representing a URL to a Fusion charts XML file"
                     lang="en"/>

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

O arquivo de definição do widget também especifica o que deve aparecer no modo de visualização e de edição. O layout é especificado pela marcação HTML incluso como CDATA no iw:content . Lista 3 mostra a marcação HTML para o modo de visualização. Há um único elemento div com um atributo id que você pode manipular com Javascript. O valor de id usa _IWID_ como um prefixo. O prefixo _IWID_ será substituído pelo ID da instância exclusivo do widget durante a criação deste. Isso assegura que todos os IDs são exclusivos, mesmo se houver instâncias múltiplas do widget na mesma página HTML.

<iw:content mode="view">
  <![CDATA[

  <div id="_IWID_chart"></div>

  ]]>
</iw:content>	

Esse widget difere ligeiramente do widget de criação de gráficos que vem com o FusionCharts Free. Ele requer a abordagem oposta de não fornecer um GUI de configuração extensivo. Ao invés disso, ele expõe toda a formatação subjacente ao XML de gráficos do FusionCharts com toda a formatação controlada pelo XML. A seção do modo de edição contém um formulário HTML com apenas dois elementos de entrada: uma caixa de texto para inserir a URL no XML e uma caixa de texto suspensa para selecionar o tipo de gráfico. Lista 4 mostra parte da marcação HTML para a caixa de texto suspensa. As opções suspensas mapeiam os tipos de gráfico para arquivos swf subjacentes implementando a lógica do gráfico correspondente. Todos os arquivos swf do pacote FusionCharts Free estão inclusos no arquivo zip do widget.

<iw:content mode="edit">
  <![CDATA[

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

  <select id="_IWID_chartType" >
        <option value='FCF_Area2D.swf'>2D Area</option>
        <option value='FCF_Bar2D.swf'>2D Bar</option>
            :::::::::::::::::::::::::::::::::::::::::::::::
  </select>

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

  ]]>
</iw:content>	

Consulte os Recursos para um link para o download do pacote completo do iwidget.xml e todos os JavaScripts mencionados neste artigo.

Exibindo o gráfico

A implementação do arquivo é FCFWidget.js. O arquivo é uma classe da biblioteca Dojo que trata os eventos padrão, incluindo load, unload, onview, onedit, e todos os outros eventos e comunicação de servidor. A função onview contém a lógica para exibir o gráfico especificado. Consulte Recursos para uma descrição de outros eventos padrão e a manipulação deles.

A função onview primeiro determina o tamanho do widget e depois chama a função showChart . Devido a função onview ser chamada após onedit ou durante o carregamento inicial, é preciso primeiro recuperar o XML de gráficos usando uma chamada Ajax. Para indicar isso, chame a função showChart com o parâmetro retrieveData definido para true. A função onSizeChanged também pode chamar a função showChart , ocasião em que define o parâmetro retrieveData para false para indicar que não houve mudança na URL do XML de gráficos e que os dados já foram carregados. Nesse caso, você chama a função showFusionChart diretamente para instanciar o gráfico.Lista 5 mostra a função showChart.

    showChart: function( retrieveData )
    {
        this.debugTrace( "showChart w,h=" + this.width + ',' + this.height );  

        if ( retrieveData )
            this._loadDataUsingDojo( this.url
                                   , dojo.hitch( this, this._cbProcessReturnedXML ) );
        else if ( this.FCFgraphXML != null )
            this.showFusionChart( this.FCFgraphXML );
        // else ignore
    },

O objeto JavaScript FusionCharts contido no arquivo FusionCharts.js exibe o gráfico. É preciso instanciar uma instância de FusionCharts passando os seguintes parâmetros:

• Uma URL que aponta para o arquivo swf para o tipo de gráfico escolhido pelo usuário. Lembre-se de que todos os arquivos swf são inclusos no arquivo zip do widget. Para obter a URL totalmente qualificada para o local em que todos os arquivos zip estão localizados, chame o método rewriteURI da função iContext .
• Um valor único a ser usado como o ID para o elemento HTML gerado pelo FusionCharts.
• A largura do gráfico.
• A altura do gráfico.

Os dados do XML de gráficos são passados para o objeto FusionCharts usando a função setDataXML . Depois a função render é usada para instanciar o gráfico como mostra a Lista 6.

    //O código a seguir é, em maior parte, do Fusion Chart
    showFusionChart: function( strXML )
    {
        var swfUrl = this.iContext.io.rewriteURI( this.charttype );
        var chart1 = new FusionCharts(swfUrl, "FC"+this.domID
                                     , this.width, this.height, "0", "0");
        chart1.setDataXML(strXML);
        chart1.render( this.domID + "chart" );		
    },

Observe que duas pequenas mudanças são feitas no FusionCharts.js do pacote FusionCharts Free. O parâmetro wmode precisa ser definido para opaque em dois lugares para assegurar que o gráfico não faz interface com o menu suspenso. Ambas as mudanças são marcadas com // zPOSCHANGE.

Manipulando o evento clicar

Todos os gráficos no conjunto FusionCharts suportam drill down. Em cada tipo de gráfico, os elementos de exibição (colunas em gráficos de coluna, segmentos de setores circulares em gráficos de setores circulares, e assim por diante) podem atuar como hotspots para o gráfico.No FusionCharts Free, é possível definir os seguintes tipos de ações para os hotspots:

• Links simples que abrem na mesma página
• Links simples que abrem em uma nova página
• Funções Javascript existentes (na mesma página) a serem chamadas como links

FusionCharts usa elementos set em gráficos XML para especificar os valores a serem exibidos. Para especificar quaisquer ações de hotspot, inclua o atributo opcional link ao elemento set . Para o exemplo, você quer que seu widget seja capaz de gerar um evento quando um hotspot é clicado. É possível fazer isso fornecendo um único parâmetro para a função Javascript integrada MCClickEvent . A função dispara um evento quando chamada. Lista 7 mostra como chamar a função integrada. MCClickEvent, passando a cadeia de caractere '2005,1020' como um argumento no atributo link.

  <set  name="2005"
        value="1735.08"
        link="JavaScript: MCClickEvent( '2005,1020' );" />

Em Lista 8, a função MCClickEvent é muito simples. Ela toma um único argumento e simplesmente chama a função fireEvent da função iContext .

    MCClickEvent: function( arg ) {
        this.iContext.iEvents.fireEvent("chartClicked", null, arg );
    },

A função MCClickEvent não é global à página, mas é um método de instância. Para que o componente FusionCharts Free a chame, é preciso chamá-la de uma instância Javascript que represente o widget. Como a instância do JavaScript não é conhecida até que o widget seja instanciado na página, use a função interna modifyLink para reescrever a chamada de função JavaScript, conforme mostrado abaixo Lista 9. A função é chamada para preprocessar o XML de gráficos antes que ele seja passado para o objeto do FusionCharts.

    modifyLink: function( strXML )
    {
        var temp   = this.domID + "iContext.iScope().MCClickEvent";
        var result = strXML.replace( /JavaScript: MCClickEvent/g, "JavaScript: "+temp );
        return result;
    },

Isso conclui a descrição da implementação do widget. Alguns possíveis aprimoramentos incluem suporte para mudança do tipo de gráfico no modo de visualização ou drill down no local.

Agora que você já possui um widget que usa XML para informações de apresentação, use o IBM Mashup Center para gerar o XML de gráficos.

Voltar para parte superior

Usando o data mashup editor para gerar o XML

Consulte a Recursos para documentação on-line sobre o XML de gráficos que está disponível no site do FusionCharts Free. Para o exemplo, use o gráfico de coluna 2D para gerar o XML naLista 10. O gráfico mostra as vendas anuais para os anos de 2005 a 2008 para dado cliente. Observe que CUSTOMERNAME é apenas um marcador na amostra e é gerada dinamicamente. Cada objeto set é representado por uma coluna no gráfico. Os elementos set correspondem a vendas anuais e são configuradas para serem hotspots com os atributos link. Quando uma coluna para um dado ano é clicada, você quer gerar um evento que forneça o ID do cliente (1020 na amostra) e ano como uma cadeia de caractere separada por vírgula. and year as a comma-separated string. Essa informação permite realizar drill down apenas em vendas mensais para determinado cliente para determinado ano.

<graph  caption="Sales to CUSTOMERNAME"
         xAxisName="Year" yAxisName="Sales" decimalPrecision="0">
  <set  name="2005"
        value="1735.08"
        link="JavaScript: MCClickEvent( '2005,1020' );" />
  <set  name="2006"
        value="1335.08"
        link="JavaScript: MCClickEvent( '2006,1020' );" />
  <set  name="2007"
        value="1582.08"
        link="JavaScript: MCClickEvent( '2007,1020' );" />
  <set  name="2008"
        value="1555.08"
        link="JavaScript: MCClickEvent( '2008,1020' );" />
</graph>

Como entrada, comece com uma alimentação gerada no banco de dados mostrado na Lista 11. É possível usar o data mashup editor do IBM Mashup Center para transformá-lo para o formato FusionCharts. Você também aprenderá sobre alguns dos novo recursos na Versão 3 do IBM Mashup Center.

<entry><content>
   <year>2005</year><totalAmt>1735.08</totalAmt>
</content></entry>
<entry><content>
   <year>2006</year><totalAmt>1335.08</totalAmt>
</content></entry>
<entry><content>
   year>2007</year><totalAmt>1582.08</totalAmt>
</content></entry>
<entry><content>
   <year>2008</year><totalAmt>1555.08</totalAmt>
</content></entry>

Consulte os artigos nos Recursos se precisar revisar noções sobre o uso do data mashup editor do IBM Mashup Center.

Gerando o elemento set

O primeiro passo na criação de um data mashup é usar um operador is to use a Source para especificar a alimentação de entrada (dados XML). Após especificar a alimentação, é preciso substituir o tipo de Feed na aba Advanced do diálogo de propriedades. Escolha a alimentação completa como uma única entrada repetida, como mostrado na Figura 1. O motivo é explicado em Usando o widget FusionCharts com o IBM Mashup Center v2.

Em seguida, conecte o operador Source ao operador Transform e abra seu diálogo de propriedades. Para criar um elemento set na saída (lado direito do operador Transform ), selecione New element do menu pop-up ao clicar com o botão direito no elemento entry . O elemento set deve ter três atributos:

• name para o rótulo da coluna
• value para a altura da coluna
• link para gerar o evento

Após criar um atributo name sob o elemento set usando o menu pop-up, expanda o elemento entry no lado da entrada (esquerdo) até que o nó de texto sob o elemento year esteja visível. Clique com o botão direito no nó de texto e selecione Copy to the output tree para copiar o texto 2005 para o atributo name na árvore de saída. Deve haver quatro elementos entry , cada um contendo um year na árvore de entrada (o lado esquerdo do operador de transformação). Isso é indicado por um ícone de loop próximo ao entry . O data mashup editor leva isso em consideração e criar quatro novos elementos set : um para cada year. Figura 2 mostra a árvore de saída.

O atributo value pode ser criado de forma parecida. Para o atributo link , seu valor não é uma cópia direta de qualquer valor do lado da entrada. Ao invés disso, ele deve ser calculado. Para fazer isso, crie o atributo link para chamar o menu de contexto e selecione Edit Value, como mostrado na Figura 3.

No IBM Mashup Center, Versão 3, surge um diálogo que permite que você use uma variável ou uma função e não apenas forneça um valor codificado permanentemente. Aqui, selecione Specify a function value , como mostrado em Figura 4. (No IBM Mashup Center Versão 2, não é possível especificar uma função diretamente como um valor de atributo. Ao invés disso, é preciso criar o valor da função para um elemento e então copiá-lo para o atributo.)

Para gerar a chamada do Javascript descrita em Manipulando o evento clicar, selecione a função concat . Se você se recorda, a função integrada MCClickEvent toma apenas um único argumento. Quando uma coluna de ano é clicada, você deseja fazer o drill down das vendas mensais para o ano selecionado. Para fazer isso, passe os dois argumentos: ID do usuário e ano, gerando uma cadeia de caractere separada por vírgula com os dois valores. Figura 5 mostra os valores para todos os argumentos.

Agora é possível gerar o elemento set . Vá para a aba Preview e verifique se a saída é o que você espera antes de gerar o elemento-raiz usando o operador Publish .

Usando um modelo de cabeçalho

Tudo o que resta agora é gerar um graph como o elemento-raiz e incluir todos os atributos de apresentação global necessários, tal como um rótulo de eixo X. Na Versão 3 do IBM Mashup Center, o operador publish tem uma nova opção de cabeçalho customizado. Ao clicar no botão O botão de opções Custom chama a seção Header Template com um único elemento padrão root . Da mesma maneira que o operador transform , renomeie o elemento root para graph e use o menu pop-up New Attribute para gerar os atributos da apresentação. Contudo, há um modo mais fácil. No menu pop-up do elemento root , selecione Set Template Tree, como mostrado na Figura 6.

Clique no menu Set Template Tree para chamar um diálogo em que é possível inserir um fragmento de XML e fazer com que ele seja importado para o editor, como mostrado em Figura 7. Isso pode poupar muito tempo quando você estiver importando um número grande de atributos.

Observe que o elemento root mudou para graph com todos os atributos associados ao modelo.

Agora inclua o elemento set criado anteriormente selecionando Attach repeating element no menu pop-up do elemento graph , como mostrado na Figura 8 de Perl e Figura 9.

Criando uma apresentação dinâmica

Uma das vantagens de configurar a apresentação através do XML de entrada é a habilidade de fazer com que os elementos da apresentação variem com os dados. Para o exemplo, ao exibir os dados de vendas para a empresa X, é possível facilmente mudar a legenda para dizer Vendas para a Empresa X. Suponha que haja uma alimentação simples para recuperar o nome da empresa se o ID desta for fornecido. Use a alimentação para incluir (usando uma mesclagem) um elemento de nome de empresa, e então use a função concat no operador publish para construir o valor do atributo caption , como mostrado na Figura 10.

O mashup de dados agora está completo. Antes de sair dessa seção, observe os seguintes usos relacionados:

• Como os elementos de apresentação são gerados dinamicamente, é possível usar uma técnica similar de acordo com a configuração de língua aceita do navegador.
• É fácil incluir marcação de HTML uma vez que a apresentação está em um formato XML. A inclusão do logotipo para uma alimentação RSS é um exemplo simples. Figura 11 mostra o widget de alimentação do IBM Mashup Center exibindo o logotipo, que varia conforme o conteúdo da alimentação.

Voltar para parte superior

Usando o widget FusionCharts com o IBM Mashup Center, Versão 2

Versão 2 do IBM Mashup Center não permite que os atributos a serem incluídos ao elemento-raiz. Para compensar essa restrição, o widget também suporta um formato da variação. O widget aceita qualquer XML de gráficos do FusionCharts Free wrapped por um elemento-raiz simuladomhubFusion. As etapas descritas em Gerando o elemento set funcionam para a Versão 2 porque as etapas resultam em uma única entrada repetida entry com quatro elementos set . Lista 12 mostra como a Lista 10 é adaptada para a versão 2.

<mhubFusion>
   <graph  caption="Sales to CUSTOMERNAME"
            xAxisName="Year" yAxisName="Sales" decimalPrecision="0">
     <set  name="2005"
           value="1735.08"
           link="JavaScript: MCClickEvent( '2005,1020' );" />
     <set  name="2006"
           value="1335.08"
           link="JavaScript: MCClickEvent( '2006,1020' );" />
     <set  name="2007"
           value="1582.08"
           link="JavaScript: MCClickEvent( '2007,1020' );" />
     <set  name="2008"
           value="1555.08"
           link="JavaScript: MCClickEvent( '2008,1020' );" />
   </graph>
</mhubFusion>

Reunindo as peças

Figura 12 mostra um aplicativo de mashup sendo executado no IBM Mashup Center. O aplicativo tem uma lista de clientes na parte superior. A lista está vinculada ao gráfico na parte inferior esquerda. O gráfico exibe as vendas anuais do cliente selecionado na lista. Ele usa o widget FusionCharts criado neste artigo. E está ligado ao widget das vendas mensais do FusionCharts Free na parte inferior direita. Se você clicar na coluna representando as vendas para dado ano, o ID do cliente e o ano são enviados no evento chartClicked . Isso faz com que o gráfico das vendas mensais exiba os dados de vendas para o ano e o cliente selecionados.

(Veja uma versão ampliada do Figura 12.)

Consulte a Recursos para um exemplo do mashup, criado por você, em funcionamento. Use o gerenciador de espaço e procure por Demo de gráfico.

Conclusão

Este artigo orienta você pelas etapas básicas da construção de dados de mashup para gerar XML para gráficos de coluna 2D. O pacote FusionCharts Free inclui muitos outros tipos de gráfico. Tente gerar XML para os tipos de gráfico mais complicados e aprimorar o widget. Se você tiver a oportunidade de criar um widget, considere especificar informações de apresentação com os dados em um arquivo de entrada XML ao invés de criar um formulário de entrada elaborado no qual usuário inserem valores codificados permanentemente.

Voltar para parte superior

Download

Informações sobre métodos de download

Recursos

Aprender

• Leia o artigo Mashup, beyond Reporting para aprender a criar widgets leves.
  
  
• Veja o artigo Developing widgets for IBM Mashup Center 1.0 para uma ótima introdução à composição de um widget customizado.
  
  
• Leia o artigo Integrando aplicativos Flex com o IBM Mashup Center para aprender a criar widgets usando Flex.
  
  
• Explore IBM Mashup Center and the InfoSphere MashupHub, Part 2: In-depth look at Feed Mashup Editor within IBM Mashup Center's InfoSphere MashupHub para aprender a usar os dados do mashup editor.
  
  
• Para aprender sobre Dojo, consulte a página da documentação oficial do dojo .
  
  
• Consulte a página da Web com a documentação on-line e a galeria de gráficos para aprender sobre o FusionCharts Free.
  
  
• Vá para o link para a mais recente documentação de programação de widget e API.
  
  
• Saiba sobre Information Management na zona de Gerenciamento de Informação do developerWorks . Encontre documentação técnica, artigos de instruções, educação, downloads, informações de produto e mais.
  
  
• Fique por dentro dos eventos técnicos e webcasts do developerWorks .
  
  
• Siga DeveloperWorks no Twitter.
  
  

Obter produtos e tecnologias

• Ganhe experiência com IBM Mashup Center visitando 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 a versão de teste do software IBM, disponível para download diretamente no developerWorks.
  
  

Discutir

• Participar do fórum de discussão.
  
  
• Confira os blogs do developerWorks e participe da comunidade do developerWorks.
  
  

Sobre o autor

Classificar este artigo

Comentários

Voltar para parte superior

Índice

• Introdução
• Criando um widget de gráficos
• Usando o data mashup editor para gerar o XML
• Usando o widget FusionCharts com o IBM Mashup Center, Versão 2
• Conclusão
• Download
• Recursos
• Sobre o autor
• Comentários

Conheça a IBM da sua cidade

A IBM está mais perto do que você imagina!

---

Saiba mais