- Your have data from your tables/database
- Create Models, sample i try highchart to My Dashboard.
- In the controller
- In View
- In Javascript
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 */
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 */
$(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