Welcome Guest, Not a member yet? Register   Sign In
Displaying chart
#1

Not able to display the chart in view. Below is model view controller. thanks in advance for any help.

Controller:


<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class showchart extends CI_Controller {


    public function __construct()
    {
        parent::__construct();
        $this->load->model('data');
          
        $this->load->helper('url_helper');
    }


    public function index()
{
 
$this->load->view('chart');
 
}

    public function data()
{


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

 
$category = array();
$category['name'] = 'Ext';
 
$series1 = array();
$series1['name'] = 'Incoming';
 
$series2 = array();
$series2['name'] = 'Outgoing';
 



foreach ($data as $row)
{
$category['data'][] = $row->ext;
$series1['data'][] = $row->incoming;
$series2['data'][] = $row->outgoing;

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

 $ctg=$category['data'];

    $this->get_data['call_data'] = json_encode($ctg, JSON_NUMERIC_CHECK);
            print json_encode($result, JSON_NUMERIC_CHECK);
           
}
$this->load->view('chart');
 

}

}

?>


Model:

<!--?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');</p-->
 <?php
class Data extends CI_Model {
 
function __construct()
{
// Call the Model constructor
parent::__construct();
}
 
function get_data()
{
$this->db->select('ext,incoming,outgoing');
$this->db->from('call_data');
$query = $this->db->get();
return $query->result();
}
 
}

?>

View:


<!DOCTYPE html>
<html>
<head>
    <title>Highchart</title>


      </div>
  <script src="http://localhost/dashboard/assets/js/jquery-3.1.1.min"></script>
 <script src="http://localhost/dashboard/assets/js/highcharts.js"></script>
<script src="http://localhost/dashboard/assets/js/exporting.js"></script>



<script type="text/javascript">
$(document).ready(function() {
  var options = {
          chart: {
              renderTo: 'container',
              type: 'bar',
              marginRight: 130,
              marginBottom: 25
          },
          title: {
              text: 'Project Requests',
              x: -20 //center
          },
          subtitle: {
              text: '',
              x: -20
          },
          xAxis: {
              categories: []
          },
          yAxis: {
              title: {
                  text: 'Requests'
              },
              plotLines: [{
                  value: 0,
                  width: 1,
                  color: '#808080'
              }]
          },
          tooltip: {
              formatter: function() {
                      return '<b>'+ this.series.name +'</b><br/>'+
                      this.x +': '+ this.y;
              }
          },
          legend: {
              layout: 'vertical',
              align: 'right',
              verticalAlign: 'top',
              x: -10,
              y: 100,
              borderWidth: 0
          },

          series: []
      }
var jqxhr = $.getJSON('http://localhost/dashboard/index.php/showchart/data',function(csv) {
  console.log( "success" );
    options.xAxis.categories = json[0]['data'];
        options.series[0] = json[1]['result']
        options.series[1] = json[2]['result'];
        
       
     
      });
      
        var chart = new Highcharts.Chart(options);

  });




</script>


</head>

<body>

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

</body>
</html>
Reply
#2

Hi
I assumed that your data model returns correct json then the way I look at this portion
Code:
var jqxhr = $.getJSON('http://localhost/dashboard/index.php/showchart/data',function(csv) {
 console.log( "success" );
   options.xAxis.categories = json[0]['data'];
       options.series[0] = json[1]['result']
       options.series[1] = json[2]['result'];
       
     
   
     });
     

Try to add this line below console.log('success'), i.e
console.log(JSON.stringify(csv));
then this shows what return back as csv.  This should help you to further check data and correctly serialize them out.

Also it seems like you just equate your option to 'json' out of nowhere, i.e 
Code:
...
options.xAxis.categories = json[0]['data']; //where do you get this json from? it should be what comes with 'csv'
       options.series[0] = json[1]['result']
       options.series[1] = json[2]['result'];
...



Regards
Reply




Theme © iAndrew 2016 - Forum software by © MyBB