Post: Criando um Dashboard com TBGWebCharts

Alessandro Medeiros

Compartilhar no whatsapp
Compartilhar no facebook
Compartilhar no twitter
Compartilhar no linkedin
Compartilhar no facebook

Fala ai Radizeiros e Radizeiras, tudo bom com vocês?

Você anda cansado dos gráficos feios e padrões que o Delphi nos oferece?

Programas web tem maravilhosas experiências visuais, e você gostaria de trazer esse universo para o seu sistema?

Com o TBGWebCharts você poderá trazer o que há de melhor do universo web para o seu sistema, e verá como é simples e rápido, e poderá dar um novo rumo a seu software.

Então mãos a obra

Vamos criar um VCL form Applications.

Nesse form iremos colocar uma panel, que irá representar um toolbar.

E para o nosso menu lateral ou sidebar, iremos também colocar um panel.

Depois que colocamos nosso sidebar, iremos colocar os botões, em nosso projeto simples irei colocar somente um  SpeedButton.

No espaço vazio do formulário iremos por um WebBrowser ocupando todo esse espaço.

E é nesse webbrowser que nosso DashBoard irá ser visualizado.

Iremos colocar alguns ClientDataset, onde terá as informações a serem visualizadas, e o TBGWebChartsé nele que a magica irá acontecer.


WebCharts1
    .NewProject
    .Rows
    .Tag
      .Add(
         WebCharts1
           .ContinuosProject
           .Charts
           .Bar
             .Attributes
               .Name('b1')
               .ColSpan(8)
               .Title('Grafico 1')
               .DataSet
                 .DataSet(ClientDataSet1)
                 .textLabel('2016')
              .&End
              .DataSet
                .DataSet(ClientDataSet2)
                .textLabel('2017')
              .&End
            .&End
          .&End
        .&End
      .HTML
       )
      .&End
      .Tag
        .Add(
           WebCharts1
            .ContinuosProject
            .Charts
            .BarHorizontal
              .Attributes
                .Name('b2')
                .ColSpan(4)
                .Title('Grafico 2')
                .Heigth(300)
                .DataSet
                  .DataSet(ClientDataSet1)
                  .textLabel('2016')
                .&End
                .DataSet
                  .DataSet(ClientDataSet2)
                  .textLabel('2017')
                .&End
              .&End
            .&End
          .&End
          .HTML
          )
         .&End
       .&End
.WebBrowser(WebBrowser1)
.Generated;

Com o comando acima nossos gráficos estão tomando forma, nesse comando estamos gerando dois gráficos de barras, o de vertical e horizontal.

No código podemos ver algumas particularidades do componente TBGWebCharts, falo com mais detalhes dessas particularidade em um de meus treinamentos, o TBGWebCharts Full.

Ao chamarmos o componente criamos um novo projeto de gráficos,  criamos uma linha com o comando Rows, no comando Tag, nós acrescentamos o gráfico de barras Bar, com suas configurações, e  na segunda Tag acrescentamos o gráfico de Barras horizontal, com suas configurações, no final do código nós chamamos o werbbrowser que colocamos na tela com o comando WebBrowser, e mandamos gerar com o Generated. 

Começando a gerar o DashBoard

Agora que já aprendemos as principais funções e recursos que já nos permitem criar um dashboard com o TBGWebCharts.

Vamos agora incrementar nosso Dashboard com alguns outros gráficos.

Vamos acrescentar alguns títulos, alguns gráficos Doughnut e um gráfico de linhas.

Primeiro de tudo que devemos fazer antes do comando Rows, é criar uma outra linha e iremos adicionar um título para esse nosso DashBoard.


WebCharts1
    .NewProject
      .Rows
        .Title
          .Configuracoes
            .H2('DashBoard One')
          .&End
        .&End
     .&End
    .Rows
...

Veja como o nosso DashBoard está ficando:

Viu como o titulo que colocamos no código está sendo visualizado?

Iremos acrescentar um subtitulo.


...

.Jumpline
  .Rows
    .Title
      .Configuracoes
        .H4('Vendas Mensais')
     .&End
    .&End
  .&End
...

Logo após o titulo colocamos um salto de linha com o Jumpline e acrescentamos outro titulo mas com sua formatação um pouco menor.


... 
.Jumpline
.Jumpline
  .Rows
    .Title
      .Configuracoes
        .H4('Vendas por setor')
      .&End
    .&End
  .&End
...

Nesse código colocamos após a geração dos gráficos ficando dessa forma a geração de nosso DashBoard.

Vamos adicionar uma nova linha, Rows onde nós iremos colocar 3 gráficos Doughnuto legal do TBGWebCharts é que todas as propriedades são iguais para todos os gráficos, se copiarmos o mesmo código que gera os gráficos de barras e colocarmos nesse ultimo Rows que criamos, alterando de Bar para Doughnut, como é visto no código abaixo.


...

.Tag
  .Add(
    WebCharts1
      .ContinuosProject
      .Charts
      .Doughnut
        .Attributes
          .Name('b1')
          .ColSpan(4)
          .Title('Grafico 1')
          .DataSet
            .DataSet(ClientDataSet1)
            .textLabel('2016')
         .&End
       .&End
      .&End
    .&End
.HTML
)
.&End
...

Geramos nosso gráfico e veja como está ficando:

Gerou tudo bonito, agora vamos acrescentar mais uma linha(Rows) e nessa linha iremos acrescentar uma Tag e dentro dessa tag iremos incluir mais um gráfico.

E como eu disse que é muito simples usar o TBGWebCharts basta só copiar um gráfico já criado e acrescentar nessa nossa nova Tag. 


...
.Jumpline
  .Rows
    .Tag
      .Add(
        WebCharts1
         .ContinuosProject
         .Charts
         .Lines
           .Attributes
           .Name('l3')
           .ColSpan(12)
           .Title('Grafico 3')
           .DataSet
             .DataSet(ClientDataSet3)
             .textLabel('2016')
             .Fill('false')
           .&End
         .&End
       .&End
     .&End
   .HTML
)
.&End
.&End
...

Executando o projeto…

Viu como é simples criar um Dashboard usando o TBGWebCharts?

Esse post foi retirado de um dos meus treinamentos o TBGWebCharts Full

O QUE É O TBGWebCharts?

Componente para geração de gráficos, dashboards e relatórios no Delphi.

O TBGWebCharts gera gráficos incríveis utilizando bibliotecas javascript, css e html para entregar ao usuário final um layout moderno e inovador em aplicações Delphi. Não é necessário nenhum conhecimento além do Delphi, pois o TBGWebCharts traduz de forma simples toda a complexidade das linguagens Web para o Pascal, fazendo com que você em poucas linhas de código no Delphi possa gerar um gráfico incrível, alimentado com informações de qualquer Dataset do Delphi.

CLIQUE AQUI E SAIBA MAIS SOBRE O CURSO DE TBGWEBCHARTS FULL

 

Faça sua busca

CATEGORIAS

POSTS RECENTES

E caso você tem interesse de conhecer mais sobre Criando um Dashboard com TBGWebCharts, acesse o nosso portal do CLUBE DE PROGRAMADORES EM DELPHI
Você não terá só conteúdos relacionados ao Criando um Dashboard com TBGWebCharts, mas uma quantidade enorme de conteúdos que poderá lhe ajudar muito no seu dia a dia, é uma verdadeira NETFLIX para os programadores Delphi.
Gostou?
Compartilhe:
Compartilhar no whatsapp
Compartilhar no facebook
Compartilhar no twitter
Compartilhar no linkedin
Compartilhar no facebook

Embarque no foguete com milhares de devs para aprender desenvolvimento, evoluir de forma contínua e se manter relevante no mercado.

Sobre
Dúvidas
Cadastre-se em nossa lista

Para ter acesso em primeira mão, a tudo que acontece na Academia do Código, basta se cadastrar em nossa lista

Grupo Thulio Bittencourt | Academia do Código

#FaçaPartedaHistória

Copyright © 2021 – Todos os direitos reservados