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 Doughnut, o 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
