Displaying chart - Printable Version

Displaying chart - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Using CodeIgniter (https://forum.codeigniter.com/forumdisplay.php?fid=5)
+--- Forum: General Help (https://forum.codeigniter.com/forumdisplay.php?fid=24)
+--- Thread: Displaying chart (/showthread.php?tid=68854)

Displaying chart - nupura.pantina - 09-04-2017

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>

RE: Displaying chart - ciadvantage - 09-08-2017

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