Monday, February 20, 2017

Highcharts Get Data From URL With Codeigniter

It's tutorial access data json from URL with Codeigniter .

  1. Your have data from your tables/database
  2. Create Models, sample i try highchart to My Dashboard.
  3. defined('BASEPATH') OR exit('No direct script access allowed');
    
    class DashboardModel extends CI_Model {
    
     public function dataAccount()
     {
      $sql = "
       SELECT
       *
       FROM
       (SELECT COUNT(ACCOUNT_USERNAME) AS HRMANAGER FROM MST_ACCOUNT WHERE ACCOUNT_LEVEL = '1'),
       (SELECT COUNT(ACCOUNT_USERNAME) AS HRADMIN FROM MST_ACCOUNT WHERE ACCOUNT_LEVEL = '2'),
       (SELECT COUNT(ACCOUNT_USERNAME) AS TRAINING FROM MST_ACCOUNT WHERE ACCOUNT_LEVEL = '3'),
       (SELECT COUNT(ACCOUNT_USERNAME) AS SUPERVAISOR FROM MST_ACCOUNT WHERE ACCOUNT_LEVEL = '4')
      ";
    
      $result = $this->db->query($sql)->result();
    
      return $result;
     }
    
    }
    
    /* End of file DashboardModel.php */
    /* Location: ./application/models/DashboardModel.php */
    
  4. In the controller
  5. defined('BASEPATH') or exit('No direct script access allowed');
    
    class Dashboard extends CI_Controller
    {
    
        public $page = 'Dashboard';
    
        public function __construct()
        {
            parent::__construct();
            //Load Dependencies
    
            $this->load->model('DashboardModel');
        }
    
        public function index()
        {
            $this->content = 'dashboard/HrManagerIndexView';
    
            $this->layout(
                (!empty($data)) ? $data : null,
                $addCss = array(
                    'assets/css/ace.min.css',
                    'assets/css/ace-rtl.min.css',
                ),
                $addJs = array(
                    'assets/js/callJsMobile.js',
                    'assets/js/bootstrap.min.js',
                    'assets/plugin/highcharts/highcharts.js',
                    'assets/plugin/highcharts/modules/exporting.js',
                    'assets/plugin/highcharts/modules/data.js',
                    'assets/plugin/highcharts/modules/drilldown.js',
                    'assets/js/ace-elements.min.js',
                    'assets/js/ace.min.js',
                    'assets/js/custome/DashboardManager.js',
                )
            );
        }
    
        /*    Dashboard Data Report    */
        public function getDataAccount()
        {
            $list = $this->DashboardModel->dataAccount();
    
            $total       = array($list[0]->HRMANAGER, $list[0]->HRADMIN, $list[0]->TRAINING, $list[0]->SUPERVAISOR);
            $resultTotal = array_sum($total);
    
            foreach ($list as $value) {
                $data = array(
                    'name'         => 'Total Data',
                    'colorByPoint' => true,
                    'data'         => array(
                        array('name' => 'HRMANAGER', 'y' => $this->nameformat->chartCeil($value->HRMANAGER, $resultTotal)),
                        array('name' => 'HRADMIN', 'y' => $this->nameformat->chartCeil($value->HRADMIN, $resultTotal)),
                        array('name' => 'TRAINING', 'y' => $this->nameformat->chartCeil($value->TRAINING, $resultTotal)),
                        array('name' => 'SUPERVAISOR', 'y' => $this->nameformat->chartCeil($value->SUPERVAISOR, $resultTotal)),
                    ),
                );
            }
    
            echo json_encode($data, JSON_PRETTY_PRINT);
        }
    
    }
    
    /* End of file Dashboard.php */
    /* Location: ./application/controllers/Dashboard.php */
    
  6. In View

  7. In Javascript
  8. $(document).ready(function() {
        var chartAccount = {
            chart: {
                renderTo: 'chartAccount',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
            title: {
                text: 'Summary Data Account Academy'
            },
            tooltip: {
                pointFormat: '{series.name}: {point.percentage:.1f}%'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{}]
        };
    
        var urlChartAccount = base_dash + 'getDataAccount';
        $.getJSON(urlChartAccount, function(data) {
            chartAccount.series[0] = data;
            var chart = new Highcharts.Chart(chartAccount);
        });
    });
    

Refrensi: http://www.highcharts.com/docs/working-with-data/getting-data-across-domains-jsonp

No comments:

Post a Comment