Welcome Guest, Not a member yet? Register   Sign In
Highcharts, JSON and CodeIgniter
#1

(This post was last modified: 01-27-2016, 07:36 AM by morocho1979.)

I'm trying to get the Bue Flame software tutorial on Codeigniter and Highcharts to work (here is the tutorial http://blueflame-software.com/blog/using-highcharts-with-codeigniter/).y use my own MVC but doing with the same data and code thx for the help 
My view 

PHP Code:
 <div class="row">
 
       <div class="box-header with-border" >
 
         <div class="col-xs-4" >
 
             <class="btn btn-primary view-pdf" href="http://192.168.168.188/crm_dev/index.php/reporte"><span class=" fa fa-file-pdf-o"></span Reporte de Clientes</a>
 
             </div>
 
                 <div class="col-xs-4"  >
 
                     <class="btn btn-primary view-pdf" href="http://192.168.168.188/crm_dev/index.php/reporte2"><span class=" fa fa-file-pdf-o"></span>Reporte de Contactos</a>
 
                   </div>
 
                   <div class="col-xs-4"  >
 
           <class="btn btn-primary view-pdf" href="http://192.168.168.188/crm_dev/index.php/reporte4"><span class=" fa fa-file-pdf-o"></span Reporte de Gestiones</a>

 
                 </div>

 
                 </div>
 
       </div>
<
div class="row">
 
 <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>


 
     </div>
 
 </div>

 
 <script src="https://code.highcharts.com/highcharts.js"></script>
<
script src="https://code.highcharts.com/modules/exporting.js"></script>



<
script>
(function(
a){a.createModal=function(b){defaults={title:"",message:"Your Message Goes Here!",closeButton:true,scrollable:false};var b=a.extend({},defaults,b);var c=(b.scrollable===true)?'style="max-height: 420px;overflow-y: auto;"':"";html='<div class="modal fade" id="myModal">';html+='<div class="modal-dialog">';html+='<div class="modal-content">';html+='<div class="modal-header">';html+='<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>';if(b.title.length>0){html+='<h4 class="modal-title">'+b.title+"</h4>"}html+="</div>";html+='<div class="modal-body" '+c+">";html+=b.message;html+="</div>";html+='<div class="modal-footer">';if(b.closeButton===true){html+='<button type="button" class="btn btn-primary" data-dismiss="modal">Cerrar</button>'}html+="</div>";html+="</div>";html+="</div>";html+="</div>";a("body").prepend(html);a("#myModal").modal().on("hidden.bs.modal",function(){a(this).remove()})}})(jQuery);
$(function(){
 
   $('.view-pdf').on('click',function(){
 
       var pdf_link = $(this).attr('href');
 
       //var iframe = '<div class="iframe-container"><iframe src="'+pdf_link+'"></iframe></div>'
 
       //var iframe = '<object data="'+pdf_link+'" type="application/pdf"><embed src="'+pdf_link+'" type="application/pdf" /></object>'
 
       var iframe '<object type="application/pdf" data="'+pdf_link+'" width="100%" height="400">No Support</object>'
 
       $.createModal({
 
           title:'REPORTE',
 
           messageiframe,
 
           closeButton:true,
 
           scrollable:false
        
});
 
       return false;
 
   });
})
////////Graficas ////////////////////

$(document).ready(function() {
 
 var options = {
 
         chart: {
 
             renderTo'container',
 
             type'bar',
 
             marginRight130,
 
             marginBottom25
          
},
 
         title: {
 
             text'Project Requests',
 
             x: -20 //center
 
         },
 
         subtitle: {
 
             text'',
 
             x: -20
          
},
 
         xAxis: {
 
             categories: []
 
         },
 
         yAxis: {
 
             title: {
 
                 text'Requests'
 
             },
 
             plotLines: [{
 
                 value0,
 
                 width1,
 
                 color'#808080'
 
             }]
 
         },
 
         tooltip: {
 
             formatter: function() {
 
                     return '<b>'this.series.name +'</b><br/>'+
 
                     this.+': 'this.y;
 
             }
 
         },
 
         legend: {
 
             layout'vertical',
 
             align'right',
 
             verticalAlign'top',
 
             x: -10,
 
             y100,
 
             borderWidth0
          
},

 
         series: []
 
     }

 
     $.getJSON("<?php echo site_url('index.php/reportes');?>", function(json) {
 
   options.xAxis.categories json[0]['data'];
 
       options.series[0] = json[1];
 
       options.series[1] = json[2];
 
       options.series[2] = json[3];
 
       chart = new Highcharts.Chart(options);
 
     });
 
 });


</
script

Controller 


PHP Code:
 <?php
defined
("BASEPATH") OR exit("El acceso directo al script no está permitido!!!");

    
/**
    *
    */
    
class Reportes extends CI_COntroller
    
{


        function 
__construct()
        {
            
parent::__construct();
            
$this->load->model('cliente');
            
$this->load->model('reporte_gestion');
        }
        function 
index()
        {
    
       if(    $this->session->userdata('logged_in') ){
    
           $session $this->session->userdata('logged_in');
    
     $content     = array(     'clientes'    => $this->cliente->mis_clientes() );
                
$body_view     $this->load->view('crm/reportes/home'$contentTRUE);
                
$modal         $this->load->view('template/modal''' TRUE);

                
$data = array(    'title'             => 'Reportes',
                                
'content_header'     => array('Reportes','Home'),
                                
'breadcrumb_inicio'    => 'Reportes',
                                
'breadcrumbs'         => NULL,
                                
'content_body'         => $body_view,
                                
'modal'                => $modal,
                                
'active'             => 'reportes'
                            
);

                
$this->load->view('template/template',$data);
    
       }
    
       else
             redirect
('index.php/main','refresh');

        }

        public function 
data()
        {

            
$data $this->Reporte_gestion->get_data();

            
$category = array();
            
$category['name'] = 'Category';

            
$series1 = array();
            
$series1['name'] = 'WordPress';

            
$series2 = array();
            
$series2['name'] = 'Code Igniter';

            
$series3 = array();
            
$series3['name'] = 'Highcharts';

            foreach (
$data as $row)
            {
            
 $category['data'][] = $row->month;
                
$series1['data'][] = $row->wordpress;
                
$series2['data'][] = $row->codeigniter;
                
$series3['data'][] = $row->highcharts;
            }

            
$result = array();
            
array_push($result,$category);
            
array_push($result,$series1);
            
array_push($result,$series2);
            
array_push($result,$series3);

            print 
json_encode($resultJSON_NUMERIC_CHECK);
        }
    }
?>
Model


PHP Code:
function __construct()
 
   {
 
       parent::__construct();
 
   }

 
   function obtenerGestion()
 
   {
 
     $this->db->select('CONCAT(nombre,apellido)as vendedor,
                        DATE_FORMAT(gestiones.fecha, "%d/%l/%Y") AS fecha1,
                        clientes.nombre_fantasia,
                        tipo_gestion.tipo_gestion,
                        gestiones.detalle as observaciones'
);
 
     $this->db->from('gestiones');
 
     $this->db->join('tipo_gestion','gestiones.tipo_gestion_id = tipo_gestion.id');
 
     $this->db->join('users''gestiones.usuario_id = users.id');
 
     $this->db->join('clientes''clientes.id_usuario = users.id and gestiones.cliente_rut = clientes.rut');
 
     $this->db->order_by("fecha1""desc");
 
     $this->db->limit(5);
 
     $gestiones $this->db->get();

 
       return $gestiones->result();
 
   }

 
   function get_data()
 
   {
 
       $this->db->select('month, wordpress, codeigniter, highcharts');
         
   $this->db->from('project_requests');
         
   $query $this->db->get();
 
          return $query->result();
 
   }
}
?>
Thx for the help 
Reply
#2

So, what's your question exactly?
Best regards,
José Postiga
Senior Backend Developer
Reply
#3

(01-26-2016, 10:46 PM)josepostiga Wrote: So, what's your question exactly?

i cant see the chart , maybe i have problem with json
Reply
#4

I do not see you loading jQuery for it.
What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )
Reply
#5

(01-27-2016, 05:07 AM)InsiteFX Wrote: I do not see you loading jQuery for it.

If i use , the example of the page work perfect my trouble i guess is in the controller , that dont pass the data to the view
Reply
#6

(This post was last modified: 01-27-2016, 06:48 AM by josepostiga.)

(01-27-2016, 05:56 AM)morocho1979 Wrote:
(01-27-2016, 05:07 AM)InsiteFX Wrote: I do not see you loading jQuery for it.

If i use , the example of the page work perfect my trouble i guess is in the controller , that dont pass the data to the view

Care to share your controller's code? The one you putted on your initial post has the same content as your view... I hope that's a copy-past error and not what you actually have on your app.
Best regards,
José Postiga
Senior Backend Developer
Reply
#7

(01-27-2016, 06:47 AM)josepostiga Wrote:
(01-27-2016, 05:56 AM)morocho1979 Wrote:
(01-27-2016, 05:07 AM)InsiteFX Wrote: I do not see you loading jQuery for it.

If i use , the example of the page work perfect my trouble i guess is in the controller , that dont pass the data to the view

Care to share your controller's code? The one you putted on your initial post has the same content as your view... I hope that's a copy-past error and not what you actually have on your app.

Sorry i update now you can see the controller , was C&P error .
Reply
#8

i guess my big problem is here

$.getJSON("Reportes/data", function(json) {
options.xAxis.categories = json[0]['data'];
options.series.push(json[1]);
options.series.push(json[2]);
options.series.push(json[3]);
var chart = new Highcharts.Chart(options);
});
Reply
#9

Try this:

$.getJSON(<?Php echo site_url("Reportes/data");?>, function(json) {
What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )
Reply
#10

(01-27-2016, 04:21 PM)InsiteFX Wrote: Try this:

$.getJSON(<?Php echo site_url("Reportes/data");?>, function(json) {

Perfect thax for the big help now i can see the chart
Reply




Theme © iAndrew 2016 - Forum software by © MyBB