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.


<?phpclass TesteCharts extends TPage{    function __construct()     {         parent::__construct();         TPage::include_js('lib/jquery/js/highcharts.js');         $table = new TTable;         $div = new TElement('div');         $div->id = 'imprimirpizza';         $div->style = "width:500px;height:500px";         $table->addRow()->addCell($div);         TTransaction::open('sample');                     $conn = TTransaction::get();         $sql = " (SELECT meses, valor FROM testegraficovendas) ";         $colunas = $conn->query($sql);          $dados = '';         foreach ($colunas as $coluna)         {         $dados = $dados . '["'.$coluna[0].'",'.$coluna[1].'],';         }         TTransaction::close();                  $script = new TElement('script');        $script->type = 'text/javascript';        $javascript = "         $('#imprimirpizza').highcharts({                chart: {                    plotBackgroundColor: null,                    plotBorderWidth: null,                    plotShadow: false                },                title: {                    text: 'Browser market shares at a specific website, 2014'                },                tooltip: {                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'                },                plotOptions: {                    pie: {                        allowPointSelect: true,                        cursor: 'pointer',                        dataLabels: {                            enabled: true,                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',                            style: {                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'                            }                        }                    }                },                series: [{                    type: 'pie',                    name: 'Browser share',                    data: [".$dados."]                }]            });                ";         $script->add($javascript);         parent::add($table);           parent::add($script);     }}?>



Ficarei grato pela ajuda.

Curso Dominando o Adianti Framework

O material mais completo de treinamento do Framework.
Curso em vídeo aulas + Livro completo + Códigos fontes do projeto ERPHouse.
Conteúdo Atualizado!


Dominando o Adianti Framework Quero me inscrever agora!

Comentários (7)


JD

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

<?phpparent::add($div);?>


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


Espero ter ajudado.
FV

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

Vlw mesmo. ;)
JD

Você pode usar:

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

Jheferson deu certo assim:

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



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