Google chart is not working on server side

StackOverflow https://stackoverflow.com/questions/21715455

Question

I have a view that shows a chart depending on a date time range and one value from select list, it is currently working perfect in my local, but in my server it just dont chart anything, can anyone help me pls.

Here is the view code:

 <html>
  <head>
    <title>Gráfico</title>
    <link href="<?php echo base_url(); ?>css/bootstrap-combined.min.css" rel="stylesheet">
    <link href="<?php echo base_url(); ?>css/bootstrap-glyphicons.css" rel="stylesheet">
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
    <link href="<?php echo base_url(); ?>estilos.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" media="screen"
     href="<?php echo base_url(); ?>css/bootstrap-datetimepicker.min.css">    <meta charset="utf-8" />
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">        
      google.load("visualization", "1", {packages:["corechart"]});
      //Funcion para generar un gráfico en Lineas
      function LineChart() {
        var data = google.visualization.arrayToDataTable(<?= $grafico2;?>);
        var options = {
          title: '<?php echo "Paquetes recibidos por la IP: ".$ip." en las fechas: ".$fechainicio." - ".$fechafin; ?>',
          'width':900,
          'height':400,
          hAxis: {title: 'Fechas',  titleTextStyle: {color: 'black'},},
          vAxis: {title: 'Paquetes',  titleTextStyle: {color: 'black'},}
        };
        var chart = new google.visualization.LineChart(document.getElementById('linechart_div'));
        chart.draw(data, options);
      }
        google.setOnLoadCallback(LineChart); 
    </script>
  </head>

  <body>
     <div id="contenido">
    <div class="container">     
    <?php include_once "header.php"; ?>
     <?php echo form_open('home/graph'); ?>
    <font color="#27A7D6">Seleccione fecha inicial:<br></font>
    <div id="datetimepicker" class="input-append date">
      <input type="text" name="fechainicio"></input>
      <span class="add-on">
        <i data-time-icon="glyphicon glyphicon-time" data-date-icon="glyphicon glyphicon-minus"></i>
      </span>
    </div>
    <script type="text/javascript"
     src="<?php echo base_url(); ?>js/jquery-1.11.0.js">
    </script> 
    <script type="text/javascript"
     src="<?php echo base_url(); ?>js/bootstrap.min.js">
    </script>
    <script type="text/javascript"
     src="<?php echo base_url(); ?>js/bootstrap-datetimepicker.min.js">
    </script>
    <script type="text/javascript"
     src="<?php echo base_url(); ?>js/bootstrap-datetimepicker.es.js">
    </script>
    <script type="text/javascript">
      $('#datetimepicker').datetimepicker({
        format: 'yyyy/MM/dd hh:mm:ss',
        language: 'es'
      });
    </script>

<font color="#27A7D6">Seleccione fecha final:<br></font>

 <div id="datetimepicker2" class="input-append date">
      <input type="text" name="fechafin"></input>
      <span class="add-on">
        <i data-time-icon="glyphicon glyphicon-time" data-date-icon="glyphicon glyphicon-minus"></i>
      </span>
    </div>
    <script type="text/javascript"
     src="<?php echo base_url(); ?>js/jquery-1.11.0.js">
    </script> 
    <script type="text/javascript"
     src="<?php echo base_url(); ?>js/bootstrap.min.js">
    </script>
    <script type="text/javascript"
     src="<?php echo base_url(); ?>js/bootstrap-datetimepicker.min.js">
    </script>
    <script type="text/javascript"
     src="<?php echo base_url(); ?>js/bootstrap-datetimepicker.es.js">
    </script>
    <script type="text/javascript">
      $('#datetimepicker2').datetimepicker({
        format: 'yyyy/MM/dd hh:mm:ss',
        language: 'es'
      });
    </script>
    <!-- INICIO DEL SELECT IP-->
    <?php
require_once ('funciones.php');
$con=fullconectar();
$res=mysql_query("select * from alarmas",$con);
?>
<font color="#27A7D6">Seleccione su IP:<br></font>
<select id="ip" name ="ip" style="width:235px">
<?php while($fila=mysql_fetch_array($res)){ ?>
<option><?php echo $fila['ip']; ?></option>
<?php } ?>
</select>
<div><input type="submit" value="Enviar" /></div>
<?php echo form_close(); ?>
<?php echo "Total de tiempo offline para la IP: ".$ip." entre las fechas: ".$fechainicio." - ".$fechafin.": ".$tiempooff." minutos."; ?>
    <div id="linechart_div"></div>
</div></div>
  </body>
</html>
Was it helpful?

Solution

Looking at the actual output, the problematic line is here:

var data = google.visualization.arrayToDataTable(<?= $grafico2;?>);

You'll notice that the <?= $grafico2;?> didn't get parsed by your PHP engine. This indicates that you don't have short-tags enabled on your server. For the moment, just swich that line to:

var data = google.visualization.arrayToDataTable(<?php echo $grafico2;?>);

But you'll probably want to enable short-tags for the future.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top