{{breadcrums 'Home' 'Report'}}
<div class="app-content container center-layout mt-2">
<div class="content-wrapper">
<div class="content-body">
        <!-- Pie charts section start -->
        <section id="chartjs-pie-charts">
          <div class="row">
            <!-- Simple Pie Chart -->
            <div class="col-md-12 col-sm-12">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title">Users </h4>
                </div>
                <div class="card-content collapse show">
                    <div id="piechart"></div>
                </div>
              </div>
            </div>
          </div>
        </section>
        <!-- // Pie charts section end -->
		<!-- Pie charts section start -->
        <section id="chartjs-pie-charts">
          <div class="row">
            <!-- Simple Pie Chart -->
            <div class="col-md-12 col-sm-12">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title">Loans </h4>
                </div>
                <div class="card-content collapse show">
                    <div id="piechart2"></div>
                </div>
              </div>
            </div>
          </div>
        </section>
        <!-- // Pie charts section end -->
      </div>
</div>
</div>

<script type="text/javascript" src="/js/loader.js"></script>
<!-- <script type="text/javascript" src="https://www.google.com/jsapi"></script> -->
<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

// Draw the chart and set the chart values
function drawChart() {
  var count = '{{this.activecount}}'
  var decount = '{{this.deactivecount}}'
  var data = google.visualization.arrayToDataTable([
  ['Task', 'Hours per Day'],
  ['Active Users', parseInt(count)],
  ['Deactive users', parseInt(decount)]
]);

  // Optional; add a title and set the width and height of the chart
  var options = {'width':'100%', 'height':700};

  // Display the chart inside the <div> element with id="piechart"
  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
}
</script>
<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

// Draw the chart and set the chart values
function drawChart() {
  var loan = '{{this.loanno}}'
  var deloan = '{{this.deloanno}}'
  var data = google.visualization.arrayToDataTable([
  ['Task', 'Hours per Day'],
  ['Approved Loans', parseInt(loan)],
  ['Disapproved Loans', parseInt(deloan)]
]);

  // Optional; add a title and set the width and height of the chart
  var options = {'width':'100%', 'height':700};

  // Display the chart inside the <div> element with id="piechart"
  var chart = new google.visualization.PieChart(document.getElementById('piechart2'));
  chart.draw(data, options);
}
</script>