Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

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