0

I have fulltime and parttime employee's data. And I get the the total numbers of both parties using select_sum. The problem is how can I display their data using highchart the total numbers of fulltime and total numbers of parttime distributed by department.

Im a newbhie and dont know how to make it dynamic. Thats why I'll try use it in static data. Thanks in advance.

DB :

_____________________________________________________________
| id | account_id  |   fulltime   |  partime  |  department  |
|____|_____________|______________|___________|______________|
| 1  |      3      |      1       |   null    |      3       |
|____|_____________|______________|___________|______________|
| 2  |      5      |     null     |     1     |      1       |
|____|_____________|______________|___________|______________|
| 3  |      6      |       1      |    null   |      2       |
|____|_____________|______________|___________|______________|

LEGEND :

department : 1 = 'COF'
           : 2 = 'CAS'
           : 3 = 'CCS'

I use the following :

JS :

$(function(){

    var full= $.getJSON('<?php echo base_url('public/employee/fulltime');?>', 
        function (data1){
            console.log(data1);
    });

    var data = [
     { y: 'COF', z0: 'Part Time' , a0: 275, z1: 'Full Time' , a1: full},
     { y: 'CAS', z0: 'Part Time' , a0: 440, z1: 'Full Time' , a1: 332},
     { y: 'CCS', z0: 'Part Time' , a0: 450, z1: 'Full Time' , a1: 425},
     { y: 'CFND', z0: 'Part Time' , a0: 462, z1: 'Full Time' , a1: 435},
     { y: 'CHMT', z0: 'Part Time' , a0: 504, z1: 'Full Time' , a1: 162},
     { y: 'CTE', z0: 'Part Time' , a0: 400, z1: 'Full Time' , a1: 162},
     { y: 'CBMA', z0: 'Part Time' , a0: 260, z1: 'Full Time' , a1: 79},
     { y: 'CCJE', z0: 'Part Time' , a0: 129, z1: 'Full Time' , a1: 42},
     { y: 'ADMIN', z0: 'Part Time' , a0: 129, z1: 'Full Time' , a1: 42}

    ]

    Morris.Bar({
      element: 'chart',
      data: data,
        xkey: 'y',
        ykeys: ['a0', 'a1'],
        labels: ['Label1', 'Label2'],
        fillOpacity: 0.6,
        hideHover: 'auto',
        behaveLikeLine: true,
        resize: true,
        stacked: true,
        pointFillColors:['#ffffff'],
        pointStrokeColors: ['black'],
        lineColors:['lime', 'blue', 'red', 'cyan', '#909090'],
        xLabelAngle: 60,
        hoverCallback: function (index, options, content, row) {
        var currentDiv = "";
        var finalContent = $("<div/>");

        $(content).each(function () {
            currentDiv = $(this);
            currentDiv.html(currentDiv.html().replace("Label1", data[index].z0).replace("Label2", data[index].z1))
            $(finalContent).append(currentDiv);
        });
        
        $(finalContent)
        return finalContent;    
      }
    });

});

CONTROLLER :

public function fulltime()
{

    $fulltime = $this->account_model->get_fulltime();
        echo json_encode($fulltime);
}

MODEL :

public function get_fulltime()
{
    $this->db->select_sum('fulltime');
    $this->db->from('list_of_employee');

    return $this->db->get()->result();
}

screenshot

Community
  • 1
  • 1
jicoy
  • 17
  • 1
  • 7

1 Answers1

0

Put the data that you get from the Ajax response as an input data to your Highcharts script
1- Make your query of data as the structure of Highcharts.
2- Make a PHP Action in your Controller to call the previous query.
3- Consume the PHP Action in Ajax Call and let the response data by the input of your Highchats.

Qusai Azzam
  • 465
  • 4
  • 19
  • @Azzam can you give me a pattern for highcharts script. dont know how it works. – jicoy Apr 30 '19 at 01:18
  • Yeah Sure , plz watch this video and you will get what you seek https://www.youtube.com/watch?v=e7zrTWrEcX4 – Qusai Azzam Apr 30 '19 at 05:40
  • also, you can have more details here [Highcharts with PHP and Mysql](https://stackoverflow.com/questions/20793920/php-and-mysql-with-highchart) – Qusai Azzam Apr 30 '19 at 05:43