Tutorial: Using HighChart on CodeIgniter project without ajax

If we would like print some report on CodeIgniter, we can use view like tabels, and then print or export the report using pdf, word, or excel document. Looking for table in the report page is fine, but if you use chart to present your data, it’s look better and come alive.

Many charts plugin are available to download. Highcharts, is one of the famous chart thats use by programmers .

A little thing about highcharts, Highcharts is pure javascripts source code that will make your data come alive with charts. Charts are available is Bar Charts, Line Charts, and Pie Charts. Highchart was released in 2009, its charting library written in pure JavaScript. In modern browsers, graph are rendered in SVG with VML support for legacy browser. You can find more at highcharts.com

Back to the case, now I will show you how to make it work on CodeIgniter without using ajax. I’ll not telling about CodeIgniter instalation and how to setting up the framework. You came here, I think you are not newbies.

Database

Prepare your database, in this case I make dummy database called chart and for atribut and field you can follow my SQL query:

CREATE DATABASE /*!32312 IF NOT EXISTS*/`chart` /*!40100 DEFAULT CHARACTER SET latin1 */;

USE `chart`;

/*Table structure for table `report` */

DROP TABLE IF EXISTS `report`;

CREATE TABLE `report` (
  `idreport` int(11) NOT NULL AUTO_INCREMENT,
  `bulan` varchar(50) DEFAULT NULL,
  `nilai` int(2) DEFAULT NULL,
  PRIMARY KEY (`idreport`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=latin1;

/*Data for the table `report` */

insert  into `report`(`idreport`,`bulan`,`nilai`) values (1,'Januari',4),(2,'Februari',9),(3,'Maret',9);

 

Something importan, you need to download jquery.js and highcharts.js before you run to next step. And after that, places the file to your directory. You can use /assets/js/[there]At the view file, you’ll load the library like this:

<script src="<?php echo base_url();?>assets/js/jquery.min.js"></script>
<script src="<?php echo base_url();?>assets/js/highcharts.js"></script>

The Controller: Chart.php

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
 
class Chart extends CI_Controller {
    function __construct(){
        parent::__construct();
        $this->load->model('mread');
    }
    public function index()
    {
        $data['report'] = $this->mread->report();
        $this->load->view('report', $data);
    }
}

The Model: Mread.php

<?php    
class Mread extends CI_Model{
    function report(){
        $query = $this->db->query("SELECT * from report");
         
        if($query->num_rows() > 0){
            foreach($query->result() as $data){
                $hasil[] = $data;
            }
            return $hasil;
        }
    }
}

The view: report.php

<!-- load library jquery dan highcharts -->
<script src="<?php echo base_url();?>assets/js/jquery.min.js"></script>
<script src="<?php echo base_url();?>assets/js/highcharts.js"></script>
<!-- end load library -->
 
<?php
    /* Mengambil query report*/
    foreach($Report as $result){
        // for ($i=0; $i < count($report); $i++) { 
            # code...
        $bulan[] =  $result->bulan; //ambil bulan
        $value[] = (float)  $result->nilai; //ambil nilai
        }
    // }
    /* end mengambil query*/
     
?>
 
<!-- Load chart dengan menggunakan ID -->
<div id="report"></div>
<!-- END load chart -->
 
<!-- Script untuk memanggil library Highcharts -->
<script type="text/javascript">
$(function () {
    $('#report').highcharts({
        chart: {
            type: 'column',
            margin: 75,
            options3d: {
                enabled: false,
                alpha: 10,
                beta: 25,
                depth: 70
            }
        },
        title: {
            text: 'Report Jan - Agustus',
            style: {
                    fontSize: '18px',
                    fontFamily: 'Verdana, sans-serif'
            }
        },
        subtitle: {
           text: 'Penjualan',
           style: {
                    fontSize: '15px',
                    fontFamily: 'Verdana, sans-serif'
            }
        },
        plotOptions: {
            column: {
                depth: 25
            }
        },
        credits: {
            enabled: false
        },
        xAxis: {
            categories:  <?php echo json_encode($bulan);?>
        },
        exporting: { 
            enabled: false 
        },
        yAxis: {
            title: {
                text: 'Jumlah'
            },
        },
        tooltip: {
             formatter: function() {
                 return 'The value for <b>' + this.x + '</b> is <b>' + Highcharts.numberFormat(this.y,0) + '</b>, in '+ this.series.name;
             }
          },
        series: [{
            name: 'Report Data',
            data: <?php echo json_encode($value);?>,
            shadow : true,
            dataLabels: {
                enabled: true,
                color: '#045396',
                align: 'center',
                formatter: function() {
                     return Highcharts.numberFormat(this.y, 0);
                }, // one decimal
                y: 0, // 10 pixels down from the top
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        }]
    });
});
        </script>

I think enough, happy learning.

Note: Its just notes, some code I have from another resource on internet.