Criação de Gráficos para Dispositivos Móveis com o Dojo Toolkit

Desenvolva um aplicativo de gráficos para dispositivos móveis de forma fácil

Explore os recursos dos pacotes dojox.mobile e dojox.charting. Neste artigo, utilize os exemplos passo a passo para criar um aplicativo móvel de criação de gráficos com o Dojo Toolkit, em seguida, aprimore o aplicativo para suportar interações de toque. Tópicos avançados, como a melhoria do desempenho da renderização, também são abordados.

Christophe Jolif, Software Engineer, IBM

Photo of Christophe JolifChristophe Jolif é Advisory Software Engineer na IBM França. É líder da equipe de desenvolvimento do IBM ILOG Elixir e contribui para o projeto de software livre do Dojo Toolkit. Escreve sobre o ILOG Elixir no blog da equipe e em artigos técnicos, além de contribuir para a documentação técnica do produto. Antes de fazer parte da IBM, Christophe trabalhou para o ILOG durante mais de uma década, desenvolvendo componentes avançados de visualização no Java™, Ajax e Adobe® Flex.



Damien Mandrioli, Software Engineer, IBM

Photo of Damien MandrioliDamien Mandrioli é Software Engineer na IBM. Seus interesses profissionais incluem componentes de visualização, desenvolvimento de aplicativos da web e usabilidade da interface com o usuário. Damien passou cinco anos desenvolvendo componentes e demos para o produto de visualização IBM ILOG Elixir antes de fazer parte da equipe de desenvolvimento do Dojo Toolkit.



28/Mai/2014

Introdução

Neste artigo, saiba como utilizar a estrutura de criação de gráficos do Dojo Toolkit para criar aplicativos de criação de gráficos atraentes executados em dispositivos móveis. Saiba como o componente de criação de gráficos pode ser instanciado e configurado em um aplicativo remoto do Dojo, além de como possibilitar interações de toque no componente para a melhor integração com dispositivos móveis. Também explore algumas opções avançadas do aplicativo de criação de gráficos para carregar e renderizar de forma mais rápida.

Também é possível fazer o download do código fonte deste artigo.


Criando um aplicativo de criação de gráficos do Dojo Mobile

Ao desenvolver um aplicativo remoto com o Dojo, é recomendável que você conte com o pacote dojox.mobile . É uma camada do Dojo relativamente fina que fornece um conjunto de widgets leves orientado a dispositivos móveis, um analisador e uma estrutura de transição. Considerando a importância desses recursos para aplicativos remotos, grande parte dos aplicativos remotos de criação de gráficos do Dojo provavelmente utilizará essa estrutura.

A forma mais simples de instanciar seu gráfico no contexto de um aplicativo dojox.mobile é depender da análise e colocar seu código de criação de gráficos na marcação do widget dojox.mobile (semelhante ao que seria feito com um aplicativo regular de área de trabalho do Dijit). Primeiro, é necessário um arquivo HTML que defina a marcação do seu aplicativo e um arquivo de origem do JavaScript referenciado a partir do HTML e que contenha a lógica do JavaScript para o seu aplicativo.

O exemplo deste artigo mostra como desenvolver um aplicativo simples que exibe dados de vendas utilizando um gráfico de colunas, dividido em meses, em um período de três anos. Crie um arquivo HTML com o código da Listagem 1.

Listagem 1. Arquivo HTML inicial do aplicativo remoto de criação de gráficos
<!DOCTYPE HTML> 
<html> 
  <head> 
    <title>Dojo Toolkit Mobile Charting</title> 
    <meta name="viewport" content="width=device-width,initial-scale=1, 
      maximum-scale=1,minimum-scale=1,user-scalable=no"/> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <link rel="stylesheet" type="text/css" 
      href="../../../dojo_current/dojox/mobile/themes/iphone/iphone.css"> 
    <script type="text/javascript" src="../../../dojo_current/dojo/dojo.js" 
      data-dojo-config="parseOnLoad: true"></script> 
    <script type="text/javascript" src="src_01.js" charset="utf-8"></script> 
  </head> 
  <body> 
    <div id="view1" data-dojo-type="dojox.mobile.View"> 
      <h1 id="head1" data-dojo-type="dojox.mobile.Heading">Chart View</h1> 
      <div data-dojo-type="dojox.mobile.RoundRect"> 
        <button id="b1" data-dojo-type="dojox.mobile.Button" 
          class="mblBlueButton">Zoom</button> 
        <button id="b2" data-dojo-type="dojox.mobile.Button" 
          class="mblBlueButton">Unzoom</button> 
        <div data-dojo-type="dojox.charting.widget.Chart" id="chart" 
          style="width: 100%; height: 180px;"> 
          <div class="plot" name="grid" type="Grid" 
               vMinorLines="true"></div>             
          <div class="axis" name="x" 
               fixUpper="minor"   
               majorTickStep="1" 
               minorTicks="false"></div> 
          <div class="axis" name="y" vertical="true" min="0"></div> 
          <div class="plot" name="plot" type="Columns" ></div> 
          <div class="series" name="data" plot="plot" 
            data="20, 32, 32, 45, 37, 28, 24, 48, 44, 21, 32, 33, 
                32, 34, 44, 32, 39, 43, 44, 46, 36, 41, 25, 27, 
                28, 45, 46, 33, 34, 35, 29, 44, 48, 48, 49, 43"></div> 
        </div> 
      </div> 
    </div> 
  </body> 
</html>

O código da Listagem 1 está referenciando as classes dojox.mobile e dojox.charting nos atributos de tipo de dados do Dojo. Para que essa marcação seja analisada e instanciada de forma correta, os módulos correspondentes devem ser importados no arquivo de origem do JavaScript, como mostra a Listagem 2.

Listagem 2. Arquivo de origem inicial do JavaScript do aplicativo remoto de criação de gráficos
require(["dojo", "dojox/mobile", "dojox/mobile/parser", 
  "dojox/mobile/Button", "dojox/charting/widget/Chart", 
  "dojox/charting/axis2d/Default", "dojox/charting/plot2d/Columns",
  "dojox/charting/plot2d/Grid"]);

Os exemplos deste artigo dependem da sintaxe de AMD apresentada recentemente para o gerenciamento de dependências do aplicativo Dojo. (Consulte Recursos para saber mais sobre AMD.) Com compatibilidade com versões anteriores, um aplicativo semelhante pode ser desenvolvido utilizando o formato dojo.require substituído para dependências se você não desejar alternar para o novo formato.

Se o aplicativo correspondente for executado, o resultado mostrado na Figura 1 deve ser obtido.

Figura 1. Um aplicativo remoto de criação de gráficos

O gráfico da Figura 1 é apenas um gráfico estático não interativo com dados codificados permanentemente a partir do atributo de dados da série definida na marcação. Antes de continuar, são necessários alguns pequenos ajustes ao aplicativo.

Nesse momento, o aplicativo é customizado para navegadores de área de trabalho e móveis Webkit. Se você quiser que o aplicativo seja mais bem executado em outros navegadores de área de trabalho, como o Firefox, é possível atualizar sua lista de dependência para incluir o módulo dojox/móvel/compacto, como mostra a Listagem 3. O exemplo utiliza o dojo/possui plug-in de AMD apenas para incluir esse módulo se você não estiver executando em um navegador Webkit, portanto, o módulo de compatibilidade é necessário.

Listagem 3. Incluindo suporte a navegadores não Webkit
require(["dojo/_base/kernel", "dojo/_base/sniff", "dojox/mobile", "dojox/mobile/parser",
	"dojo/has!webKit?:dojox/mobile/compat", 
	"dojox/mobile/Button", "dojox/charting/widget/Chart", 
	"dojox/charting/axis2d/Default", "dojox/charting/plot2d/Columns",
	"dojox/charting/plot2d/Grid"]);

A próxima etapa é alimentar os dados exibidos da criação de gráficos com uma origem de dados externa, em vez de dados de codificação permanente, ao aplicativo. Para isso, é possível utilizar a API de armazenamento de dados tanto para o Dojo Charting quanto para o Dojo Core.

Há classes nos pacotes dojo.data e dojox.data que permitem o carregamento de dados de várias origens de dados e sua conexão aos componentes do Dojo. Por exemplo, suponha que você tenha os dados do JSON da Listagem 4 no servidor e deseja carregá-los.

Listagem 4. Dados do JSON de amostra
{
  "items": 
  [ 
{"value": 0}, {"value": 32}, {"value": 32}, {"value": 45}, {"value": 37}, {"value": 28}, 
{"value": 24}, {"value": 48}, {"value": 44}, {"value": 21}, {"value": 32}, 
{"value": 33}, {"value": 32}, {"value": 34}, {"value": 44}, {"value": 32}, 
{"value": 39}, {"value": 43}, {"value": 44}, {"value": 46}, {"value": 36}, 
{"value": 41}, {"value": 25}, {"value": 27}, {"value": 28}, {"value": 45}, 
{"value": 46}, {"value": 33}, {"value": 34}, {"value": 35}, {"value": 29}, 
{"value": 44}, {"value": 48}, {"value": 48}, {"value": 49}, {"value": 43} 
  ]
}

Os dados do JSON podem ser carregados por uma instância de dojo.data.ItemFileReadStore. Para proceder com a criação de gráficos, conecte sua instância dojo.data a um objeto Series que será responsável pelo preenchimento do gráfico com itens de dados do armazenamento.

Primeiro, é preciso modificar a declaração da série no HTML para que ela não aceite dados codificados permanentemente como entrada, mas referencie um armazenamento de dados denominado "store". Para isso, altere a definição Series na Listagem 6 para incluir store="store", como mostra a Listagem 7.

Listagem 6. Definição Series anterior
            <div class="series" name="data" plot="plot" 
              data="20, 32, 32, 45, 37, 28, 24, 48, 44, 21, 32, 33,
                    32, 34, 44, 32, 39, 43, 44, 46, 36, 41, 25, 27,
                  28, 45, 46, 33, 34, 35, 29, 44, 48, 48, 49, 43"></div>
Listagem 7. Definição Series anterior, incluindo armazenamento
            <div class="series" name="data" store="store" plot="plot"></div>

No mesmo arquivo HTML, é possível definir o armazenamento com a marcação da Listagem 8.

Listagem 8. Definição do HTML de armazenamento
	    <div data-dojo-type="dojo.data.ItemFileReadStore" url="data.json"
       		 data-dojo-id="store" urlPreventCache="true" clearOnClose="true"></div>

O código da Listagem 8 utiliza a classe ItemFileReadStore para carregar o arquivo data.json no servidor e associar os resultados à variável de armazenamento utilizada como entrada da série. A classe de armazenamento de dados deve ser necessária em seu aplicativo como parte das instruções de solicitação do arquivo de origem, como mostra a Listagem 9.

Listagem 9. Requisitando a classe store .
require(["dojo/_base/kernel", "dojo/_base/sniff", "dojo/data/ItemFileReadStore",
        "dojo/has!webKit?:dojox/mobile/compat", 
        "dojox/mobile", "dojox/mobile/parser", 
        "dojox/mobile/Button", "dojox/charting/widget/Chart", 
        "dojox/charting/axis2d/Default", "dojox/charting/plot2d/Columns",
        "dojox/charting/plot2d/Grid"]);

Agora, há um aplicativo remoto de criação de gráficos que renderiza dados mensais provenientes do servidor. No exemplo, o eixo X ainda não possui o mês de destino em vez dos índices de dados. Mencione uma função de etiqueta no eixo, como mostra a Listagem 10.

Listagem 10. Especificando uma função de etiqueta
            <div class="axis" name="x" 
	         fixUpper="minor" majorTickStep="1"
                 minorTicks="false" labelFunc="displayDate"></div>

A função displayDate é definida no arquivo de origem, como mostra a Listagem 11.

Listagem 11. Implementando a função de etiqueta no JavaScript
var displayDate;
require(["dojo/_base/kernel", "dojo/_base/sniff", "dojo/data/ItemFileReadStore",
       "dojo/has!webKit?:dojox/mobile/compat", 
       "dojox/charting/action2d/TouchZoomAndPan", 
       "dojox/mobile", "dojox/mobile/parser", 
       "dojox/mobile/Button", "dojox/charting/widget/Chart", 
       "dojox/charting/axis2d/Default", "dojox/charting/plot2d/Columns",
       "dojox/charting/plot2d/Grid"], function(dojo){
  var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", 
                "Oct", "Nov", "Dec"];
  var years = ["08", "09", "10", "11"];
  displayDate = function(idx){
    if ((idx%2) == 0){
     return " ";
    }
			
    var m = parseInt(idx-1);
    if (m%12 == 0){
      // Display the year only for january
      return months[m%12] + " " + years[m/12];
    }else{
      return months[m%12];
    }
  }
});

O código da Listagem 11 basicamente mapeia cada índice de dados para uma Cadeia de Caracteres. No exemplo, como há dados mensais de três anos, a cadeia de caracteres é formada com o mês correspondente a um determinado índice.

O resultado deve ser exibido na Figura 2.

Figura 2. Customizando as etiquetas de eixo

Ativando a interação de toque da criação de gráficos

Depois de criar seu aplicativo remoto de criação de gráficos do Dojo, é preciso incluir recursos móveis específicos a ele, como a capacidade de interagir com o gráfico usando gestos de toque. Isso é relativamente fácil. Semelhante a outras funções do gráfico, é possível incluir toque usando uma única linha de código à definição do gráfico. Por exemplo, para incluir zoom de toque e capacidade de panoramização, basta incluir o conteúdo da Listagem 12 à marcação de HTML.

Listagem 12. Incluindo zoom de toque e suporte à panoramização
<div class="action" type="dojox.charting.action2d.TouchZoomAndPan" 
     plot="plot" maxScale="7"></div>

O atributo plot permite anexar a ação a um plot particular do gráfico (no exemplo, denominado plot). Também é possível usar várias outras opções, como se o zoom é permitido (enableZoom="false") ou a escala máxima a ser aplicada ao gráfico (maxScale="7").

Outra interação de toque útil é exibir um indicador de dados ao tocar o gráfico. Pode até ser um indicador de dados duplo, mostrando a tendência entre dois pontos de toque.

O uso do código da Listagem 13 resulta na Figura 3 ao tocar o gráfico uma única vez.

Listagem 13. Incluindo suporte ao indicador de toque
<div class="action" type="dojox.charting.action2d.TouchIndicator" plot="plot" 
     series="data" dualIndicator="true"></div>
Figura 3. Indicador interativo de toque simples

Com um gesto de toque duplo, o resultado exibido na Figura 4 é obtido.

Figura 4. Indicador interativo de toque duplo

Vários outros parâmetros estão disponíveis nas interações de toque, como a capacidade de alterar as cores e a fonte do indicador de dados. É possível inclusive decidir alterar a cor de preenchimento do indicador com base em se a tendência entre os dois pontos de toque é positiva ou negativa. A Listagem 14 mostra um exemplo de como desenvolver um indicador como esse no JavaScript.

Listagem 14. Configurando um indicador de toque no JavaScript
var indicatorFillFunc = function(v1, v2){
  if(v2){
    return v2.y>v1.y?"green":"red";
}else{
  // single touch point
    return "#ff9000";
  }
};
var indicator = new TouchIndicator(chart, "plot", {
               series: "series", dualIndicator: true, 
               font: "normal normal bold 12pt Helvetica",
               fillFunc: indicatorFillFunc
});

Alguns dispositivos móveis, como Android 2.2 e 2.3, não suportam diversos eventos de toque no navegador. É preciso mapear determinadas ações que dependem do toque duplo, como o aumento ou a diminuição do zoom, para que botões e interações de toque abordem todos os dispositivos. Para essa situação, houve botões inativos na interface com o usuário desde a primeira listagem deste artigo. Agora é hora de incluir algum código para reagir ao clicar ou tocar nesses botões. A Listagem 15 mostra como especificar uma função de zoom.

Listagem 15. Especificando uma função de zoom
          <button id="b1" data-dojo-type="dojox.mobile.Button" 
		    onclick="zoomChart()"
            class="mblBlueButton">Zoom</button>
          <button id="b2" data-dojo-type="dojox.mobile.Button"
		  	onclick="zoomChart(true)" 
            class="mblBlueButton">Unzoom</button>

O código da Listagem 15 chama a função zoomChart tanto nos botões de zoom quanto para a retirada dele. Como as ações de zoom e de sua retirada são bastante semelhantes, somente uma função é utilizada com um argumento definido em verdadeiro para a retirada do zoom.

Defina a função zoomChart no arquivo de origem do JavaScript, como mostra a Listagem 16. A ideia é obter os limites visíveis atuais para calcular um novo intervalo a fim de passar para a função zoomIn do componente do gráfico do Dojo.

Listagem 16. Implementando a função de zoom no Javascript
  zoomChart = function(back){
    var chart = dijit.byId("chart").chart;
    var b = chart.getAxis("x").getScaler().bounds;
    var r = 1.25;
    if (back){
      // Unzoom
      chart.zoomIn("x", [b.from / r, b.to * r]);
    }else{
      // Zoom
     chart.zoomIn("x", [b.from * r, b.to / r]);
    }
};

Otimizando o aplicativo

Agora, o aplicativo remoto de criação de gráficos do Dojo está totalmente operável, mas não totalmente otimizado.

O primeiro tipo de otimização na qual você trabalhará é melhorar o tempo de renderização. Dispositivos móveis geralmente possuem CPU e memória mais lentas do que dispositivos de área de trabalho e, portanto, renderização também mais lenta. Por padrão, o Dojo não armazena em cache o item renderizado de um gráfico. Ao utilizar a interação de toque para efetuar o zoom ou panoramizar o gráfico, muitos itens renderizadores podem ser destruídos e recriados. É bom não possibilitar o armazenamento em cache quando houver um gráfico estático, pois ele resulta em uma renderização inicial mais rápida. No entanto, em um caso de uso dinâmico, é preferível possibilitá-lo. É possível usar o parâmetro enableCache de diversos elementos de criação de gráficos.

No código, defina enableCache como true nos elementos do gráfico, como mostra a Listagem 17.

Listagem 17. Otimizando a renderização
<div data-dojo-type="dojox.charting.widget.Chart" id="chart" 
    style="width: 100%; height: 180px;">
<div class="plot" name="grid" type="Grid"
    vMinorLines="true" enableCache="true"></div>
    <div class="axis" name="x" enableCache="true"
        fixUpper="minor"   
        majorTickStep="1"
        minorTicks="false"
        labelFunc="displayDate"></div>
    <div class="axis" name="y" vertical="true" min="0"></div>
    <div class="plot" name="plot" type="Columns" enableCache="true"></div>
    <div class="series" name="data" store="store" plot="plot"></div>
    <div class="action" type="dojox.charting.action2d.TouchZoomAndPan" 
        plot="plot" maxScale="7"></div>
</div>

O exemplo não possibilitou o armazenamento em cache no eixo Y. Ao aumentar ou reduzir o zoom, o gráfico ao longo do eixo Y não é renderizado novamente e, portanto, não se beneficiaria da otimização.

Outra forma de otimizar a renderização do aplicativo remoto de criação de gráficos é evitar a renderização desnecessária. Por exemplo, o plot de uma coluna pode ter estruturas de tópicos ou sombras que não são absolutamente necessárias, mas que consumem tempo de renderização. É preciso considerar sua remoção. Outro exemplo é o indicador de dados, para o qual é possível remover traços da estrutura de tópicos definindo as propriedades de estilo correspondentes como null, como mostra a Listagem 18.

Listagem 18. Removendo a renderização desnecessária
<div class="action" type="dojox.charting.action2d.TouchIndicator" plot="plot" 
     series="data" dualIndicator="true" outline="null" lineOutline="null"
     markerOutline="null"></div>

É importante otimizar o tempo de carregamento do aplicativo, especialmente em dispositivos móveis nos quais as conexões de rede nem sempre são rápidas como suas contrapartes de área de trabalho. Com o novo loader de AMD disponível no Dojo, em vez de carregar os vários arquivos necessários de forma síncrona, será possível carregá-los de forma assíncrona e aumentar o desempenho de carregamento geral. Inclua o parâmetro async na configuração inicial do Dojo, como mostra a Listagem 19.

Listagem 19. Possibilitando o carregamento assíncrono
    <script type="text/javascript" src="../../../dojo_current/dojo/dojo.js"
      data-dojo-config="parseOnLoad: true, async: true"></script>

O tempo de carregamento pode ser aprimorado ainda mais removendo quaisquer utilitários absolutamente desnecessários para o seu aplicativo. Por exemplo, todo o aplicativo remoto de criação de gráficos foi definido utilizando a marcação que depende do analisador dojox.mobile . Esse analisador leve é bem mais leve do que o analisador regulador do Dojo. Se você realmente quiser reduzir ainda mais o tamanho de download do seu aplicativo, é possível se livrar totalmente do analisador e desenvolver seu JavaScript.


Conclusão

Neste artigo, você aprendeu como é possível utilizar o pacote de criação de gráficos do Dojo em um aplicativo da web móvel. Ele pode ser customizado para dispositivos móveis a fim de depender de eventos de toque para interação, em vez de depender do mouse ou dos paradigmas do botão. Este artigo também explorou algumas opções avançadas que podem ser utilizadas para melhorar o tempo de carregamento e de renderização.

Se estiver interessado em explorar ainda mais o assunto, a criação de gráficos do Dojo é desenvolvida para ser extensível. É possível desenvolver seus próprios recursos sobre ele. Por exemplo, se precisar de uma interação de toque não fornecida pela estrutura, é possível ampliar o pacote de ação de criação de gráficos do Dojo para criar suas próprias interações.


Download

DescriçãoNomeTamanhoMétodo de download
Source codesource.zip10KBHTTP

Informações sobre métodos de download

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=Desenvolvimento móvel
ArticleID=838009
ArticleTitle=Criação de Gráficos para Dispositivos Móveis com o Dojo Toolkit
publish-date=05282014