Criando um editor de gráfico - Como criar um gráfico baseado em dados

5

Estou desenvolvendo um editor de gráficos que usa arrastar e soltar para construir gráficos hierárquicos (contendo nós e links). Cada nó no gráfico deve estar vinculado a uma tabela em nosso banco de dados (SQL Server). Eu fiz muita pesquisa sobre bibliotecas baseadas em javascript e / ou especificações JSON para desenhar nós e links. Há muitos ótimos exemplos a seguir, mas não tenho idéia sobre como posso vincular um gráfico a um banco de dados (SQL Server, Oracle, MySQL ...). Pensei em esta arquitetura ( Pergunta postada em stackexchange.com)

Eu olhei para a biblioteca D3 . Ele cria gráficos orientados a dados, mas acho que ele usa apenas arquivos simples e não bancos de dados relacionais. Primeiro você pode, por favor, me dizer se minha arquitetura está bem pensada? E segundo você pode me dar algumas idéias sobre como eu posso vincular meus gráficos ao SGBD? Muito obrigado.

    
por Believer 21.05.2013 / 17:12
fonte

1 resposta

1

D3 é uma ótima biblioteca, cujo design bastante inteligente é o resultado de muitos anos de pesquisa. É descendente de Protovis , uma biblioteca que já era muito boa na época. Em seguida, o autor, Mike Bostock, passou para algo mais dinâmico (as diferenças são descritas aqui ).

Existe uma grande quantidade de estranheza à primeira vista no D3. As formas de vincular elementos visuais aos dados, responder a alterações, atualizar os gráficos etc. podem não parecer intuitivas no início. Mas depois de algumas experiências, seguindo os numerosos tutoriais e lendo a extensa documentação, você se torna bastante produtivo.

Em uma aproximação de primeira ordem, você pode pensar em D3 como uma tela SVG. Ele permite que você crie e manipule, não ao contrário do jQuery, o SVG DOM de maneira eficiente e em vários navegadores. Então perceba que você pode, em vez de criar manualmente nós SVG, definir mapeamentos sistemáticos (ou seja, declarativos) de dados para elementos visuais. Além disso, o D3 permite que você personalize, anime, deixe o usuário interagir com o gráfico - e muitas outras coisas.

Com relação à sua pergunta sobre a arquitetura, acho que a pergunta SO a qual você vincula responde a maior parte dela. Sim, é bom, e é o caminho a percorrer se você quiser extrair seus dados de um RDMS.

A maneira como geralmente projetamos aplicativos D3 é a seguinte:

  • suponha que seu aplicativo vai comer dados JSON - você sempre pode transformar outros formatos em JSON no lado do servidor, e JSON é muito mais flexível que todos os outros formatos (exceto talvez XML, mas uma vez que você tentou json_encode() de uma matriz PHP, você nunca olha para trás).
  • crie um arquivo index.html estático, colocando o código de expansão adequado em um arquivo app.js complementar (e talvez um CSS - o material usual). Você pode usar um dos exemplos como ponto de partida.
  • crie um arquivo data.json estático no formato exato em que você espera que o servidor envie seus dados. Coloque alguns dados de amostra dentro. Você também pode colocar esses dados JSON diretamente dentro do seu script app.js - JSON é Javascript depois de tudo.
  • trabalhe em sua lógica front-end, refine o formato de dados JSON, etc. até que você tenha um protótipo decente.
  • configure um servidor da Web simples (por exemplo, o Apache) para que ele sirva o arquivo JSON e faça seu protótipo funcionar com isso em vez do arquivo local
  • crie um script do lado do servidor que gere o mesmo arquivo "estático" (por exemplo, usando PHP). Teste seu aplicativo.
  • faça com que o script PHP se conecte ao banco de dados, gere o arquivo JSON rapidamente e envie-o

Agora, você pode trabalhar no aprimoramento do aplicativo: definindo diferentes URLs para extrair diferentes fluxos de dados, criar meios para o usuário filtrar os dados, etc.

Estas são apenas ideias para começar. O ponto aqui é minimizar a quantidade de mudanças entre cada etapa, para que você aprenda as coisas uma a uma e mantenha o foco nas partes que são realmente difíceis: o aplicativo cliente. Vincular-se a um servidor que gera dados em tempo real é apenas um passo à frente quando você tem um bom aplicativo.

    
por 22.05.2013 / 11:32
fonte