Login

nupura.pantina · 09-04-2017, 10:35 PM

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
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>