8 de jun de 2009

Open Flash Chart - Configuração e primeiras impressões

Durante o desenvolvimento de um projeto pessoal sempre tive um sentimento de que os gráficos que estava utilizando que são gerados utilizando a Google chart api que é excelente mas por se basear em imagem não fornece o nível de gráficos que eu desejo para o meu projeto. Após alguma pesquisa encontrei a API Open Flash Chart 2 que pelas minhas pesquisas apresenta funcionalidades muito mais próxima das que eu desejo para o projeto. Este post tem por objetivo mostrar a configuração necessária e também minhas primeiras impressões na utilização da API Open Flash Chart 2 em meu projeto.

O projeto que estou desenvolvendo e onde irei testar a integração desta API utiliza a estrutura fornecida pelo Appfuse com Struts 2.

Na própria página do projeto existe uma referência a uma librarie java que pode ser utilizada para integrar o Open Flash Chart em um projeto J2EE, que é o meu caso, decidi então utilizar a librarie chamada jofc2 no projeto por considerar que é a que está mais evoluída. Neste primeiro post sobre o assunto vou demonstrar a configuração básica do OFC com um projeto do AAFuse utilizando HTML simples e um arquivo JSON seguindo o exemplo 1 dos tutoriais do JOFC2.

Como esta API é em flash seu funcionamento se baseia em baixar um arquivo flash já pronto e depois configurá-lo utilizando Json. A API jofc2 que irei utilizar permite que fiquemos abstraídos do JSon utilizando somente java para configurar os gráficos.

Para iniciar os testes o primeiro passo é criar um projeto funcional do appfuse. Após o projeto ser criado vamos executar um primeiro exemplo simples de gráfico OFC utilizando html puro e json.

Para isso copie para a raiz web do seu projeto do appfuse criado o arquivo do pacote OFC chamado open-flash-chart.swf e crie os arquivos chart.htm e data.json na estrutura do projeto e copie o arquivo open-flash-chart.swf colocando-os sob o diretório src/main/webapp conforme mostrado na imagem abaixo:


Segue código a ser inserido no arquivo chart.htm(as tags de abertura e fechamento de html e body do código foram omitidas para compatibilidade de postagem com o blogspot e devem ser corrigidas antes de rodar o exemplo) :
html>
body>
 

Hello World

/body> html>


E o código do arquivo data.json:

{
  "title":{
    "text":  "Many data lines",
    "style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}"
  },
 
  "y_legend":{
    "text": "Open Flash Chart",
    "style": "{color: #736AFF; font-size: 12px;}"
  },
 
  "elements":[
    {
      "type":      "bar",
      "alpha":     0.5,
      "colour":    "#9933CC",
      "text":      "Page views",
      "font-size": 10,
      "values" :   [9,6,7,9,5,7,6,9,7]
    },
    {
      "type":      "bar",
      "alpha":     0.5,
      "colour":    "#CC9933",
      "text":      "Page views 2",
      "font-size": 10,
      "values" :   [6,7,9,5,7,6,9,7,3]
    }
  ],
 
  "x_axis":{
    "stroke":1,
    "tick_height":10,
    "colour":"#d000d0",
    "grid_colour":"#00ff00",
    "labels": {
        "labels": ["January","February","March","April","May","June","July","August","Spetember"]
    }
   },
 
  "y_axis":{
    "stroke":      4,
    "tick_length": 3,
    "colour":      "#d000d0",
    "grid_colour": "#00ff00",
    "offset":      0,
    "max":         20
  }
}



Após ter configurado estes 3 arquivos para ver o seu primeiro gráfico OFC funcionando execute o projeto do Appfuse gerado com o comando mvn jetty:run e acesse a url: http://localhost:8080/chart.htm?ofc=data.json

Se tudo tiver sido feito corretamente um gráfico como o mostrado na imagem abaixo deverá ser renderizado. Em um próximo post irei detalhar como utilizar a biblioteca JOFC para renderizar os gráficos utilizando struts2 e jsp.



[]s

2 comentários:

Fabricio Chaves disse...

Bom dia, Marcos!
No meu arquivo não aparece o grafico; o que aparece é o seguinte: C:\Users\John\Documents\flash\svn\data-files\data-47.txt

Sabe me informar o que está errado?

Marcos Maia disse...

Oi Fabrício,

tem muito tempo que fiz este post. Não sei dizer assim só com esse erro. Você teria que me mandar algum trecho de código para eu ver. Pra começar vc poderia dizer o que é essa referência, data-47.txt?

[ ]s,