E fecha colchetes e dentro dos colchetes abre e fecha aspas simples e dentro das aspas simples vocês vão colocar corechart fora dos colchetes vírgula e abre e fecha aspas simples e dentro das aspas simples vocês vão colocar o comando language na sequência fora das aspas simples dois pontos e abre e fecha aspas simples novamente e dentro das aspas simples comando PT fora dos parênteses fecha a linha de código com ponto e vírgula.
Então nós vamos trabalhar com a biblioteca de visualização de gráficos que é o comando corechart referenciamos a biblioteca agora nós precisamos fazer a função que vai desenhar o gráfico então function eu vou chamar Esta função de desenhar gráfico pizza abre e fecha parênteses e abre e fecha Chaves e esta função ela precisa receber os dados que é para fazer o gráfico então podem copiar o nome da função e vocês vão acionar dentro da função relatório depois.
Do IF que verifica se retornou informação no array dados real Cola a função e fecha a linha de código com ponto e vírgula e a função desenhar gráfico pizza ela vai receber os dados rel referente aos dados do relatório Ok passamos os dados para a função desenhar gráfico agora na função desenhar gráfico Primeiro passo é definir a formatação do nosso gráfico var eu vou chamar esta variável de formatar igual e abre e fecha Chaves e dentro desta variável Primeiro passo é colocar o título.
Do nosso gráfico comando title title dois pontos espaço e abre e fecha aspas duplas e dentro das aspas duplas vai o texto do título eu vou colocar vendas rs por produto fora das aspas duplas vírgula precisa ser Vírgula pessoal não pode ser ponto e vírgula e agora nós vamos definir o estilo do título então eu vou colocar title title text Style cuidem para colocar o t e o s em caixa alta depois dos dois pontos dois pontos espaço e abre e fecha a Chaves e pressiona enter e dentro.
Seguinte eu não quero legenda no meu gráfico então comando Legend dois pontos abre e fecha aspas duplas e dentro das aspas duplas comando none vírgula e eu quero um gráfico estilo 3D então is is3D dois pontos e aí vocês vão colocar o comando true vírgula próximo passo é definir a largura do gráfico então comando width dois pontos eu vou colocar 410 piels vírgula e a altura comando heiht dois pontos eu vou colocar 330 vírgula e para exibir a informação da fatia do gráfico.
Quando o usuário parar o cursor eu vou colocar o comando Pie Pie Slice Slice text dois pontos abre e fecha aspas duplas e dentro das aspas duplas comando Label e fecha a linha de código com vírgula beleza definido o estilo do gráfico agora nós precisamos montar uma tabelinha para desenhar o gráfico eu vou chamar esta variável de dados dados Tab vai ser igual a Google ponto visualization vamos bem com calma agora pessoal Array to to data table é uma tabela aray.
To data table abre e fecha parênteses e dentro dos parênteses nós vamos fazer o seguinte então aqui pessoal eu passei os dados para desenhar o gráfico então na função eu vou colocar uma variável que eu vou chamar de dados pega a variável dados e vocês vão colocar dentro dos parênteses do array to data table Cola a variável dados vírgula espaço comando false e fecha a linha de código com ponto e vírgula agora pessoal nós vamos fazer o seguinte criar uma variável que eu vou chamar de.
Gráfico não precisa colocar var somente digitar gráfico vai ser igual ao comando New New Google ponto visualization ponto e o nome do gráfico o nosso caso vai ser o gráfico que é o gráfico de pizza abre e fecha parênteses e dentro dos parênteses precisamos informar a div que vai receber o gráfico então agora acessem o arquivo grafico HTML e vocês vão procurar pela div Deixa me ver aqui está gráfico pizza copia o ID da div volta no arquivo gráfico traço JS e dentro dos.
Parênteses nós vamos colocar document getelement by ID abre e fecha parênteses e abre e fecha aspas duplas dentro dos parênteses e cola o ID da div dentro das aspas duplas e fecha a linha de código com ponto e vírgula próximo passo é desenhar este gráfico na tela então vocês vão copiar a variável gráfico gráfico ponto comando draw gráfico abre e fecha parênteses e dentro dentro dos parênteses nós vamos colocar a variável dados Tap dados Tab vírgula vem a formatação do.
Veja Também:
- Planilha de Formação de Preços de Produtos para Revenda em Excel 6.0
- Como fazer um Gráfico de Candle no EXCEL (Vela)
- Como Criar carteirinha de membros na planilha Cadastro de membros
Nosso gráfico variável formatar copia a variável formatar e cola depois da vírgula e fecha a linha
De código com ponto e vírgula beleza pessoal desenhamos o gráfico de pizza tem mais uma parte que nós vamos fazer para colocar os totais nas dives qtd e RS mas a parte do gráfico é até esta linha de código então já podemos testar salva as alterações e vamos para a planilha executando o formulário de gráfico formulário executado vamos ver deixa eu testar vamos ver.Com televisores televisores opa não desenhou o nosso gráfico pessoal vamos ver o que que nós erramos então clica com o botão direito do mouse sobre o formulário e vai na opção inspecionar na janela que vai abrir vocês vão acessar a opção console e vocês vão dar uma olhada se tem alguma mensagem em vermelho no meu caso pessoal não tem mensagem em vermelho mas aqui ó tem um alerta sintaxe error isso aqui ó não foi identificado que é o comando Legend então eu devo ter cometido.
Alguma falha linha de código 309 fecha o console volta no editor então vamos ver linha de código 309 comando Legend está correto None também está correto e aqui está correto mas aqui pessoal ó tem um detalhe depois destas Chaves do Style precisa colocar vírgula e eu não tinha colocado acredito que seja isso salva as alterações e vamos testar é importante vocês aprender também estes detalhes que facilitam na localização dos erros de digitação dos códigos show de bola pessoal.
Era mesmo este detalhe lembra do comando que eu falei para exibir a informação Quando parar o cursor no gráfico este aqui ó Conforme eu paro o cursor em uma fatia é exibido o valor e também a porcentagem E também o nome do produto vamos testar deixa eu pegar televisores vai ser mais fácil show de bola pessoal e o título em negrito e em azul forte beleza galera apesar do pequeno erro na digitação do código já está funcionando o nosso gráfico de pizza agora pessoal eu vou fazer.
O seguinte colocar o total referente à quantidade e também ao valor monetário na div qtd e na div RS podem fechar o formulário voltar no editor função desenhar gráfico pizza agora depois bem no final antes da Chaves que fecha a função Primeiro passo é definir duas variáveis var Total qtd vai ser igual a zero e ponto e vírgula var Total RS também igual a zero por padrão e ponto e vírgula e agora pessoal nós precisamos fazer um laço for sobre a variável dados que está com os registros do nosso.
Relatório dados rel então podem copiar a variável dados e depois da var total e da var RS nós vamos fazer um laço for abre e fecha parênteses e abre e fecha Chaves e dentro dos parênteses var i igual a 1 por que igual a 1 porque na linha zero eu tenho o cabeçalho das colunas e o cabeçalho eu não quero somar ponto e vírgula e vai fazer enquanto a variável I for menor que a variável dados ponto length ponto e vírgula i mais mais e dentro deste laço nós precisamos de um if então if abre e fecha.
Parênteses e abre e fecha Chaves e dentro dos parênteses variável dados abre e fecha colchetes variável I que representa a linha em que o laço está abre e fecha colchetes e dentro dos colchetes coluna um Por que coluna um vamos entender como que nós Montamos a estrutura do array dados rel é Nesta parte ó coluna zero é o nome do produto coluna 1 é o valor coluna 2 a quantidade entendido este detalhe então agora depois dos colchetes eu vou colocar maior que zero Se entrou neste.
If eu vou fazer a somatória primeiro o total RS podem copiar a variável Total Rs vai ser igual a parse float abre e fecha parênteses Total RS mais parse float abre e fecha parênteses e dentro dos parênteses variável dados abre e fecha colchetes variável I fora dos colchetes abre e fecha colchete novamente coluna um que é a coluna do valor e fecha a linha de código com ponto e vírgula para quantidade podemos reaproveitar esta linha de código copia e cola pega a variável total.
Qtd e altera Total qtd igual Total qtd dentro dos parênteses e a quantidade vai estar na coluna 2 desta forma nós vamos fazer a somatória Total depois que sair do laço for nós precisamos colocar os totais nas divis primeiro eu vou colocar na div QTD então document.get Element by ID abre e fecha parênteses e abre e fecha aspas duplas dentro dos parênteses e dentro das aspas duplas vai o ID da div então acessem o arquivo gráfico ponto html div qtd copia o ID volta no código e cola dentro.
Das aspas duplas fora dos parênteses ponto Inner HTML igual a parsefloat abre e fecha parênteses e
Dentro dos parênteses vai a variável total qtd fora dos parênteses ponto locale string abre e fecha parênteses e dentro dos parênteses abre e fecha aspas duplas e dentro das aspas duplas comando PT traço BR fora das aspas duplas vocês vão colocar vírgula espaço e abre e fecha Chaves e dentro das chaves comando Style Style dois pontos espaço abre e fecha aspas duplas e dentro.Das aspas duplas comando decimal fora das aspas duplas vírgula espaço novamente comando decimal dois pontos espaço e abre e fecha aspas duplas e dentro das aspas duplas BRL BRL para o formato do Brasil e fecha a linha de código com ponto e vírgula para o total RS podemos reaproveitar esta linha de código copia e cola acessa o arquivo gráfico ponto HTML e copia o ID da div RS copia o ID volta no código e altera dentro das aspas duplas pega a variável Total rs e altera dentro.
Dos parênteses do parsefloat beleza colocamos o total referente a quantidade e ao valor agora eu posso fechar Array dados então podem copiar dados ponto length e ponto e vírgula e podemos fechar também a tabela do gráfico variável dados Tab copia o nome da variável Dad Tab ponto length e ponto e vírgula beleza galera salva as alterações e vamos testar agora além de exibir o gráfico de pizza precisa exibir também as somatórias show de bola pessoal quantidade 6 Total RS 7.850 vamos ver.
Postar um comentário