<?php
session_start();
include 'session_check.php';
include 'get_user_info.php';
//echo $number['February'];

?>
	<head>
    <meta charset="UTF-8">
    <title>AdminLTE 2 | Dashboard</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <!-- Bootstrap 3.3.2 -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />    
    <!-- FontAwesome 4.3.0 -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Ionicons 2.0.0 -->
    <link href="https://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" />    
    <!-- Theme style -->
    <link href="dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
    <!-- AdminLTE Skins. Choose a skin from the css/skins 
         folder instead of downloading all of them to reduce the load. -->
    <link href="dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
    <!-- iCheck -->
    <link href="plugins/iCheck/flat/blue.css" rel="stylesheet" type="text/css" />
    <!-- Morris chart -->
    <link href="plugins/morris/morris.css" rel="stylesheet" type="text/css" />
    <!-- jvectormap -->
    <link href="plugins/jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" />
    <!-- Date Picker -->
    <link href="plugins/datepicker/datepicker3.css" rel="stylesheet" type="text/css" />
    <!-- Daterange picker -->
    <link href="plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
    <!-- bootstrap wysihtml5 - text editor -->
    <link href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css" rel="stylesheet" type="text/css" />

	<!---- Ck editor-->
	 <script src="ckeditor/ckeditor.js"></script>
	 <!-----	custom css	------>
	 <link rel="stylesheet" href="css/custom_css.css">
	 
	 <!---  css for tree  ---->
	 <link href="css/main.css" rel="stylesheet" type="text/css">
	 
    <script type="text/javascript" src="js/Chart.min.js"></script>
  </head>

<?php
include 'include/header.php';
include 'include/left-nav.php';
?>
      <!-- Right side column. Contains the navbar and content of the page -->
      <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
          <h1>
            Member joining graph
            
          </h1>
          <ol class="breadcrumb">
            <li><a href="dashboard.php"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="active">joining graph</li>
          </ol>
        </section>

        <!-- Main content -->
        <section class="content">
          <div class="row">
            <div class="col-sm-2 col-sm-offset-10">
                <!----  user id hidden field  ----->
                <select id="slt_year" class="form-control">
                    <?php
                    $date=date("Y");
                    ?>
                        <option value="<?php echo $date;?>"> <?php echo $date;?>  </option>
                    <?php
                    for($i=1;$i<4;$i++)
                    {
                       $date2=date("Y",strtotime("- $i year"));
                    ?>
                        <option value="<?php echo $date2;?>"> <?php echo $date2;?> </option>
                    <?php
                    }
                    ?>
                </select>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12">
                <div id="chart-container">
                      <canvas id="graphCanvas"></canvas>
                 </div>
            </div><!-- /.col -->
          </div><!-- /.row -->
        </section><!-- /.content -->
      </div><!-- /.content-wrapper -->

	 <!-- jQuery 2.1.3 -->
    <script src="plugins/jQuery/jQuery-2.1.3.min.js"></script>
    <!-- jQuery UI 1.11.2 -->
    <script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js" type="text/javascript"></script>
    <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
     <?php
    if($status=='Deactive')
    {
        include 'modal_show.php';
    }
    ?>
    <!-- Bootstrap 3.3.2 JS -->
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>    
    <!-- Sparkline
    <!-- Bootstrap WYSIHTML5 -->
    <script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js" type="text/javascript"></script>
    <!-- iCheck -->
    <script src="plugins/iCheck/icheck.min.js" type="text/javascript"></script>
    <!-- Slimscroll -->
    <script src="plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
    <!-- FastClick -->
    <script src='plugins/fastclick/fastclick.min.js'></script>
    <!-- AdminLTE App -->
    <script src="dist/js/app.min.js" type="text/javascript"></script>
    <!--  Data table js link   --->
    <script src="DataTables/datatables.min.js"></script>

    <script>
	 $('#example').DataTable();
    </script>
    <script>
        $(document).ready(function () {
            var user_id=<?php echo json_encode($get_all_members);?>;
            showGraph('2019',user_id);
            $("#slt_year").change(function(){
                 showGraph(this.value,user_id);
            });
        });


        function showGraph(year,user_id)
        {
            {
                $.post("data.php?year="+year+"&user_id="+user_id,
                function (data)
                {
                    var xyz= ['January','February','March','April','May','June','July','August','Septepber','October','November','December'];
                   var aa=JSON.parse(data);
                   // alert(data);
                    var chartdata = {
                        labels: xyz,
                        datasets: [
                            {
                                label: 'User joined',
                                backgroundColor: '#49e2ff',
                                borderColor: '#46d5f1',
                                hoverBackgroundColor: '#CCCCCC',
                                hoverBorderColor: '#ffffff',
                                data: aa
                            }
                        ]
                    };
                    var graphTarget = $("#graphCanvas");
                    var barGraph = new Chart(graphTarget, {
                        type: 'line',
                        data: chartdata
                    });
                });
            }
        }
        </script>
	
<?php
include 'include/footer.php';
?>