<?php //print_r($usertype);exit; ?>
    <section class="content-header">
      <h1>
        Log
      </h1>
      <ol class="breadcrumb">
        <li><a href="<?php echo base_url().'admin';?>"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">List</li>
      </ol>
    </section>

    <section class="content">
      <div class="row">
        <?php echo $this->utility->showMsg();?>
        <div class="col-xs-12">
          <div class="box">
            <div class="box-header">
              <h3 class="box-title">Management</h3>
              </div>
               
              <div></div>
            <!-- /.box-header -->
            <div class="box-body">
            <form action="" method="post">
              <div class="form-group">
                <div class="row">
                 <div class="col-sm-4">
                    <select name="year" class="form-control monthSelect">
                       <option value="">--Select Year--</option>
                      <?php if(count($users['year'])>0){ 
                                foreach ($users['year'] as $values) {
                                  if($values['year']>1970){
                       ?>
                            <option value="<?php echo $values['year']; ?>" <?php if($this->input->post('year')){ if($this->input->post('year') == $values['year'] ){ echo 'selected'; } } ?>><?php echo $values['year']; ?></option>
                       <?php } }
                          }  
                        ?>
                    </select>
                    </div>
                    <div class="col-sm-4">
                    <select name="month" class="form-control monthSelect">
                       <option value="">--Select Month--</option>
                       <option value="01" <?php if($this->input->post('month')){ if($this->input->post('month') == '01' ){ echo 'selected'; } } ?>>Jan</option>
                       <option value="02" <?php if($this->input->post('month')){ if($this->input->post('month') == '02' ){ echo 'selected'; } } ?>>Feb</option>
                       <option value="03" <?php if($this->input->post('month')){ if($this->input->post('month') == '03' ){ echo 'selected'; } } ?>>Mar</option>
                       <option value="04" <?php if($this->input->post('month')){ if($this->input->post('month') == '04' ){ echo 'selected'; } } ?>>Apr</option>\
                       <option value="05" <?php if($this->input->post('month')){ if($this->input->post('month') == '05' ){ echo 'selected'; } } ?>>May</option>
                       <option value="06" <?php if($this->input->post('month')){ if($this->input->post('month') == '06' ){ echo 'selected'; } } ?>>Jun</option>
                       <option value="07" <?php if($this->input->post('month')){ if($this->input->post('month') == '07' ){ echo 'selected'; } } ?>>July</option>
                       <option value="08" <?php if($this->input->post('month')){ if($this->input->post('month') == '08' ){ echo 'selected'; } } ?>>Aug</option>
                       <option value="09" <?php if($this->input->post('month')){ if($this->input->post('month') == '09' ){ echo 'selected'; } } ?>>Sep</option>
                       <option value="10" <?php if($this->input->post('month')){ if($this->input->post('month') == '10' ){ echo 'selected'; } } ?>>Oct</option>
                       <option value="11" <?php if($this->input->post('month')){ if($this->input->post('month') == '11' ){ echo 'selected'; } } ?>>Nov</option>
                       <option value="12" <?php if($this->input->post('month')){ if($this->input->post('month') == '12' ){ echo 'selected'; } } ?>>Dec</option>
                    </select>
                 </div> 
                 <div class="col-sm-4">
                            <div class="col-sm-8">
                                <input type="submit" class="btn btn-black " value="Search" id="add">
                            </div>
                         </div>
                        </div>
                      </div>
            </form>
            <div class="box-body">
              <div class="row">
                <div class="col-md-10">
                  <div class="chart-responsive">
                    <canvas id="barChart" height="100"></canvas>
                  </div>
                  <!-- ./chart-responsive -->
                </div>
                <!-- /.col -->
                <div class="col-md-2">
                  <ul class="chart-legend clearfix">
                    <li><i class="fa fa-circle-o text-yellow"></i> Number of users login</li>
                    <li><i class="fa fa-circle-o text-green"></i> Number of users messages</li>
                  </ul>
                </div>
                <!-- /.col -->
              </div>
              <!-- /.row -->
            </div>
              
           <div class="box box-default">
            <div class="box-header with-border">
              <h3 class="box-title">Members wrote messages </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="row">
                <div class="col-md-8">
                  <div class="chart-responsive">
                    <canvas id="membersWroteMessagesChart" height="100"></canvas>
                  </div>
                  <!-- ./chart-responsive -->
                </div>
                <!-- /.col -->
                <div class="col-md-4">
                  <ul class="chart-legend clearfix">
                    <li><i class="fa fa-circle-o text-red"></i> Premium</li>
                    <li><i class="fa fa-circle-o text-green"></i> Basic yearly</li>
                    <li><i class="fa fa-circle-o text-yellow"></i> Basic half yearly</li>
                  </ul>
                </div>
                <!-- /.col -->
              </div>
              <!-- /.row -->
            </div>
            
          </div>


          <div class="box box-default">
            <div class="box-header with-border">
              <h3 class="box-title">Lady basic wrote messages </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="row">
                <div class="col-md-8">
                  <div class="chart-responsive">
                    <canvas id="ladyWroteMessagesChart" height="100"></canvas>
                  </div>
                  <!-- ./chart-responsive -->
                </div>
                <!-- /.col -->
                <div class="col-md-4">
                  <ul class="chart-legend clearfix">
                    <li><i class="fa fa-circle-o text-red"></i> To 1 person</li>
                    <li><i class="fa fa-circle-o text-green"></i> To 2 person</li>
                    <li><i class="fa fa-circle-o text-yellow"></i> To 3 or more person</li>
                  </ul>
                </div>
                <!-- /.col -->
              </div>
              <!-- /.row -->
            </div>
            
          </div>


          <div class="box box-default">
            <div class="box-header with-border">
              <h3 class="box-title">Gentleman basic wrote messages </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="row">
                <div class="col-md-8">
                  <div class="chart-responsive">
                    <canvas id="gentlemanWroteMessagesChart" height="100"></canvas>
                  </div>
                  <!-- ./chart-responsive -->
                </div>
                <!-- /.col -->
                <div class="col-md-4">
                  <ul class="chart-legend clearfix">
                    <li><i class="fa fa-circle-o text-red"></i> To 1 person</li>
                    <li><i class="fa fa-circle-o text-green"></i> To 2 person</li>
                    <li><i class="fa fa-circle-o text-yellow"></i> To 3 or more person</li>
                  </ul>
                </div>
                <!-- /.col -->
              </div>
              <!-- /.row -->
            </div>
            
          </div>
            
          </div>


          <div class="box box-default">
            <div class="box-header with-border">
              <h3 class="box-title">Couple basic wrote messages </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="row">
                <div class="col-md-8">
                  <div class="chart-responsive">
                    <canvas id="coupleWroteMessagesChart" height="100"></canvas>
                  </div>
                  <!-- ./chart-responsive -->
                </div>
                <!-- /.col -->
                <div class="col-md-4">
                  <ul class="chart-legend clearfix">
                    <li><i class="fa fa-circle-o text-red"></i> To 1 person</li>
                    <li><i class="fa fa-circle-o text-green"></i> To 2 person</li>
                    <li><i class="fa fa-circle-o text-yellow"></i> To 3 or more person</li>
                  </ul>
                </div>
                <!-- /.col -->
              </div>
              <!-- /.row -->
            </div>
            
          </div>



          <div class="box box-default countryWise">
            <div class="box-header with-border">
              <h3 class="box-title">Members country wise </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 first">
              <div class="row">
                <div class="col-md-12">
                  <div class="chart-responsive">
                    <canvas id="membersCountryChart" height="100"></canvas>
                  </div>
                  <!-- ./chart-responsive -->
                </div>
              </div>
              <!-- /.row -->
              <span id="next">Next Coutries &gt;</span>
            </div>
            <div class="box-body second" style="display:none;">
              <div class="row">
                <div class="col-md-12">
                  <div class="chart-responsive">
                    <canvas id="membersCountryChart100" height="100"></canvas>
                  </div>
                  <!-- ./chart-responsive -->
                </div>
              </div>
              <!-- /.row -->
              <span id="prev100">&lt; Prev Coutries</span>
              <span id="next100">Next Coutries &gt;</span>
            </div>
            <div class="box-body third" style="display:none;">
              <div class="row">
                <div class="col-md-12">
                  <div class="chart-responsive">
                    <canvas id="membersCountryChart150" height="100"></canvas>
                  </div>
                  <!-- ./chart-responsive -->
                </div>
              </div>
              <!-- /.row -->
              <span id="prev150">&lt; Next Coutries</span>
            </div>
            
          </div>
              
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>



    
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.6/css/intlTelInput.css">
<script src="<?php echo base_url(); ?>assets/js/intlTelInput.js"></script>  

<script>
  $(function () {
    $("#example1").DataTable();
    $("#example2").DataTable();

    $("#fromDate").datetimepicker();

    

    /****************BAR CHART***************/
   
    /****************BAR CHART***************/
    var year = [];
    var UserLog = [];
    var MessageLog = [];
      <?php if(count($users['yearly'])>0){ 
              foreach ($users['yearly'] as $key=>$value) {
                if($value['year']==1970 || $value['year']=='')
                {
                  continue;
                }
         ?>
              year.push("<?php echo $value['year']; ?>"); 
              UserLog.push("<?php echo $value['total']; ?>");   
              MessageLog.push("<?php echo $messages['yearly'][$key]['total']; ?>");        
          console.log(MessageLog);
         <?php } }
            //}  ?>

        var areaChartData = {
          labels: year,
          datasets: [
            {
              label: "Membership",
              fillColor: "#b3975b",
              strokeColor: "#b3975b",
              pointColor: "#b3975b",
              pointStrokeColor: "#b3975b",
              pointHighlightFill: "#b3975b",
              pointHighlightStroke: "#b3975b",
              data: UserLog
            },
            {
              label: "Booking",
              fillColor: "rgba(60,141,188,0.9)",
              strokeColor: "rgba(60,141,188,0.8)",
              pointColor: "#3b8bba",
              pointStrokeColor: "rgba(60,141,188,1)",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(60,141,188,1)",
              data: MessageLog
            }
          ]
        };
         var barChartCanvas = $("#barChart").get(0).getContext("2d");
        var barChart = new Chart(barChartCanvas);
        var barChartData = areaChartData;
        barChartData.datasets[1].fillColor = "#00a65a";
        barChartData.datasets[1].strokeColor = "#00a65a";
        barChartData.datasets[1].pointColor = "#00a65a";
        var barChartOptions = {
          //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
          scaleBeginAtZero: true,
          //Boolean - Whether grid lines are shown across the chart
          scaleShowGridLines: true,
          //String - Colour of the grid lines
          scaleGridLineColor: "rgba(0,0,0,.05)",
          //Number - Width of the grid lines
          scaleGridLineWidth: 1,
          //Boolean - Whether to show horizontal lines (except X axis)
          scaleShowHorizontalLines: true,
          //Boolean - Whether to show vertical lines (except Y axis)
          scaleShowVerticalLines: true,
          //Boolean - If there is a stroke on each bar
          barShowStroke: true,
          //Number - Pixel width of the bar stroke
          barStrokeWidth: 2,
          //Number - Spacing between each of the X value sets
          barValueSpacing: 5,
          //Number - Spacing between data sets within X values
          barDatasetSpacing: 1,
          //String - A legend template
          //legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
          //Boolean - whether to make the chart responsive
          responsive: true,
          maintainAspectRatio: true
        };

        barChartOptions.datasetFill = false;
        barChart.Bar(barChartData, barChartOptions);


    /**************MEMBERS WROTE MESSAGES CHART*************/
    var pieChartCanvas = $('#membersWroteMessagesChart').get(0).getContext('2d')
    var pieChart       = new Chart(pieChartCanvas)
    var PieData        = [
      {
        value    : <?php echo ($premiumSendMessage+$premiumGetMessage); ?>,
        color    : '#f56954',
        highlight: '#f56954',
        label    : 'Premium'
      },
      {
        value    : <?php echo ($basicYearSendMessage+$basicYearGetMessage); ?>,
        color    : '#00a65a',
        highlight: '#00a65a',
        label    : 'Basic Yearly'
      },
      {
        value    : <?php echo ($basicHalfSendMessage+$basicHalfGetMessage); ?>,
        color    : '#b3975b',
        highlight: '#b3975b',
        label    : 'Basic Half Yearly'
      }
    ]
    var pieOptions     = {
      //Boolean - Whether we should show a stroke on each segment
      segmentShowStroke    : true,
      //String - The colour of each segment stroke
      segmentStrokeColor   : '#fff',
      //Number - The width of each segment stroke
      segmentStrokeWidth   : 2,
      //Number - The percentage of the chart that we cut out of the middle
      percentageInnerCutout: 50, // This is 0 for Pie charts
      //Number - Amount of animation steps
      animationSteps       : 100,
      //String - Animation easing effect
      animationEasing      : 'easeOutBounce',
      //Boolean - Whether we animate the rotation of the Doughnut
      animateRotate        : true,
      //Boolean - Whether we animate scaling the Doughnut from the centre
      animateScale         : false,
      //Boolean - whether to make the chart responsive to window resizing
      responsive           : true,
      // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
      maintainAspectRatio  : true,
      //String - A legend template
      legendTemplate       : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>'
    }
    //Create pie or douhnut chart
    // You can switch between pie and douhnut using the method below.
    pieChart.Doughnut(PieData, pieOptions)
    /**************MEMBERS WROTE MESSAGES CHART*************/

    /**************LADY WROTE MESSAGES CHART*************/
    var pieChartCanvas = $('#ladyWroteMessagesChart').get(0).getContext('2d')
    var pieChart       = new Chart(pieChartCanvas)
    var PieData        = [
      {
        value    : <?php echo ($ladytotalOne); ?>,
        color    : '#f56954',
        highlight: '#f56954',
        label    : 'To 1 person'
      },
      {
        value    : <?php echo ($ladytotalTwo); ?>,
        color    : '#00a65a',
        highlight: '#00a65a',
        label    : 'To 2 person'
      },
      {
        value    : <?php echo ($ladytotalMore); ?>,
        color    : '#b3975b',
        highlight: '#b3975b',
        label    : 'To 3 or more person'
      }
    ]
    var pieOptions     = {
      //Boolean - Whether we should show a stroke on each segment
      segmentShowStroke    : true,
      //String - The colour of each segment stroke
      segmentStrokeColor   : '#fff',
      //Number - The width of each segment stroke
      segmentStrokeWidth   : 2,
      //Number - The percentage of the chart that we cut out of the middle
      percentageInnerCutout: 50, // This is 0 for Pie charts
      //Number - Amount of animation steps
      animationSteps       : 100,
      //String - Animation easing effect
      animationEasing      : 'easeOutBounce',
      //Boolean - Whether we animate the rotation of the Doughnut
      animateRotate        : true,
      //Boolean - Whether we animate scaling the Doughnut from the centre
      animateScale         : false,
      //Boolean - whether to make the chart responsive to window resizing
      responsive           : true,
      // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
      maintainAspectRatio  : true,
      //String - A legend template
      legendTemplate       : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>'
    }
    //Create pie or douhnut chart
    // You can switch between pie and douhnut using the method below.
    pieChart.Doughnut(PieData, pieOptions)
    /**************LADY WROTE MESSAGES CHART*************/

    /**************GENTLEMAN WROTE MESSAGES CHART*************/
    var pieChartCanvas = $('#gentlemanWroteMessagesChart').get(0).getContext('2d')
    var pieChart       = new Chart(pieChartCanvas)
    var PieData        = [
      {
        value    : <?php echo ($gentlemantotalOne); ?>,
        color    : '#f56954',
        highlight: '#f56954',
        label    : 'To 1 person'
      },
      {
        value    : <?php echo ($gentlemantotalTwo); ?>,
        color    : '#00a65a',
        highlight: '#00a65a',
        label    : 'To 2 person'
      },
      {
        value    : <?php echo ($gentlemantotalMore); ?>,
        color    : '#b3975b',
        highlight: '#b3975b',
        label    : 'To 3 or more person'
      }
    ]
    var pieOptions     = {
      //Boolean - Whether we should show a stroke on each segment
      segmentShowStroke    : true,
      //String - The colour of each segment stroke
      segmentStrokeColor   : '#fff',
      //Number - The width of each segment stroke
      segmentStrokeWidth   : 2,
      //Number - The percentage of the chart that we cut out of the middle
      percentageInnerCutout: 50, // This is 0 for Pie charts
      //Number - Amount of animation steps
      animationSteps       : 100,
      //String - Animation easing effect
      animationEasing      : 'easeOutBounce',
      //Boolean - Whether we animate the rotation of the Doughnut
      animateRotate        : true,
      //Boolean - Whether we animate scaling the Doughnut from the centre
      animateScale         : false,
      //Boolean - whether to make the chart responsive to window resizing
      responsive           : true,
      // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
      maintainAspectRatio  : true,
      //String - A legend template
      legendTemplate       : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>'
    }
    //Create pie or douhnut chart
    // You can switch between pie and douhnut using the method below.
    pieChart.Doughnut(PieData, pieOptions)
    /**************GENTLEMAN WROTE MESSAGES CHART*************/

    /**************COUPLE WROTE MESSAGES CHART*************/
    var pieChartCanvas = $('#coupleWroteMessagesChart').get(0).getContext('2d')
    var pieChart       = new Chart(pieChartCanvas)
    var PieData        = [
      {
        value    : <?php echo ($coupletotalOne); ?>,
        color    : '#f56954',
        highlight: '#f56954',
        label    : 'To 1 person'
      },
      {
        value    : <?php echo ($coupletotalTwo); ?>,
        color    : '#00a65a',
        highlight: '#00a65a',
        label    : 'To 2 person'
      },
      {
        value    : <?php echo ($coupletotalMore); ?>,
        color    : '#b3975b',
        highlight: '#b3975b',
        label    : 'To 3 or more person'
      }
    ]
    var pieOptions     = {
      //Boolean - Whether we should show a stroke on each segment
      segmentShowStroke    : true,
      //String - The colour of each segment stroke
      segmentStrokeColor   : '#fff',
      //Number - The width of each segment stroke
      segmentStrokeWidth   : 2,
      //Number - The percentage of the chart that we cut out of the middle
      percentageInnerCutout: 50, // This is 0 for Pie charts
      //Number - Amount of animation steps
      animationSteps       : 100,
      //String - Animation easing effect
      animationEasing      : 'easeOutBounce',
      //Boolean - Whether we animate the rotation of the Doughnut
      animateRotate        : true,
      //Boolean - Whether we animate scaling the Doughnut from the centre
      animateScale         : false,
      //Boolean - whether to make the chart responsive to window resizing
      responsive           : true,
      // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
      maintainAspectRatio  : true,
      //String - A legend template
      legendTemplate       : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>'
    }
    //Create pie or douhnut chart
    // You can switch between pie and douhnut using the method below.
    pieChart.Doughnut(PieData, pieOptions)
    /**************COUPLE WROTE MESSAGES CHART*************/

    /**************COUPLE WROTE MESSAGES CHART*************/
    var pieChartCanvas = $('#coupleWroteMessagesChart').get(0).getContext('2d')
    var pieChart       = new Chart(pieChartCanvas)
    var PieData        = [
      {
        value    : <?php echo ($coupletotalOne); ?>,
        color    : '#f56954',
        highlight: '#f56954',
        label    : 'To 1 person'
      },
      {
        value    : <?php echo ($coupletotalTwo); ?>,
        color    : '#00a65a',
        highlight: '#00a65a',
        label    : 'To 2 person'
      },
      {
        value    : <?php echo ($coupletotalMore); ?>,
        color    : '#b3975b',
        highlight: '#b3975b',
        label    : 'To 3 or more person'
      }
    ]
    var pieOptions     = {
      //Boolean - Whether we should show a stroke on each segment
      segmentShowStroke    : true,
      //String - The colour of each segment stroke
      segmentStrokeColor   : '#fff',
      //Number - The width of each segment stroke
      segmentStrokeWidth   : 2,
      //Number - The percentage of the chart that we cut out of the middle
      percentageInnerCutout: 50, // This is 0 for Pie charts
      //Number - Amount of animation steps
      animationSteps       : 100,
      //String - Animation easing effect
      animationEasing      : 'easeOutBounce',
      //Boolean - Whether we animate the rotation of the Doughnut
      animateRotate        : true,
      //Boolean - Whether we animate scaling the Doughnut from the centre
      animateScale         : false,
      //Boolean - whether to make the chart responsive to window resizing
      responsive           : true,
      // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
      maintainAspectRatio  : true,
      //String - A legend template
      legendTemplate       : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>'
    }
    //Create pie or douhnut chart
    // You can switch between pie and douhnut using the method below.
    pieChart.Doughnut(PieData, pieOptions)
    /**************COUPLE WROTE MESSAGES CHART*************/
    /****************BAR CHART***************/
    var country = [];
    var totalUsers = [];
      <?php if(count($country)>0){ 
              foreach ($country as $key=>$value) {
         ?>
              country.push("<?php echo $value['country_name']; ?>"); 
              totalUsers.push("<?php echo $value['total']; ?>");   
              console.log(country);
              console.log(totalUsers);
         <?php } } ?>

        var areaChartData = {
          labels: country,
          datasets: [
            {
              label: "Country",
              fillColor: "#b3975b",
              strokeColor: "#b3975b",
              pointColor: "#b3975b",
              pointStrokeColor: "#b3975b",
              pointHighlightFill: "#b3975b",
              pointHighlightStroke: "#b3975b",
              data: totalUsers
            }
          ]
        };
        var barChartCanvas = $("#membersCountryChart").get(0).getContext("2d");
        var barChart = new Chart(barChartCanvas);
        var barChartData = areaChartData;
        barChartData.datasets[0].fillColor = "#00a65a";
        barChartData.datasets[0].strokeColor = "#00a65a";
        barChartData.datasets[0].pointColor = "#00a65a";
        var barChartOptions = {
          //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
          scaleBeginAtZero: true,
          //Boolean - Whether grid lines are shown across the chart
          scaleShowGridLines: true,
          //String - Colour of the grid lines
          scaleGridLineColor: "rgba(0,0,0,.05)",
          //Number - Width of the grid lines
          scaleGridLineWidth: 1,
          //Boolean - Whether to show horizontal lines (except X axis)
          scaleShowHorizontalLines: true,
          //Boolean - Whether to show vertical lines (except Y axis)
          scaleShowVerticalLines: true,
          //Boolean - If there is a stroke on each bar
          barShowStroke: true,
          //Number - Pixel width of the bar stroke
          barStrokeWidth: 2,
          //Number - Spacing between each of the X value sets
          barValueSpacing: 5,
          //Number - Spacing between data sets within X values
          barDatasetSpacing: 1,
          //String - A legend template
          //legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
          //Boolean - whether to make the chart responsive
          responsive: true,
          maintainAspectRatio: true
        };

        barChartOptions.datasetFill = false;
        barChart.Bar(barChartData, barChartOptions);
  /****************BAR CHART NEXT 50***************/
  $('#next').click(function(){
    $('.first').hide();
    $('.second').show();
    var country = [];
    var totalUsers = [];
      <?php if(count($country100)>0){ 
              foreach ($country100 as $key=>$value) {
         ?>
              country.push("<?php echo $value['country_name']; ?>"); 
              totalUsers.push("<?php echo $value['total']; ?>");   
              console.log(country);
              console.log(totalUsers);
         <?php } } ?>

        var areaChartData = {
          labels: country,
          datasets: [
            {
              label: "Country",
              fillColor: "#b3975b",
              strokeColor: "#b3975b",
              pointColor: "#b3975b",
              pointStrokeColor: "#b3975b",
              pointHighlightFill: "#b3975b",
              pointHighlightStroke: "#b3975b",
              data: totalUsers
            }
          ]
        };
        var barChartCanvas = $("#membersCountryChart100").get(0).getContext("2d");
        var barChart = new Chart(barChartCanvas);
        var barChartData = areaChartData;
        barChartData.datasets[0].fillColor = "#00a65a";
        barChartData.datasets[0].strokeColor = "#00a65a";
        barChartData.datasets[0].pointColor = "#00a65a";
        var barChartOptions = {
          //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
          scaleBeginAtZero: true,
          //Boolean - Whether grid lines are shown across the chart
          scaleShowGridLines: true,
          //String - Colour of the grid lines
          scaleGridLineColor: "rgba(0,0,0,.05)",
          //Number - Width of the grid lines
          scaleGridLineWidth: 1,
          //Boolean - Whether to show horizontal lines (except X axis)
          scaleShowHorizontalLines: true,
          //Boolean - Whether to show vertical lines (except Y axis)
          scaleShowVerticalLines: true,
          //Boolean - If there is a stroke on each bar
          barShowStroke: true,
          //Number - Pixel width of the bar stroke
          barStrokeWidth: 2,
          //Number - Spacing between each of the X value sets
          barValueSpacing: 5,
          //Number - Spacing between data sets within X values
          barDatasetSpacing: 1,
          //String - A legend template
          //legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
          //Boolean - whether to make the chart responsive
          responsive: true,
          maintainAspectRatio: true
        };

        barChartOptions.datasetFill = false;
        barChart.Bar(barChartData, barChartOptions);
  })
  $('#next100').click(function(){
    $('.second').hide();
    $('.third').show();
    /****************BAR CHART NEXT 100***************/
    var country = [];
    var totalUsers = [];
      <?php if(count($country150)>0){ 
              foreach ($country150 as $key=>$value) {
         ?>
              country.push("<?php echo $value['country_name']; ?>"); 
              totalUsers.push("<?php echo $value['total']; ?>");   
              console.log(country);
              console.log(totalUsers);
         <?php } } ?>

        var areaChartData = {
          labels: country,
          datasets: [
            {
              label: "Country",
              fillColor: "#b3975b",
              strokeColor: "#b3975b",
              pointColor: "#b3975b",
              pointStrokeColor: "#b3975b",
              pointHighlightFill: "#b3975b",
              pointHighlightStroke: "#b3975b",
              data: totalUsers
            }
          ]
        };
        var barChartCanvas = $("#membersCountryChart150").get(0).getContext("2d");
        var barChart = new Chart(barChartCanvas);
        var barChartData = areaChartData;
        barChartData.datasets[0].fillColor = "#00a65a";
        barChartData.datasets[0].strokeColor = "#00a65a";
        barChartData.datasets[0].pointColor = "#00a65a";
        var barChartOptions = {
          //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
          scaleBeginAtZero: true,
          //Boolean - Whether grid lines are shown across the chart
          scaleShowGridLines: true,
          //String - Colour of the grid lines
          scaleGridLineColor: "rgba(0,0,0,.05)",
          //Number - Width of the grid lines
          scaleGridLineWidth: 1,
          //Boolean - Whether to show horizontal lines (except X axis)
          scaleShowHorizontalLines: true,
          //Boolean - Whether to show vertical lines (except Y axis)
          scaleShowVerticalLines: true,
          //Boolean - If there is a stroke on each bar
          barShowStroke: true,
          //Number - Pixel width of the bar stroke
          barStrokeWidth: 2,
          //Number - Spacing between each of the X value sets
          barValueSpacing: 5,
          //Number - Spacing between data sets within X values
          barDatasetSpacing: 1,
          //String - A legend template
          //legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
          //Boolean - whether to make the chart responsive
          responsive: true,
          maintainAspectRatio: true
        };

        barChartOptions.datasetFill = false;
        barChart.Bar(barChartData, barChartOptions); 
  })
  $('#prev100').click(function(){
    $('.first').show();
    $('.second').hide();
    /****************BAR CHART***************/
    var country = [];
    var totalUsers = [];
      <?php if(count($country)>0){ 
              foreach ($country as $key=>$value) {
         ?>
              country.push("<?php echo $value['country_name']; ?>"); 
              totalUsers.push("<?php echo $value['total']; ?>");   
              console.log(country);
              console.log(totalUsers);
         <?php } } ?>

        var areaChartData = {
          labels: country,
          datasets: [
            {
              label: "Country",
              fillColor: "#b3975b",
              strokeColor: "#b3975b",
              pointColor: "#b3975b",
              pointStrokeColor: "#b3975b",
              pointHighlightFill: "#b3975b",
              pointHighlightStroke: "#b3975b",
              data: totalUsers
            }
          ]
        };
        var barChartCanvas = $("#membersCountryChart").get(0).getContext("2d");
        var barChart = new Chart(barChartCanvas);
        var barChartData = areaChartData;
        barChartData.datasets[0].fillColor = "#00a65a";
        barChartData.datasets[0].strokeColor = "#00a65a";
        barChartData.datasets[0].pointColor = "#00a65a";
        var barChartOptions = {
          //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
          scaleBeginAtZero: true,
          //Boolean - Whether grid lines are shown across the chart
          scaleShowGridLines: true,
          //String - Colour of the grid lines
          scaleGridLineColor: "rgba(0,0,0,.05)",
          //Number - Width of the grid lines
          scaleGridLineWidth: 1,
          //Boolean - Whether to show horizontal lines (except X axis)
          scaleShowHorizontalLines: true,
          //Boolean - Whether to show vertical lines (except Y axis)
          scaleShowVerticalLines: true,
          //Boolean - If there is a stroke on each bar
          barShowStroke: true,
          //Number - Pixel width of the bar stroke
          barStrokeWidth: 2,
          //Number - Spacing between each of the X value sets
          barValueSpacing: 5,
          //Number - Spacing between data sets within X values
          barDatasetSpacing: 1,
          //String - A legend template
          //legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
          //Boolean - whether to make the chart responsive
          responsive: true,
          maintainAspectRatio: true
        };

        barChartOptions.datasetFill = false;
        barChart.Bar(barChartData, barChartOptions);
  })
  $('#prev150').click(function(){
    $('.second').show();
    $('.third').hide();
    var country = [];
    var totalUsers = [];
      <?php if(count($country100)>0){ 
              foreach ($country100 as $key=>$value) {
         ?>
              country.push("<?php echo $value['country_name']; ?>"); 
              totalUsers.push("<?php echo $value['total']; ?>");   
              console.log(country);
              console.log(totalUsers);
         <?php } } ?>

        var areaChartData = {
          labels: country,
          datasets: [
            {
              label: "Country",
              fillColor: "#b3975b",
              strokeColor: "#b3975b",
              pointColor: "#b3975b",
              pointStrokeColor: "#b3975b",
              pointHighlightFill: "#b3975b",
              pointHighlightStroke: "#b3975b",
              data: totalUsers
            }
          ]
        };
        var barChartCanvas = $("#membersCountryChart100").get(0).getContext("2d");
        var barChart = new Chart(barChartCanvas);
        var barChartData = areaChartData;
        barChartData.datasets[0].fillColor = "#00a65a";
        barChartData.datasets[0].strokeColor = "#00a65a";
        barChartData.datasets[0].pointColor = "#00a65a";
        var barChartOptions = {
          //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
          scaleBeginAtZero: true,
          //Boolean - Whether grid lines are shown across the chart
          scaleShowGridLines: true,
          //String - Colour of the grid lines
          scaleGridLineColor: "rgba(0,0,0,.05)",
          //Number - Width of the grid lines
          scaleGridLineWidth: 1,
          //Boolean - Whether to show horizontal lines (except X axis)
          scaleShowHorizontalLines: true,
          //Boolean - Whether to show vertical lines (except Y axis)
          scaleShowVerticalLines: true,
          //Boolean - If there is a stroke on each bar
          barShowStroke: true,
          //Number - Pixel width of the bar stroke
          barStrokeWidth: 2,
          //Number - Spacing between each of the X value sets
          barValueSpacing: 5,
          //Number - Spacing between data sets within X values
          barDatasetSpacing: 1,
          //String - A legend template
          //legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
          //Boolean - whether to make the chart responsive
          responsive: true,
          maintainAspectRatio: true
        };

        barChartOptions.datasetFill = false;
        barChart.Bar(barChartData, barChartOptions);
  })
    
       
  });
</script>
<style type="text/css">
  .dataTables_length, .dataTables_filter{ display: none; }
</style>