Highcharts, Mysql, and Codeigniter

Question

i want to make highcharts that get data from mysql and using codeigniter. Here is my table :

CREATE TABLE tbl_chart (
PID varchar (10), P_ProjectPreparation int, P_ConceptualDesign int, P_Realization int, P_FinalPreparation int, P_GoLive );

The column PID is gonna be the xAxis and the other column gonna be the series. Here is my controller :

<?php defined('BASEPATH') OR exit('No direct script access allowed'); 
class admin_c extends CI_Controller {
 public function __construct()
    {
        parent::__construct();

        $this->load->database();
        $this->load->helper('url');
        $this->load->model('chartmanage_m');
    }

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

public function data()
{

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

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

$series1 = array();
$series1['name'] = 'Project Preparation';

$series2 = array();
$series2['name'] = 'Conceptual Design';

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

$series4 = array();
$series4['name'] = 'Final Preparation';

$series5 = array();
$series5['name'] = 'Go Live';

foreach ($data as $row)
{
$category['data'][] = $row->PID;
$series1['data'][] = $row->P_ProjectPreparation;
$series2['data'][] = $row->P_ConceptualDesign;
$series3['data'][] = $row->P_Realization;
$series4['data'][] = $row->P_FinalPreparation;
$series5['data'][] = $row->P_GoLive;
}

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

print json_encode($result, JSON_NUMERIC_CHECK);
}}

Here is my model :

<?php defined('BASEPATH') OR exit('No direct script access allowed');
class chartmanage_m extends CI_Model { function __construct() { 

parent::__construct(); }
function get_data()
{
$this->db->select('*');
$this->db->from('tbl_chart'

);
$query = $this->db->get();
return $query->result();
}

Here is my view :

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
 <script type="text/javascript">
  $(document).ready(function() {
        var options = {
            chart: {
                renderTo: 'container',
                type: 'line',
                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>'+
                        this.x +': '+ this.y;
                }
            },


            series: []
        }

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

And i get blank screen.

Answer 1

You should be passing your json_encoded array to the view as an array to display in view from your controller function....

so you define the view to display from your controller function along with the view...

$this->render('Index',array('json_array_var_in_view' => $my_json_array));

well that's how we do it in yii...surely something along similar lines in CI...

the above line indicates that the view of the controller is index.php file and it should hold the variable $json_array_var_in_view ...

so what i am stressing is your data function should call the view with the array passed to it...

Answer 2

I create new project with your code, i found problem:

you should be change "data" to "json", that result variable! $.getJSON("", function(data) { ...} to $.getJSON("", function(json) { ..}

<script type="text/javascript">
  $(document).ready(function() {

        var options = {
            chart: {
                renderTo: 'container',
                type: 'line',
                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>'+
                        this.x +': '+ this.y;
                }
            },


            series: []
        }


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

and, with testing data:

INSERT INTO `tbl_chart` (`PID`, `P_ProjectPreparation`, `P_ConceptualDesign`, `P_Realization`, `P_FinalPreparation`, `P_GoLive`) VALUES ('12', '11', '22', '33', '44', '55'), ('13', '111', '222', '333', '444', '555'), ('14', '1111', '2222', '3333', '4444', '5555'), ('15', '11111', '22222', '33333', '44444', '55555');

and, image :