Use o widget FusionCharts Free de criação de gráficos no IBM Mashup Center

Usando widgets com apresentação significativa e altamente customizável em um mashup

Aprenda a criar um widget de gráficos com uma apresentação muito significativa e customizável em que os dados do gráfico e a apresentação são especificados no XML. Em seguida, aprenda a usar o data mashup editor do IBM Mashup Center para gerar o XML para esse widget. Por fim, crie um mashup de amostra no qual os elementos de apresentação variam dinamicamente com os dados.

Louis Mau, Solution Architect, IBM

Louis Mau faz parte da equipe de desenvolvimento do InfoSphere MashupHub. Seu foco principal é ajudar os clientes a construir aplicativos situacionais com o uso do IBM Mashup Center. Antes dessa função, Louis era um architect do DB2 Everyplace SyncServer.



22/Mar/2011

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.

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

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 .

Lista 1. Cabeçalho do iWidget.xml
<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.

Lista 2. Especificação de evento iWidget.xml
<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.

Lista 3. Modo de visualização de layout do iWidget.xml
<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.

Lista 4. Layout do modo de edição do iWidget.xml
<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.

Lista 5. 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.

Lista 6. Mostrar a Função Chart do Fusion
    //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.

Lista 7. O atributo link especificando a função MCClickEvent
  <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 .

Lista 8. Função de evento de envio de clique
    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.


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.

Lista 10. XML de coluna de venda anual 2D
<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.

Lista 11. Alimentação de entrada de banco de dados
<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.

Figura 1. Operador Source da aba Advanced
shows /atom:feed highlighted as repeating element

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.

Figura 2. O operador transform especifica o valor do atributo de nome
Shows copy to the output tree selected

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.

Figura 3. O operador Transform especifica o valor do atributo link
shows Edit Value selected in context menu

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.)

Figura 4. Diálogo de valor do atributo link
shows specify a function value selected

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.

shows entry values for the strings

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.

Figura 6. Cabeçalho customizado do Operador publish
shows Set Template Tree selected

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.

Figura 7. O modelo configurado do operador publish
shows entry field for entering XML document

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.

Figura 8. Menu Custom Header Attach
shows Attach repeating element selected in popup menu
Figura 9. Diálogo Publish Operator Attach
to attach a repeating element, you select an item from the tree structure

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.

Figura 10. Legenda com nome do cliente
shows field where you enter customization string

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.
Figura 11. Logotipo especificado na alimentação RSS
Examples shows Yahoo and CNN logos included in RSS feeds

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.

Lista 12. Forma especial v2
<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.

Figura 12. O aplicativo de mashup completo
Mashup Center Drill Down shows table with customer IDs and info, plus bar charts with FusionCharts windows showing yearly and monthly sales

(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.


Download

DescriçãoNomeTamanho
ExampleFusionCharts.zip447KB

Recursos

Aprender

Obter produtos e tecnologias

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=629556
ArticleTitle=Use o widget FusionCharts Free de criação de gráficos no IBM Mashup Center
publish-date=03222011