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