Erro na exibição de Grafico - Utilizando HighCharts !!!

Nilton Próspero 01/02/2017 (há 8 anos)

Estou finalizando o desenvolvimento do meu sistema e neste momento estou desenvolvendo alguns gráficos, e estou com um problema que não consigo resolver. Esse é o pedido de ajuda.
Estou utilizando uma biblioteca para os gráficos chamada highcharts.com.
Quando executo os gráficos em localhost (127.0.0.1) funciona perfeitamente, mas quando copiei os programas para o provedor (servidor) o grafico não aparece e não dá nenhum erro.
Andei lendo, e tem várias pessoas que comentaram que eu preciso da linha abaixo (ajax.googleapis........) , mas se eu deixo esta linha, parece que entra em conflito com o libraries.html porque tem uma chamada também para o jquery.mim.js. E se deixar a chamada ao ajax.googleapis não funciona.

https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js

Alguem tem idéia do que pode ser ? Ou alguma dica ? Já tentei de tudo e esta muito dificil de achar porque não dá erro.......

Este codigo abaixo é um exemplo que falaram para utilizar o ajax.googleapis,

 <?php
<!DOCTYPE HTML>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
?>

-- ====================================================================
Codigo do Grafico que estou utilizando, , quem puder ajudar agradeço muito.
-- ====================================================================

 <?php
class Grafico_sindrome extends TPage 
{
    private $form;      // search form
    private $datagrid;  // listing
    private $pageNavigation;
    private $loaded;
    function __construct()
    {
        parent::__construct();
        //------------------------------------------------------------------------------------------//
        if (TSession::getValue('logged') !== TRUE)
          {
            throw new Exception(_t('Permission denied'));
            AdiantiCoreApplication::loadPage('LoginForm', '', $_REQUEST);
          }
        //--------------------------------------------------------------------------------//
        $this->form = new TQuickForm('form');
        $this->form->class = 'tform';
        //--------------------------------------------------------------------------------//
        $table = new TTable; 
        $div = new TElement('div'); 
        $div->id = 'container'; 
        $div->style = "width:850px;height:350px"; 
        $table->addRow()->addCell($div);
        $table1 = new TTable; 
        $div1 = new TElement('div'); 
        $div1->id = 'painel_botoes'; 
        $div1->style = "width:850px;height:20px"; 
        $table1->addRow()->addCell($div1);
        //--------------------------------------------------------------------------------//
        $excel=new TButton('excel');
        $excel->setAction(new TAction(array($this, 'onExportCSV')), 'Excel');
        $excel->setImage('fa:table blue');
        $excel->id = 'excel'; 
        //--------------------------------------------------------------------------------//
        $this->form->setFields(array($excel));
        //--------------------------------------------------------------------------------//
        $this->datagrid = new TDataGrid;
        $this->datagrid->style = 'width: 100%';
        //--------------------------------------------------------------------------------//
        $this->datagrid->class='tdatagrid_table customized-table'; 
        //--------------------------------------------------------------------------------//
        // make scrollable and define height *****************************
        $this->datagrid->setHeight(200);
        $this->datagrid->makeScrollable();
        $this->datagrid->style = "width: 100%;";
        //--------------------------------------------------------------------------------//
        $column_descricao  = new TDataGridColumn('Descricao_Sindrome', 'Sindrome', 'left', 225);
        $column_qtdpacien  = new TDataGridColumn('QtdPacientes', 'Qtd Pac', 'center', 50);
        $column_emtratame  = new TDataGridColumn('Em_Tratamento', 'Em Trat', 'center', 50);
        $column_semtratam  = new TDataGridColumn('Sem_Tratamento', 'Sem Trat', 'center', 50);
        $column_masculino  = new TDataGridColumn('Masculino', 'Masc', 'center', 50);
        $column_feminino   = new TDataGridColumn('Feminino', 'Fem', 'center', 50);
        $column_anos_0_10  = new TDataGridColumn('anos_0_10', '0_10', 'center', 50);
        $column_anos_11_20 = new TDataGridColumn('anos_11_20', '11_20', 'center', 50);
        $column_anos_21_30 = new TDataGridColumn('anos_21_30', '21_30', 'center', 50);
        $column_anos_31_40 = new TDataGridColumn('anos_31_40', '31_40', 'center', 50);
        $column_anos_41_50 = new TDataGridColumn('anos_41_50', '41_50', 'center', 50);
        $column_anos_51_60 = new TDataGridColumn('anos_51_60', '51_60', 'center', 50);
        $column_anos_61_70 = new TDataGridColumn('anos_61_70', '61_70', 'center', 50);
        $column_anos_71_80 = new TDataGridColumn('anos_71_80', '71_80', 'center', 50);
        $column_anos_81_90 = new TDataGridColumn('anos_81_90', '81_90', 'center', 50);
        $column_anos_91_100 = new TDataGridColumn('anos_91_100', '91_100', 'center', 50);
        $column_anos_maior_100 = new TDataGridColumn('anos_maior_100', '> 100', 'center', 50);
        
        $this->datagrid->addColumn($column_descricao);
        $this->datagrid->addColumn($column_qtdpacien);
        $this->datagrid->addColumn($column_emtratame);
        $this->datagrid->addColumn($column_semtratam);
        $this->datagrid->addColumn($column_masculino);
        $this->datagrid->addColumn($column_feminino);
        $this->datagrid->addColumn($column_anos_0_10);
        $this->datagrid->addColumn($column_anos_11_20);
        $this->datagrid->addColumn($column_anos_21_30);
        $this->datagrid->addColumn($column_anos_31_40);
        $this->datagrid->addColumn($column_anos_41_50);
        $this->datagrid->addColumn($column_anos_51_60);
        $this->datagrid->addColumn($column_anos_61_70);
        $this->datagrid->addColumn($column_anos_71_80);
        $this->datagrid->addColumn($column_anos_81_90);
        $this->datagrid->addColumn($column_anos_91_100);
        $this->datagrid->addColumn($column_anos_maior_100);
        
        
        $this->datagrid->createModel();
        $this->datagrid->clear;
        
        $this->datagrid->disableDefaultClick();
        
      // wrap the page content using vertical box
        $vbox = new TVBox;
        $vbox->add(new TXMLBreadCrumb('menu.xml', __CLASS__));
        $vbox->add($this->datagrid);
        //--------------------------------------------------------------------------------//
        parent::add($vbox);
        parent::add($table);
        parent::add($table1);
        parent::add($excel);
        
        $this->onGenerator();
   //----------------------------------------------------------------------------------------//
   }
   //----------------------------------------------------------------------------------------//
   
   /**
     * Export to CSV
     */
    function onExportCSV()
    {
            $csv = '';
    }
    //--------------------------------------------------------------------------------------------------//    
    function onGenerator()
    {
   //----------------------------------------------------------------------------------------//
        $conn = TTransaction::get(); 
        $result = $conn->query(" SELECT S.descricao as Descricao_Sindrome,
           COUNT(S.descricao) AS TotalPac,
           COUNT(CASE WHEN P.em_tratamento='S' then 1 END) as Em_Tratamento,
           COUNT(CASE WHEN P.em_tratamento='N' then 2 END) as Sem_Tratamento,
                   FROM pac P
              LEFT JOIN sin S 
                     ON P.sindrome_id = S.sindrome_id
                  WHERE P.status <> 'EX' AND P.status <> 'OB' 
               GROUP BY S.descricao
               ORDER BY S.descricao ASC "); 
              
        $this->datagrid->clear();
        
        $item = '';    
        $item = new StdClass;
        foreach ($result as $row) 
         { 
             $item->Descricao_Sindrome = $row[0];
             $item->Descricao_Sindrome = strtoupper($item->Descricao_Sindrome); 
             $item->QtdPacientes       = $row[1];
             $item->Em_Tratamento      = $row[2];
             $item->Sem_Tratamento     = $row[3];
             $item->Masculino          = $row[4];
             $item->Feminino           = $row[5];
             $item->anos_0_10          = $row[6];
             $item->anos_11_20         = $row[7];
             $item->anos_21_30         = $row[8];
             $item->anos_31_40         = $row[9];
             $item->anos_41_50         = $row[10];
             $item->anos_51_60         = $row[11];
             $item->anos_61_70         = $row[12];
             $item->anos_71_80         = $row[13];
             $item->anos_81_90         = $row[14];
             $item->anos_91_100        = $row[15];
             $item->anos_maior_100     = $row[16];
               
             $this->datagrid->addItem($item);
         }
       TTransaction::close();        
         
   //----------------------------------------------------------------------------------------//
     $connection = mysqli_connect("localhost", "usr_sgp", "nil200929", "sgp_novo");
   //----------------------------------------------------------------------------------------//     
?>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Grafico Sindromes</title>
</head>

<style>
.payment-methods {
list-style: none;
margin: 0;
padding: 0;
}

.payment-methods:after {
content: "";
clear: both;
}

.payment-method {
top: 680px;
position: relative;
border: 0px solid #ccc;
box-sizing: border-box;
float: left;
height: 20px;
width: 100px;
left:300px;
}

.payment-method + .payment-method {
margin-left: 25px;
}

input[type=radio].css-checkbox {
position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
}
input[type=radio].css-checkbox + label.css-label {
padding-left:20px;
height:15px;
display:inline-block;
line-height:15px;
background-repeat:no-repeat;
background-position: 0 0;
font-size:15px;
vertical-align:middle;
cursor:pointer;
}

input[type=radio].css-checkbox:checked + label.css-label {
background-position: 0 -15px;
}

label.css-label {
background-image:url(app/images/check.png);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

</style>

<div id="painel_botoes">

<ul class="payment-methods">
<li class="payment-method">
<input type="radio" name="radiog_lite" class="css-checkbox" id="radio1" value="column" onclick= "chartfunc()" checked="checked">
<label for="radio1" class="css-label radGroup1">Coluna  </label>

<li class="payment-method">
<input type="radio" name="radiog_lite" class="css-checkbox" id="radio3" value="pie" onclick= "chartfunc()">
<label for="radio3" class="css-label radGroup1">Pizza  </label>

<li class="payment-method">
<input type="radio" name="radiog_lite" class="css-checkbox" id="radio4" value="line" onclick= "chartfunc()">
<label for="radio4" class="css-label radGroup1">Linha  </label>

</div>

<script type="text/javascript">

$(function () {

var options = {
chart: {
renderTo: 'container',
type: 'column',
options3d: {
enabled: true,
alpha: 0,
beta: 0,
depth: 20,
viewDistance: 30
},

events: {
drilldown: function (e) {
if (!e.seriesOptions) {

var chart = this;

// Show the loading label
chart.showLoading('Loading ...');

setTimeout(function () {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, series);
}, 1000);
}
}
},
plotBorderWidth: 0
},

title: {
text: 'Sindromes',
},
//
xAxis: {
type: 'category',
labels: {
rotation: -35,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},

//
yAxis: {
min: 0,
title: {
margin: 10,
text: 'Quantidade Pacientes'
},
},
//
legend: {
enabled: true,
},
//
plotOptions: {
series: {
pointPadding: 0,
borderWidth: 0,
dataLabels: {
enabled: true
}
},
//---------------------------------------------------//
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
},
//----------------------------------------------------//
},

tooltip: {
pointFormat: '{point.y} pacientes'
},

//
series: [{
name: 'Paciente(s)',
//colorByPoint: true,
data: [

 <?php 
                            $result_sindrome = mysqli_query($connection,$sql);
                            while ($row = mysqli_fetch_array($result_sindrome)) 
                            {
                        ?>

 <?php echo $row["Descricao_Sindrome"] ?>

' ,

 <?php echo $row["QtdPacientes"] ?>

 <?php       
                            }
                         ?>

]
}],
//
drilldown: {
series: []
}
//
};

// Column chart
options.chart.renderTo = 'container';
options.chart.type = 'column';
var chart1 = new Highcharts.Chart(options);

chartfunc = function()
{
var column = document.getElementById('radio1');
var bar = document.getElementById('radio2');
var pie = document.getElementById('radio3');
var line = document.getElementById('radio4');

if(column.checked)
{
options.chart.renderTo = 'container';
options.chart.type = 'column';
var chart1 = new Highcharts.Chart(options);
}
else if(pie.checked)
{
options.chart.renderTo = 'container';
options.chart.type = 'pie';
var chart1 = new Highcharts.Chart(options);
}
else
{
options.chart.renderTo = 'container';
options.chart.type = 'line';
var chart1 = new Highcharts.Chart(options);
}
}

$('#change_chart_title').click(function(){
options.title.text = $('#chart_title').val();
var chart1 = new Highcharts.Chart(options);
});
});

</script>

</head>
</table>
</html>

 <?php        
   } // Fecha Function
 } // Fecha class
?>

Curso Dominando o Adianti Framework

Comentários (1)