Using Highcharts with CodeIgniter

Step 1 – Pre-requisites
Download the CodeIgniter from http://ellislab.com/codeigniter and install on the app server.
Then you can download the source code and apply it on top of the installation. I did not include any CodeIgniter framework files.


Step 2 – CodeIgniter Configuration
Make a few configurations shown below and test and make sure you are getting CodeIgniter welcome screen.
1) Routing
/.htaccess

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]

2) Database Library
/application/config/autoload.php
‘database’ needs to be added to the libraries array

$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'myuser';
$db['default']['password'] = '';
$db['default']['database'] = 'demo';

Step 3 – MySQL Table
We’ll use project_requests MySQL table. The script is included in the download file.

Step 4 – Model
We want our model to return all the rows from project_requests table.
You can use straight SQL but CodeIgniter’s Active Record functions are useful.
/application/model/data.php

<!--?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');</p-->

class Data extends CI_Model {

function __construct()
{
// Call the Model constructor
parent::__construct();
}

function get_data()
{
$this-&gt;db-&gt;select('month, wordpress, codeigniter, highcharts');
$this-&gt;db-&gt;from('project_requests');
$query = $this-&gt;db-&gt;get();
return $query-&gt;result();
}

}

Step 5 – Controller
This controller will support 2 URL’s here. Two URL’s will be represented by 2 controller methods

1) Method to show main HTML

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

2) Method to return JSON chart data

public function data()
{
$data = $this-&gt;data-&gt;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-&gt;month;
$series1['data'][] = $row-&gt;wordpress;
$series2['data'][] = $row-&gt;codeigniter;
$series3['data'][] = $row-&gt;highcharts;
}

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

print json_encode($result, JSON_NUMERIC_CHECK);
}

Full Controller Code:
/application/controller/chart.php

<!--?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');</p-->

class Chart extends CI_Controller {

public function __construct()
{
parent::__construct();
$this-&gt;load-&gt;model('data');
}

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

public function data()
{

$data = $this-&gt;data-&gt;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-&gt;month;
$series1['data'][] = $row-&gt;wordpress;
$series2['data'][] = $row-&gt;codeigniter;
$series3['data'][] = $row-&gt;highcharts;
}

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

print json_encode($result, JSON_NUMERIC_CHECK);
}

}

/* End of file chart.php */
/* Location: ./application/controllers/chart.php */

Notice that we need to load the model in the constructor

$this-&gt;load-&gt;model('data');

Step 6 – View
Finally, we need the JS code and HTML to display the chart.
Also, we need to call data method URL to load JSON to our chart.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
        $(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;
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },

                series: []
            }

            $.getJSON("data", 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>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto;"></div>

The way we call this is http://server-root/codeigniter-folder/chart/index.


oleh  : Mohd Khairol
Sumber Rujukan : http://blueflame-software.com/using-highcharts-with-codeigniter/