Lançado Adianti Framework 7.6!
Clique aqui para saber mais
Conheça Características Quem usa Galeria Cursos Docs Fórum
Downloads
Posts Fique por dentro Sobre o Fórum Minha conta
Gráficos com adianti Caros, Estou tendo problemas com a qualidade das fontes nos gráficos, alguma forma de alterar cor, tamanho, fonte ? att, ...
UP
Gráficos com adianti  
Fechado
Udson Da Priscila 13/04/2015 (há 9 anos)
Caros,

Estou tendo problemas com a qualidade das fontes nos gráficos, alguma forma de alterar cor, tamanho, fonte ?


att,
Pacotão Dominando o Adianti Framework 7
O material mais completo de treinamento do Framework.
Curso em vídeo aulas + Livro completo + Códigos fontes do projeto ERPHouse.
Conteúdo Atualizado! Versão 7.4


Dominando o Adianti 7 Quero me inscrever agora!

Comentários (16)

FC
Felipe Cortez       14/04/2015 (há 9 anos)

Bom dia Udson

O Adianti Reports é um módulo completo muito bom, mas com custo alto para um desenvolvedor iniciante.

Aqui eu uso para isso o highcharts não é difícil de implementar eu fiz esses gráficos a mais de 1 ano.

www.highcharts.com/demo

a integração é igual ao exemplo do tutor jquery
www.adianti.com.br/framework_files/tutor/index.php?class=JqueryGalle

Esse exemplo abaixo é igual a esse link
www.highcharts.com/demo/pie-basic

  1. <?php
  2. class GraficoPIE extends TPage
  3. {
  4.     /**
  5.      * Class constructor
  6.      * Creates the page
  7.      */
  8.     function __construct()
  9.     {
  10.         parent::__construct();
  11.          
  12.         
  13.         // loads the galleria javascript library
  14.         //apontar para onde baixar seu arquivo
  15.         TPage::include_js('lib/jquery/js/highcharts.js');
  16.         
  17.         // creates a table
  18.         $table = new TTable;
  19.         
  20.         // creates the DIV element with the images
  21.         $div = new TElement('div');
  22.         $div->id    = 'container';
  23.         $div->style = "width:700px;height:500px";
  24.         // add the DIV to the table
  25.         $table->addRow()->addCell($div);
  26.                
  27.         parent::add($table); 
  28.     
  29.         
  30.     }
  31.     
  32.  function onGera(){
  33. $script = new TElement('script');
  34. $script->type = 'text/javascript';
  36. $javascript = "
  37. $('#container').highcharts({
  38.         chart: {
  39.             plotBackgroundColor: null,
  40.             plotBorderWidth: null,
  41.             plotShadow: false
  42.         },
  43.         title: {
  44.             text: 'Browser market shares at a specific website, 2014'
  45.         },
  46.         tooltip: {
  47.             pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  48.         },
  49.         plotOptions: {
  50.             pie: {
  51.                 allowPointSelect: true,
  52.                 cursor: 'pointer',
  53.                 dataLabels: {
  54.                     enabled: true,
  55.                     format: '<b>{point.name}</b>: {point.percentage:.1f} %',
  56.                     style: {
  57.                         color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
  58.                     }
  59.                 }
  60.             }
  61.         },
  62.         series: [{
  63.             type: 'pie',
  64.             name: 'Browser share',
  65.             data: [
  66.                 ['Firefox',   45.0],
  67.                 ['IE',       26.8],
  68.                 {
  69.                     name: 'Chrome',
  70.                     y: 12.8,
  71.                     sliced: true,
  72.                     selected: true
  73.                 },
  74.                 ['Safari',    8.5],
  75.                 ['Opera',     6.2],
  76.                 ['Others',   0.7]
  77.             ]
  78.         }]
  79.     });
  80. ";
  82. $script->add($javascript);
  83. parent::add($script);
  85. }
  86. ?>


Boa sorte

Felipe Cortez
FC
Felipe Cortez       14/04/2015 (há 9 anos)

Esquecendo depois para testar chame assim no navegador.

index.php?class=GraficoPIE&method=onGera


Abraços...
UP
Udson Da Priscila - AUTOR DO POST       14/04/2015 (há 9 anos)

Felipe,
Isto era exatamente o que eu estava procurando, muito obrigado mesmo, ficou top.

Você sabe como posso parametrizar para que na legenda ao invés de porcentagem aparecer a quantidade ?
FC
Felipe Cortez       14/04/2015 (há 9 anos)

É só configurar os parametros dentro do "plotOptions" use o jsfiddle para ajustar a sua necessidade.

jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/t

UP
Udson Da Priscila - AUTOR DO POST       14/04/2015 (há 9 anos)

Felipe,
Quero te agradecer mais uma vez, veja o resultado na imagem. Ficou muito bom mesmo, ainda posso exportar para png, jpeg,pdf e svg.

IMG: escritorio.brfonetelecom.com.br:8881/grafico-easycontact.png

Muito grato.

UP
Udson Da Priscila - AUTOR DO POST       14/04/2015 (há 9 anos)

Vou deixar o código abaixo caso alguém precise:

Baixei a Biblioteca para: lib/jquery/js

Biblioteca: www.highcharts.com
Link para download: code.highcharts.com/zips/Highcharts-4.1.5.zip

  1. <?php
  3. /* 
  4.  * To change this license header, choose License Headers in Project Properties.
  5.  * To change this template file, choose Tools | Templates
  6.  * and open the template in the editor.
  7.  */
  10. /**
  11.  * Description of CurrentState Graphic
  12.  *
  13.  * @author udson
  14.  */
  15. class CurrentState extends TPage
  16. {
  17.     function __construct()
  18.     {
  19.         parent::__construct();
  20.          
  21.         TPage::include_js('lib/jquery/js/Highcharts-4.1.5/js/highcharts.js');
  22.         TPage::include_js('lib/jquery/js/Highcharts-4.1.5/js/modules/exporting.js');
  23.         
  24.         $table = new TTable;
  25.         
  26.         $div = new TElement('div');
  27.         $div->id    = 'container';
  28.         $div->style = "width:950px;height:600px";
  29.         
  30.         $table->addRow()->addCell($div);
  31.         parent::add($table); 
  32.         $this->onGenerator();
  33.     }
  34.     
  35.     function onGenerator(){
  36.         $status = $this->onStatus();
  37.         
  38. $script = new TElement('script');
  39. $script->type = 'text/javascript';
  40. $javascript = "
  41. $('#container').highcharts({
  42.         chart: {
  43.             plotBackgroundColor: null,
  44.             plotBorderWidth: null,
  45.             plotShadow: false
  46.         },
  47.         title: {
  48.             text: 'Estado Atual'
  49.         },
  50.         tooltip: {
  51.             enabled: true,
  52.             valueDecimals: 0
  53.         },
  54.         plotOptions: {
  55.             pie: {
  56.                 allowPointSelect: true,
  57.                 cursor: 'pointer',
  58.                 dataLabels: {
  59.                     enabled: true,
  60.                     format: '<p>{point.name}:</p> {point.y}',
  61.                     style: {
  62.                     color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
  63.                     }
  64.                 },
  65.                 showInLegend: true
  66.             }
  67.         },
  68.         series: [{
  69.             type: 'pie',
  70.             name: 'Quantidade',
  71.             data: [
  72.                 ['Confirmação fila',   23],
  73.                 ['Confirmado',       32],
  74.                 ['Confirmação s/ sucesso',    7],
  75.                 ['Lembrete fila',     11],
  76.                 ['Lembrete c/ sucesso',   35],
  77.                 ['Lembrete s/ sucesso',   2],
  78.                 ['Reagendado',   1],
  79.                 ['Reagendamento s / sucesso',   0],
  80.                 ['Cancelado',   12]
  81.             ]
  82.         }]
  83.     });
  84. ";
  85. $script->add($javascript);
  86. parent::add($script);
  87. }
  88. }
  91. Resultado: http://escritorio.brfonetelecom.com.br:8881/grafico-easycontact.png
FS
Fabiano dos Santos       02/11/2015 (há 8 anos)

Boa tarde,
Alguém poderia mostrar um exemplo de como gerar o gráfico com dados do Banco de Dados, utilizando o highcharts? Com dados estáticos tá tranquilo, o problema é com dados da base.

Obrigado.
FC
Felipe Cortez       02/11/2015 (há 8 anos)

Acho que quando fiz esse exemplo ainda era Adianti 1 depois foi implementado o toArray e o fromArray basta substituir no séries data pelo pelo array.

Exemplo www.adianti.com.br/framework_files/tutor/index.php?class=ObjectFromA
FS
Fabiano dos Santos       02/11/2015 (há 8 anos)

Obrigado Felipe,
Vou estudar aqui com este exemplo.

Abraços.
FS
Fabiano dos Santos       03/11/2015 (há 8 anos)

Bom dia Felipe, tudo blz?
Teria como você postar um código de exemplo utilizando o highcharts? Eu sei que vc já me passou um exemplo, mas não tô conseguindo implementar aqui. Não pense que estou pedindo de mão beijada, é que eu estou ainda aprendendo e tenho dificuldade ainda em alguns pontos, então com algo mais visual eu vou entender melhor.

Desde já agradeço.

Abraços.
FC
Felipe Cortez       03/11/2015 (há 8 anos)

Bom dia Fabiano

Vamos lá fui buscar o código repare somente precisamos mudar essa parte :
data: [ ['Confirmação fila', 23], ['Confirmado', 32], ['Confirmação s/ sucesso', 7], ['Lembrete fila', 11], ['Lembrete c/ sucesso', 35], ['Lembrete s/ sucesso', 2], ['Reagendado', 1], ['Reagendamento s / sucesso', 0], ['Cancelado', 12]


A não ser que queira fazer todo o código JS com o json isso seria cansativo.... vamos para minha solução.

vamos fazer uma conexão com BD usarei o get pois geralmente nesses gráficos são feitos calculos.

TTransaction::open('ORACLE');
  1. <?php
  2. $conn = TTransaction::get(); 
  3. $sql = " SELECT TAREFA,  CALCULO1 FROM TABELA ) ";
  5. //executa query        
  6. $colunas = $conn->query($sql);
  7. //crio as variaveis        
  8. $dados = '';
  9. //percorro as colunas e coloco na string         
  10. foreach ($colunas as $coluna)
  11.  {      
  12.   $dados = $dados .  '[\\''.$coluna[0].'\\','.$coluna[1].'],';      
  13.  }
  14.        
  15.  TTransaction::close(); 
  16.  //retiro a ultima virgula      
  17.  $dados = substr($dados,0,-1);
  18. //verificar dados       
  19.  echo $dados;
  20.  ?>


É so colocar dentro do javascript data: [{$dados}]

FS
Fabiano dos Santos       03/11/2015 (há 8 anos)

Quanto ao séries/data eu entendi que tem que chamar o array, o que estou me confundindo é onde eu devo fazer a conexão com o banco. O código abaixo é a classe conforme tentei fazer, mas sei que está errada.

  1. <?php
  2. class GraficoPIE extends TPage
  3. {
  4.     /**
  5.      * Class constructor
  6.      * Creates the page
  7.      */
  8.     function __construct()
  9.     {
  10.         parent::__construct();
  11.          
  12.         
  13.         // loads the galleria javascript library
  14.         //apontar para onde baixar seu arquivo
  15.         TPage::include_js('lib/jquery/js/highcharts.js');
  16.         
  17.         // creates a table
  18.         $table = new TTable;
  19.         
  20.         // creates the DIV element with the images
  21.         $div = new TElement('div');
  22.         $div->id    = 'container';
  23.         $div->style = "width:700px;height:500px";
  24.         // add the DIV to the table
  25.         $table->addRow()->addCell($div);
  26.                
  27.         parent::add($table); 
  28.     
  29.     
  30.        TTransaction::open('meubanco'); // open transaction
  31.             
  32.         // Convert an Active Record into array
  33.         $conn = TTransaction::get(); 
  34.         $sql = " SELECT nome_curso, valor_curso FROM idiomas ) ";
  35.         //executa query        
  36.         $colunas = $conn->query($sql);
  37.         //crio as variaveis        
  38.         $dados = '';
  39.         //percorro as colunas e coloco na string         
  40.         foreach ($colunas as $coluna)
  41.          {      
  42.           $dados = $dados .  '[\''.$coluna[0].'\','.$coluna[1].'],';      
  43.          }
  44.                
  45.          TTransaction::close(); 
  46.          //retiro a ultima virgula      
  47.          $dados = substr($dados,0,-1);
  48.         //verificar dados       
  49.          echo $dados; 
  50.           }
  51.     
  52.  function onGera(){
  53.         $script = new TElement('script');
  54.         $script->type = 'text/javascript';
  55.         $javascript = "
  56.         $('#container').highcharts({
  57.                 chart: {
  58.                     plotBackgroundColor: null,
  59.                     plotBorderWidth: null,
  60.                     plotShadow: false
  61.                 },
  62.                 title: {
  63.                     text: 'Browser market shares at a specific website, 2014'
  64.                 },
  65.                 tooltip: {
  66.                     pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  67.                 },
  68.                 plotOptions: {
  69.                     pie: {
  70.                         allowPointSelect: true,
  71.                         cursor: 'pointer',
  72.                         dataLabels: {
  73.                             enabled: true,
  74.                             format: '<b>{point.name}</b>: {point.percentage:.1f} %',
  75.                             style: {
  76.                                 color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
  77.                             }
  78.                         }
  79.                     }
  80.                 },
  81.                 series: [{
  82.                     type: 'pie',
  83.                     name: 'Browser share',
  84.                     data: [{$dados}]
  85.                 }]
  86.             });
  87.         ";
  88.         $script->add($javascript);
  89.         parent::add($script);
  90.         }
  91. }
  92. ?>



Obrigado!
FC
Felipe Cortez       03/11/2015 (há 8 anos)

Acho que entendi a função deve estar atrapalhando retire ela.

class GraficoPIE extends TPage
{
/**
* Class constructor
* Creates the page
*/
function __construct()
{
parent::__construct();


// loads the galleria javascript library
//apontar para onde baixar seu arquivo
TPage::include_js('lib/jquery/js/highcharts.js');

// creates a table
$table = new TTable;

// creates the DIV element with the images
$div = new TElement('div');
$div->id = 'container';
$div->style = "width:700px;height:500px";
// add the DIV to the table
$table->addRow()->addCell($div);

parent::add($table);


TTransaction::open('meubanco'); // open transaction

// Convert an Active Record into array
$conn = TTransaction::get();
$sql = " SELECT nome_curso, valor_curso FROM idiomas ) ";
//executa query
$colunas = $conn->query($sql);
//crio as variaveis
$dados = '';
//percorro as colunas e coloco na string
foreach ($colunas as $coluna)
{
$dados = $dados . '[''.$coluna[0].'','.$coluna[1].'],';
}

TTransaction::close();
//retiro a ultima virgula
$dados = substr($dados,0,-1);
//verificar dados
echo $dados;

$script = new TElement('script');
$script->type = 'text/javascript';
$javascript = "
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
pointFormat: '{series.name}: {point.percentage:.1f}%'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [{$dados}]
}]
});
";
$script->add($javascript);
parent::add($script);

}
FS
Fabiano dos Santos       03/11/2015 (há 8 anos)

Boa noite Felipe,
Infelizmente não adiantou retirar a função, agora está apresentando o erro

" Parse error: syntax error, unexpected ''.$coluna[0].'' (T_CONSTANT_ENCAPSED_STRING) in C:xampphtdocsunaappcontrolgraficosGraficoPIE.class.php on line 41"

Mas tranquilo, não quero tomar muito seu tempo, vou dar mais uma pesquisada e tentar achar uma solução.

Obrigado.
FC
Felipe Cortez       03/11/2015 (há 8 anos)

Nada rapaz, não desistimos assim facilmente percebi que quando posto a msg ele corta o código por causa da "barra" no forum não aparece, por isso esta dando o erro.

me encaminhe um email que te envio o código certinho felipecortez.fgc@gmail.com
FV
Felipe Vicente       13/11/2015 (há 8 anos)

Olá galera, esse exemplo é muito bom, consegui gerar o que eu queria, porém queria tirar uma dúvida de como alinhar a div.
De acordo com que vi ela ta dentro de um table então gostaria de saber como tirar da table e alinhar para o top.
Fico no aguardo pela ajuda.