{% extends 'manager/base.html' %}
{% load static %}

{% block content %}
<div>
<br>
<br>
<br>
</div>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <div class="row">
        <div class="col-12 col-md-6 col-lg-6 col-xl-6">
            <div class="card">
                <div class="card-body">
                    <div class="chart-title">
                        <h4>Patient Total</h4>
                        <span class="float-right"><i class="fa fa-caret-up" aria-hidden="true"></i> 15% Higher than Last Month</span>
                    </div>
                    <div id="chart_div" style="width: 100%;"></div>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-lg-6 col-xl-6">
            <div class="card">
                <div class="card-body">
                    <div class="chart-title">
                        <h4>Patients In</h4>
                        <div class="float-right">
                            <ul class="chat-user-total">
                                <li><i class="fa fa-circle current-users" aria-hidden="true"></i>ICU</li>
                                <li><i class="fa fa-circle old-users" aria-hidden="true"></i> OPD</li>
                            </ul>
                        </div>
                    </div>
                    <canvas id="bargraph"></canvas>
                </div>
            </div>
        </div>
    </div>



{#    <div class="card-body" id="chart_div"></div>#}

    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number', 'Year');
        dataTable.addColumn('number', 'Sales');
        dataTable.addColumn('number', 'p2');
        // A column for custom tooltip content
        dataTable.addColumn({type: 'string', role: 'tooltip'});
        dataTable.addRows([
          [2011, 600, null,'$600K in our first year!'],
          [2011, 1500, null, 'Sunspot activity made this our best year ever!'],
          [2012, 800, null, '$800K in 2012.'],
          [2013, 1000, null, '$1M in sales last year.'],
          [2012, null, 1000, '$1M in sales last year.'],
          [2013, null, 1000, '$1M in sales last year.'],
        ]);

        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
        var options = { legend: 'none', hAxis: {format: ''} };
        chart.draw(dataTable, options);
      }
    </script>


{% endblock %}