<?php include_once "header.php" ?>
<?php

if (!($_SESSION[EW_SESSION_SYS_ADMIN] == 1 || $_SESSION[EW_SESSION_USER_LEVEL]==-1 || $_SESSION[EW_SESSION_USER_LEVEL]==-2)){
  $user->redirect('index.php');
}

//////////////////////////////////
// MONTHLY SALES REPORT BAR CHART
//////////////////////////////////
$months               = array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
$monthnewreg          = array();
$monthtotallogin      = array();
$monthtotalpenyata    = array();
$monthtotalwithdrawal = array();
$monthtotalunittrust  = array();
foreach ($months as $month) {
    $monthnewreg[$month]          = 0;
    $monthtotallogin[$month]      = 0;
    $monthtotalpenyata[$month]    = 0;
    $monthtotalwithdrawal[$month] = 0;
    $monthtotalunittrust[$month]  = 0;
}


//////////////////////////////////////////////
///
/// MONHTHLY TOTAL NEW REGISTRATION
///
//////////////////////////////////////////////
$sql = "
        SELECT MONTH(CREATED_AT), LEFT(DATENAME(MONTH, CREATED_AT), 3) as MTHNAME, COUNT(ID) as TOTALAMT
          FROM [dbo].[WEBACTIVITYLOGS]
         WHERE YEAR(CREATED_AT)=YEAR(GETDATE())
           AND STATUS_ID=4
        GROUP BY MONTH(CREATED_AT), LEFT(DATENAME(MONTH, CREATED_AT), 3)
        ORDER BY MONTH(CREATED_AT), LEFT(DATENAME(MONTH, CREATED_AT), 3)
       "; 
$stmt = $DB_con->prepare($sql, array(PDO::ATTR_CURSOR => PDO::CURSOR_SCROLL));
$stmt->execute();
if ($stmt->rowCount() > 0){
  while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
    //echo $row["MTHNAME"]."<br>";
    $monthnewreg[$row["MTHNAME"]] = (int)$row["TOTALAMT"];
  }  
}

//////////////////////////////////////////////
///
/// MONHTHLY TOTAL LOGIN
///
//////////////////////////////////////////////
$sql = "
        SELECT MONTH(CREATED_AT), LEFT(DATENAME(MONTH, CREATED_AT), 3) as MTHNAME, COUNT(ID) as TOTALAMT
          FROM [dbo].[WEBACTIVITYLOGS]
         WHERE YEAR(CREATED_AT)=YEAR(GETDATE())
           AND STATUS_ID=1
        GROUP BY MONTH(CREATED_AT), LEFT(DATENAME(MONTH, CREATED_AT), 3)
        ORDER BY MONTH(CREATED_AT), LEFT(DATENAME(MONTH, CREATED_AT), 3)
       "; 
$stmt = $DB_con->prepare($sql, array(PDO::ATTR_CURSOR => PDO::CURSOR_SCROLL));
$stmt->execute();
if ($stmt->rowCount() > 0){
  while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
    //echo $row["MTHNAME"]."<br>";
    $monthtotallogin[$row["MTHNAME"]] = (int)$row["TOTALAMT"];
  }  
}


//////////////////////////////////////////////
///
/// MONHTHLY SEMAKAN PENYATA
///
//////////////////////////////////////////////
$sql = "
        SELECT MONTH(CREATED_AT), LEFT(DATENAME(MONTH, CREATED_AT), 3) as MTHNAME, COUNT(ID) as TOTALAMT
          FROM [dbo].[WEBACTIVITYLOGS]
         WHERE YEAR(CREATED_AT)=YEAR(GETDATE())
           AND STATUS_ID=6
        GROUP BY MONTH(CREATED_AT), LEFT(DATENAME(MONTH, CREATED_AT), 3)
        ORDER BY MONTH(CREATED_AT), LEFT(DATENAME(MONTH, CREATED_AT), 3)
       "; 
$stmt = $DB_con->prepare($sql, array(PDO::ATTR_CURSOR => PDO::CURSOR_SCROLL));
$stmt->execute();
if ($stmt->rowCount() > 0){
  while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
    //echo $row["MTHNAME"]."<br>";
    $monthtotalpenyata[$row["MTHNAME"]] = (int)$row["TOTALAMT"];
  }  
}


//////////////////////////////////////////////
///
/// MONHTHLY SEMAKAN WITHDRAWAL
///
//////////////////////////////////////////////
$sql = "
        SELECT MONTH(CREATED_AT), LEFT(DATENAME(MONTH, CREATED_AT), 3) as MTHNAME, COUNT(ID) as TOTALAMT
          FROM [dbo].[WEBACTIVITYLOGS]
         WHERE YEAR(CREATED_AT)=YEAR(GETDATE())
           AND STATUS_ID=7
        GROUP BY MONTH(CREATED_AT), LEFT(DATENAME(MONTH, CREATED_AT), 3)
        ORDER BY MONTH(CREATED_AT), LEFT(DATENAME(MONTH, CREATED_AT), 3)
       "; 
$stmt = $DB_con->prepare($sql, array(PDO::ATTR_CURSOR => PDO::CURSOR_SCROLL));
$stmt->execute();
if ($stmt->rowCount() > 0){
  while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
    //echo $row["MTHNAME"]."<br>";
    $monthtotalwithdrawal[$row["MTHNAME"]] = (int)$row["TOTALAMT"];
  }  
}

//////////////////////////////////////////////
///
/// MONHTHLY SEMAKAN UNIT TRUST
///
//////////////////////////////////////////////
$sql = "
        SELECT MONTH(CREATED_AT), LEFT(DATENAME(MONTH, CREATED_AT), 3) as MTHNAME, COUNT(ID) as TOTALAMT
          FROM [dbo].[WEBACTIVITYLOGS]
         WHERE YEAR(CREATED_AT)=YEAR(GETDATE())
           AND STATUS_ID=14
        GROUP BY MONTH(CREATED_AT), LEFT(DATENAME(MONTH, CREATED_AT), 3)
        ORDER BY MONTH(CREATED_AT), LEFT(DATENAME(MONTH, CREATED_AT), 3)
       "; 
$stmt = $DB_con->prepare($sql, array(PDO::ATTR_CURSOR => PDO::CURSOR_SCROLL));
$stmt->execute();
if ($stmt->rowCount() > 0){
  while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
    //echo $row["MTHNAME"]."<br>";
    $monthtotalunittrust[$row["MTHNAME"]] = (int)$row["TOTALAMT"];
  }  
}
                      

$dateTime = new \DateTime(Now);
$monday   = $user->getStartOfWeekDate('begin', $dateTime)->format("Y-m-d");
$sunday   = $user->getStartOfWeekDate('end', $dateTime)->format("Y-m-d"); 

?>


<!--<link rel="stylesheet" href="phpcss/ionicons.min.css">-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="phpcss/AdminLTE.min.css">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="dist/js/html5shiv.min.js"></script>
<script src="dist/js/respond.min.js"></script>
<![endif]-->


  <!-- Full Width Column -->
  <div class="content-wrapper">
    <div class="container">
        <!-- Content Header (Page header) -->
        <section class="content-header">
          <h1>
            Home
            <small>Dashboard</small>
          </h1>
          <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i class="active"> Home</a></li>
            <!--
            <li><a href="#">Layout</a></li>
            <li class="active">Top Navigation</li>
            -->
          </ol>
        </section>    
    
        <!-- Main content -->
        <section class="content">
       
            <div class="row">
              <div class="col-md-7">
              
              
                  <!-- BAR CHART Total New Registration -->
                  <div class="box box-danger">
                    <div class="box-header with-border">
                      <h3 class="box-title">Monthly New User Registration (Jumlah Pendaftaran Baru Bulanan)</h3>

                      <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                      </div>
                    </div>
                    <div class="box-body">
                      <div class="chart">
                        <canvas id="barChartMonthly" style="height:250px"></canvas>
                      </div>
                    </div>
                    <!-- /.box-body -->
                  </div>
                  <!-- /.box -->
                  
                  <!-- BAR CHART Total Login -->
                  <div class="box box-danger">
                    <div class="box-header with-border">
                      <h3 class="box-title">Monthly Total Login (Jumlah Pengguna Log Masuk Bulanan)</h3>

                      <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                      </div>
                    </div>
                    <div class="box-body">
                      <div class="chart">
                        <canvas id="barChartTotalLogin" style="height:250px"></canvas>
                      </div>
                    </div>
                    <!-- /.box-body -->
                  </div>
                  <!-- /.box -->          

                  <!-- BAR CHART Penyata-->
                  <div class="box box-danger">
                    <div class="box-header with-border">
                      <h3 class="box-title">Monthly Statement Enquiries (Jumlah Semakan Penyata Bulanan)</h3>

                      <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                      </div>
                    </div>
                    <div class="box-body">
                      <div class="chart">
                        <canvas id="barChartPenyata" style="height:250px"></canvas>
                      </div>
                    </div>
                    <!-- /.box-body -->
                  </div>
                  <!-- /.box -->   

                  <!-- BAR CHART Withdrawal-->
                  <div class="box box-danger">
                    <div class="box-header with-border">
                      <h3 class="box-title">Monthly Withdrawal Enquiries (Jumlah Semakan Pengeluaran Bulanan)</h3>

                      <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                      </div>
                    </div>
                    <div class="box-body">
                      <div class="chart">
                        <canvas id="barChartWithdrawal" style="height:250px"></canvas>
                      </div>
                    </div>
                    <!-- /.box-body -->
                  </div>
                  <!-- /.box --> 

                  <!-- BAR CHART Unit Trust-->
                  <div class="box box-danger">
                    <div class="box-header with-border">
                      <h3 class="box-title">Monthly Unit Trust Enquiries (Jumlah Semakan Unit Trust Bulanan)</h3>

                      <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                      </div>
                    </div>
                    <div class="box-body">
                      <div class="chart">
                        <canvas id="barChartUnitTrust" style="height:250px"></canvas>
                      </div>
                    </div>
                    <!-- /.box-body -->
                  </div>
                  <!-- /.box --> 
                  
              </div>
              
              <div class="col-md-5">
                  
                  
                  <!-- TABLE: LATEST KIOSK NOTIFICATION -->
                  <div class="box box-danger">
                    <div class="box-header with-border">
                      <h3 class="box-title">Latest 10 User Registration</h3>

                      <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                      </div>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                      <div class="table-responsive">
                        <table class="table no-margin table-striped">
                          <thead>
                          <tr>
                            <th>Date Joined</th>
                            <th>Army No</th>
                            <th>Name</th>
                          </tr>
                          </thead>
                          <tbody>
                          <?php
                          // Get latest 10 transactions from NOTIFICATION_LOG
                          $sql = "
                                  SELECT TOP 10 
                                         a.[USER_ID]
                                        ,b.[FULLNAME]
                                        ,a.[CREATED_AT]
                                    FROM [LTATDB].[dbo].[WEBACTIVITYLOGS] a
                                    LEFT OUTER JOIN [dbo].[WEBUSERPROFILE] b
                                      ON b.[USERID] = a.[USER_ID]
                                    where status_id=4
                                   ORDER BY CREATED_AT desc
                                 "; 
                          $stmt = $DB_con->prepare($sql, array(PDO::ATTR_CURSOR => PDO::CURSOR_SCROLL));
                          $stmt->execute();
                          if ($stmt->rowCount() > 0){
                            while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                              //$trxdate = $rs->fields[0];
                              //$trxdate = date_format('Y-m-d H:i', strtotime($rs->fields[0]));
                              //die($rs->fields[0]);
                              $datejoin    = date_create($row["CREATED_AT"]);
                              //if (isset($trxdate)) die("hello");
                              $datejoin    = date_format($datejoin, 'Y-m-d H:i');
                              $armyno      = $row["USER_ID"];
                              $armyname    = $row["FULLNAME"];


                              echo "<tr>";
                              echo "<td>$datejoin</td>";
                              echo "<td>$armyno</td>";
                              echo "<td data-toggle='tooltip' title='".$armyname."'>$armyname</td>";
                              echo "</tr>";
                            }
                          }                          
                          ?>
 
                          </tbody>
                        </table>
                      </div>
                      <!-- /.table-responsive -->
                    </div>
                    <!-- /.box-body -->
                  </div>
                  <!-- /.box --> 

                  
                  
                  <!-- TABLE: LATEST USER LOGIN -->
                  <div class="box box-danger">
                    <div class="box-header with-border">
                      <h3 class="box-title">Latest 10 User Logged In</h3>

                      <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                      </div>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                      <div class="table-responsive">
                        <table class="table no-margin table-striped">
                          <thead>
                          <tr>
                            <th>Date Joined</th>
                            <th>Army No</th>
                            <th>Name</th>
                          </tr>
                          </thead>
                          <tbody>
                          <?php
                          // Get latest 10 transactions from NOTIFICATION_LOG
                          $sql = "
                                  SELECT TOP 10 
                                         a.[USER_ID]
                                        ,b.[FULLNAME]
                                        ,a.[CREATED_AT]
                                    FROM [LTATDB].[dbo].[WEBACTIVITYLOGS] a
                                    LEFT OUTER JOIN [dbo].[WEBUSERPROFILE] b
                                      ON b.[USERID] = a.[USER_ID]
                                    where status_id=1
                                   ORDER BY CREATED_AT desc
                                 "; 
                          $stmt = $DB_con->prepare($sql, array(PDO::ATTR_CURSOR => PDO::CURSOR_SCROLL));
                          $stmt->execute();
                          if ($stmt->rowCount() > 0){
                            while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                              //$trxdate = $rs->fields[0];
                              //$trxdate = date_format('Y-m-d H:i', strtotime($rs->fields[0]));
                              //die($rs->fields[0]);
                              $datejoin    = date_create($row["CREATED_AT"]);
                              //if (isset($trxdate)) die("hello");
                              $datejoin    = date_format($datejoin, 'Y-m-d H:i');
                              $armyno      = $row["USER_ID"];
                              $armyname    = $row["FULLNAME"];


                              echo "<tr>";
                              echo "<td>$datejoin</td>";
                              echo "<td>$armyno</td>";
                              echo "<td data-toggle='tooltip' title='".$armyname."'>$armyname</td>";
                              echo "</tr>";
                            }
                          }                          
                          ?>
 
                          </tbody>
                        </table>
                      </div>
                      <!-- /.table-responsive -->
                    </div>
                    <!-- /.box-body -->
                  </div>
                  <!-- /.box --> 
                  
                  
                  
              </div> <!-- /end right columns -->
              
              
              

              
            </div>
      
       
        </section>   
    </div>
    <!-- /.content-wrapper -->

</div>



<?php include_once "footer.php" ?>
<!-- ChartJS 1.0.1 -->
<script src="plugins/chartjs/Chart.min.js"></script>




<script>
  $(function () {
    /* ChartJS
     * -------
     * Here we will create a few charts using ChartJS
     */
     
     
    Chart.plugins.register({
      afterDraw: function(chartInstance) {
        if (chartInstance.config.options.showDatapoints) {
          var helpers = Chart.helpers;
          var ctx = chartInstance.chart.ctx;
          var fontColor = helpers.getValueOrDefault(chartInstance.config.options.showDatapoints.fontColor, chartInstance.config.options.defaultFontColor);

          // render the value of the chart above the bar
          ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
          ctx.textAlign = 'center';
          ctx.textBaseline = 'bottom';
          ctx.fillStyle = fontColor;

          chartInstance.data.datasets.forEach(function (dataset) {
            for (var i = 0; i < dataset.data.length; i++) {
              var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
              var scaleMax = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight;
              var yPos = (scaleMax - model.y) / scaleMax >= 0.93 ? model.y + 20 : model.y - 5;
              ctx.fillText(dataset.data[i], model.x, yPos);
            }
          });
        }
      }
    });     
     
     
    //-------------
    //- BAR CHART Monthly New Regisration -
    //-------------     
    var areaChartData = {
      //labels: ["January", "February", "March", "April", "May", "June", "July"],
      labels: <?=json_encode($months);?>,
      datasets: [
        {
          label:           "New Registration",          
          backgroundColor: "#dd4b39",
          data: <?=json_encode(array_values($monthnewreg));?>
        }
      ]
    };
    
    var barChartOptions = {
          tooltips:   {
                      enabled: true,
                      mode: 'index',
                      
                      callbacks: {
                                  label: function(tooltipItem, data) {
                                      return "" + Number(tooltipItem.yLabel).toFixed(0).replace(/./g, function(c, i, a) {
                                          return i > 0 && c !== "." && (a.length - i) % 3 === 0 ? "," + c : c;
                                      });
                                  }
                              }                     
                      
                      
          },
          scales: {
                   yAxes:[{
                            gridLines: {
                              display: false
                            },
                            scaleLabel: {
                              display: true,
                              labelString: 'Total Registration'
                            }
                   }],
                   xAxes:[{
                            gridLines: {
                              display: false
                            },
                            scaleLabel: {
                              display: true,
                              labelString: 'Month'
                            }
                   }]
          },
          showDatapoints: true,
          legend: {
                   display: true,
                   position: 'bottom'
          }
    };    


    var ctx                = $("#barChartMonthly").get(0).getContext("2d");
    var barChartMonthly    = new Chart(ctx, {
                                             type:   'bar',
                                             data:   areaChartData,
                                             options: barChartOptions      
                                            });
                                            

                                            
    //-------------
    //- BAR CHART Monthly Total Login -
    //-------------                                            
    var areaChartData = {
      //labels: ["January", "February", "March", "April", "May", "June", "July"],
      labels: <?=json_encode($months);?>,
      datasets: [
        {
          label:           "Total Login",          
          backgroundColor: "#00a65a",
          data: <?=json_encode(array_values($monthtotallogin));?>
        }
      ]
    };
    
    var barChartOptions = {
          tooltips:   {
                      enabled: true,
                      mode: 'index',
                      
                      callbacks: {
                                  label: function(tooltipItem, data) {
                                      return "" + Number(tooltipItem.yLabel).toFixed(0).replace(/./g, function(c, i, a) {
                                          return i > 0 && c !== "." && (a.length - i) % 3 === 0 ? "," + c : c;
                                      });
                                  }
                              }                     
                      
                      
          },
          scales: {
                   yAxes:[{
                            gridLines: {
                              display: false
                            },
                            scaleLabel: {
                              display: true,
                              labelString: 'Total Login'
                            }
                   }],
                   xAxes:[{
                            gridLines: {
                              display: false
                            },
                            scaleLabel: {
                              display: true,
                              labelString: 'Month'
                            }
                   }]
          },
          showDatapoints: true,
          legend: {
                   display: true,
                   position: 'bottom'
          }
    };    

    var ctx                = $("#barChartTotalLogin").get(0).getContext("2d");
    var barChartTotalLogin = new Chart(ctx, {
                                             type:   'bar',
                                             data:   areaChartData,
                                             options: barChartOptions      
                                            });
                                            
                                            


    //-------------
    //- BAR CHART Monthly Penyata -
    //-------------                                            
    var areaChartData = {
      //labels: ["January", "February", "March", "April", "May", "June", "July"],
      labels: <?=json_encode($months);?>,
      datasets: [
        {
          label:           "Total Usage",          
          backgroundColor: "#f39c12",
          data: <?=json_encode(array_values($monthtotalpenyata));?>
        }
      ]
    };
    
    var barChartOptions = {
          tooltips:   {
                      enabled: true,
                      mode: 'index',
                      
                      callbacks: {
                                  label: function(tooltipItem, data) {
                                      return "" + Number(tooltipItem.yLabel).toFixed(0).replace(/./g, function(c, i, a) {
                                          return i > 0 && c !== "." && (a.length - i) % 3 === 0 ? "," + c : c;
                                      });
                                  }
                              }                     
                      
                      
          },
          scales: {
                   yAxes:[{
                            gridLines: {
                              display: false
                            },
                            scaleLabel: {
                              display: true,
                              labelString: 'Total Usage'
                            }
                   }],
                   xAxes:[{
                            gridLines: {
                              display: false
                            },
                            scaleLabel: {
                              display: true,
                              labelString: 'Month'
                            }
                   }]
          },
          showDatapoints: true,
          legend: {
                   display: true,
                   position: 'bottom'
          }
    };    


    var ctx                = $("#barChartPenyata").get(0).getContext("2d");
    var barChartPenyata    = new Chart(ctx, {
                                             type:   'bar',
                                             data:   areaChartData,
                                             options: barChartOptions      
                                            });
                                            
    //-------------
    //- BAR CHART Monthly Withdrawal -
    //-------------                                            
    var areaChartData = {
      //labels: ["January", "February", "March", "April", "May", "June", "July"],
      labels: <?=json_encode($months);?>,
      datasets: [
        {
          label:           "Total Usage",          
          backgroundColor: "#00c0ef",
          data: <?=json_encode(array_values($monthtotalwithdrawal));?>
        }
      ]
    };
    
    var barChartOptions = {
          tooltips:   {
                      enabled: true,
                      mode: 'index',
                      
                      callbacks: {
                                  label: function(tooltipItem, data) {
                                      return "" + Number(tooltipItem.yLabel).toFixed(0).replace(/./g, function(c, i, a) {
                                          return i > 0 && c !== "." && (a.length - i) % 3 === 0 ? "," + c : c;
                                      });
                                  }
                              }                     
                      
                      
          },
          scales: {
                   yAxes:[{
                            gridLines: {
                              display: false
                            },
                            scaleLabel: {
                              display: true,
                              labelString: 'Total Usage'
                            }
                   }],
                   xAxes:[{
                            gridLines: {
                              display: false
                            },
                            scaleLabel: {
                              display: true,
                              labelString: 'Month'
                            }
                   }]
          },
          showDatapoints: true,
          legend: {
                   display: true,
                   position: 'bottom'
          }
    };    


    var ctx                = $("#barChartWithdrawal").get(0).getContext("2d");
    var barChartWithdrawal = new Chart(ctx, {
                                             type:   'bar',
                                             data:   areaChartData,
                                             options: barChartOptions      
                                            });

                                            
    //-------------
    //- BAR CHART Monthly Unit Trust -
    //-------------                                            
    var areaChartData = {
      //labels: ["January", "February", "March", "April", "May", "June", "July"],
      labels: <?=json_encode($months);?>,
      datasets: [
        {
          label:           "Total Usage",          
          backgroundColor: "#3d9970",
          data: <?=json_encode(array_values($monthtotalunittrust));?>
        }
      ]
    };
    
    var barChartOptions = {
          tooltips:   {
                      enabled: true,
                      mode: 'index',
                      
                      callbacks: {
                                  label: function(tooltipItem, data) {
                                      return "" + Number(tooltipItem.yLabel).toFixed(0).replace(/./g, function(c, i, a) {
                                          return i > 0 && c !== "." && (a.length - i) % 3 === 0 ? "," + c : c;
                                      });
                                  }
                              }                     
                      
                      
          },
          scales: {
                   yAxes:[{
                            gridLines: {
                              display: false
                            },
                            scaleLabel: {
                              display: true,
                              labelString: 'Total Usage'
                            }
                   }],
                   xAxes:[{
                            gridLines: {
                              display: false
                            },
                            scaleLabel: {
                              display: true,
                              labelString: 'Month'
                            }
                   }]
          },
          showDatapoints: true,
          legend: {
                   display: true,
                   position: 'bottom'
          }
    };    


    var ctx                = $("#barChartUnitTrust").get(0).getContext("2d");
    var barChartUnitTrust  = new Chart(ctx, {
                                             type:   'bar',
                                             data:   areaChartData,
                                             options: barChartOptions      
                                            });


  });
</script>

