Lançado Adianti Framework 7.6!
Clique aqui para saber mais
Dúvida como posicionar div de um gráfico charts Olá galera bom dia, gostaria de tirar uma dúvida de como inserir uma div sem o tipo de TTable, também queria saber de como ajustar o "top". Segue um código que peguei de exemplo em um post do fórum. ...
FV
Dúvida como posicionar div de um gráfico charts  
Fechado
Olá galera bom dia, gostaria de tirar uma dúvida de como inserir uma div sem o tipo de TTable, também queria saber de como ajustar o "top".

Segue um código que peguei de exemplo em um post do fórum.


  1. <?php
  2. class TesteCharts extends TPage
  3. {
  4.     function __construct() 
  5.     { 
  6.         parent::__construct(); 
  7.         TPage::include_js('lib/jquery/js/highcharts.js'); 
  8.         $table = new TTable
  9.         $div = new TElement('div'); 
  10.         $div->id 'imprimirpizza'
  11.         $div->style "width:500px;height:500px"
  12.         $table->addRow()->addCell($div); 
  13.         TTransaction::open('sample'); 
  14.             
  15.         $conn TTransaction::get(); 
  16.         $sql " (SELECT meses, valor FROM testegraficovendas) "
  17.         $colunas $conn->query($sql);  
  18.         $dados ''
  19.         foreach ($colunas as $coluna
  20.         { 
  21.         $dados $dados '["'.$coluna[0].'",'.$coluna[1].'],'
  22.         } 
  23.         TTransaction::close(); 
  24.          
  25.         $script = new TElement('script');
  26.         $script->type 'text/javascript';
  27.         $javascript "
  28.          $('#imprimirpizza').highcharts({
  29.                 chart: {
  30.                     plotBackgroundColor: null,
  31.                     plotBorderWidth: null,
  32.                     plotShadow: false
  33.                 },
  34.                 title: {
  35.                     text: 'Browser market shares at a specific website, 2014'
  36.                 },
  37.                 tooltip: {
  38.                     pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  39.                 },
  40.                 plotOptions: {
  41.                     pie: {
  42.                         allowPointSelect: true,
  43.                         cursor: 'pointer',
  44.                         dataLabels: {
  45.                             enabled: true,
  46.                             format: '<b>{point.name}</b>: {point.percentage:.1f} %',
  47.                             style: {
  48.                                 color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
  49.                             }
  50.                         }
  51.                     }
  52.                 },
  53.                 series: [{
  54.                     type: 'pie',
  55.                     name: 'Browser share',
  56.                     data: [".$dados."]
  57.                 }]
  58.             });
  59.         
  60.         "
  61.         $script->add($javascript); 
  62.         parent::add($table);   
  63.         parent::add($script); 
  64.     }
  65. }
  66. ?>



Ficarei grato pela ajuda.

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 (7)


JD

Felipe para add a div fora do TTable faça:

  1. <?php
  2. parent::add($div);
  3. ?>


E comente a linha:
  1. <?php
  2. //$table->addRow()->addCell($div); 
  3. ?>


Espero ter ajudado.
FV

Obrigado, ajudou bastante, porém agora tenho que ver como fazer o alinhamento "top".

Vlw mesmo. ;)
JD

Você pode usar:

  1. <?php
  2. $div->style "top: 0px;width:500px;height:500px"//o atributo style define todas as propriedades CSS 
  3. ?>
FV

Jheferson deu certo assim:

  1. <?php
  2. $div->style =  "width:500px;height:500px;
  3.                         position: relative;top: 250px;";
  4. ?>



Obrigado mais uma vez.
JD

Isso mesmo.
:)
FS

E se eu quiser deixar esta classe responsiva, como devo proceder? Eu já estou usando o template ERP2, mas não estou conseguindo deixar o gráfico responsivo. Já removi os tamanhos fixos, adicionei $table->width = '100%';, mas sem sucesso,

Obrigado.
JD

Verifique se o plugin de graficos que você está utilizando já tem suporte para responsividade, se sim, acredito que basta você deixar a DIV com width 100%;

Caso o plugin não tenha suporte, você terá que criar um algoritmo com javascript, para tratar o tamanho do grafico conforme o tamanho da "screen".

Mais dicas de responsividade:
www.adianti.com.br/forum/pt/view_1071?dicas-de-responsividade-para-a