<!DOCTYPE html>
<html lang="en">


<!-- Mirrored from edumin.dexignlab.com/xhtml/index-2.html by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 19 Nov 2020 03:05:22 GMT -->
<head>
    
    <style>
      .highcharts-figure, .highcharts-data-table table {
    min-width: 310px; 
    max-width: 800px;
    margin: 1em auto;
}

#container {
    height: 400px;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #EBEBEB;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}



.highcharts-figure, .highcharts-data-table table {
    min-width: 320px; 
    max-width: 660px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #EBEBEB;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}


    </style>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>


    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Rizwan Associates Dashboard </title>
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" href="<?php echo base_url();?>assets/images/favicon.png">
    <link rel="stylesheet" href="<?php echo base_url();?>assets/vendor/bootstrap-select/dist/css/bootstrap-select.min.css">
    <link rel="stylesheet" href="<?php echo base_url();?>assets/css/style.css">
    <!-- Pick date -->
    <link rel="stylesheet" href="<?php echo base_url();?>assets/vendor/pickadate/themes/default.css">
    <link rel="stylesheet" href="<?php echo base_url();?>assets/vendor/pickadate/themes/default.date.css">
     <link href="<?php echo base_url();?>assets/vendor/datatables/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://code.highcharts.com/highcharts-3d.js"></script>


<script>
window.onload = function() {
 
 
var chart = new CanvasJS.Chart("chartContainer", {
    theme: "light2",
    animationEnabled: true,
    title: {
        text: "World Energy Consumption by Sector - 2020"
    },
    data: [{
        type: "pie",
        indexLabel: "{y}",
        yValueFormatString: "#,##0.00\"%\"",
        indexLabelPlacement: "inside",
        indexLabelFontColor: "#36454F",
        indexLabelFontSize: 18,
        indexLabelFontWeight: "bolder",
        showInLegend: true,
        legendText: "{label}",
        dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
    }]
});
chart.render();
 
}
</script>
</head>
<body>

    <!--*******************
        Preloader start
    ********************-->
    <div id="preloader">
        <div class="sk-three-bounce">
            <div class="sk-child sk-bounce1"></div>
            <div class="sk-child sk-bounce2"></div>
            <div class="sk-child sk-bounce3"></div>
        </div>
    </div>
    <!--*******************
        Preloader end
    ********************-->

    <!--**********************************
        Main wrapper start
    ***********************************-->
    <div id="main-wrapper">

        <?php  $this->load->view('header'); ?>
       
        <div class="content-body">
            <!-- row -->
            <div class="container-fluid">
                   
                <div class="row">

                    <div class="col-xl-6 col-xxl-6 col-sm-6">
                    <figure class="highcharts-figure">
                        <div id="employee_per_department"></div>
                    </figure>
                </div>

                  <div class="col-xl-6 col-xxl-6 col-sm-6">
                        <figure class="highcharts-figure">
                            <div id="department_salary_pie_chart"></div>
                        </figure>
                    </div>
                 </div> 
                </div>
        </div>
        </div>
    </div>
 <?php  $this->load->view('footer'); ?>
    
</body>
<script>
var departmentData = <?php echo $department_chart_data; ?>;

Highcharts.chart('employee_per_department', {
    chart: {
        type: 'column',
        options3d: {
            enabled: true,
            alpha: 15,
            beta: 15,
            depth: 50,
            viewDistance: 25
        }
    },
    title: {
        text: 'Employees per Department'
    },
    xAxis: {
        type: 'category',
        title: {
            text: ''
        }
    },
    yAxis: {
        title: {
            text: ''
        }
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        column: {
            depth: 25
        }
    },
    series: [{
        name: "Employees",
        colorByPoint: true,
        data: departmentData
    }]
});
</script>
<script>
    var salaryData = <?php echo $salary_chart_data; ?>;

    Highcharts.chart('department_salary_pie_chart', {
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            }
        },
        title: {
            text: 'Department-wise Salary Distribution'
        },
        accessibility: {
            point: {
                valueSuffix: ' PKR'
            }
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.y:,.0f} PKR</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                depth: 35,
                dataLabels: {
                    enabled: true,
                    format: '{point.name}: {point.y:,.0f} PKR'
                }
            }
        },
        series: [{
            name: 'Salary',
            colorByPoint: true,
            data: salaryData
        }]
    });
</script>


</html>