{{-- result goes heare --}}
<div id="table_compare" class="row"> </div>
<!-- MONTHLY PERFORMANCE -->
 <div class="card" id="dailyPerformance">
    <div class="card-header">
        <h3 class="box-title"> MONTH </h3>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-12">
                <h4>Amount</h4>
                <!-- DAILY PERFORMANCE AMOUNT-->
                <div class="chartamonthDaysInMonth" id="chartamonthDaysInMonth">
                    <canvas id="amonthDaysInMonth" style="height:200px"></canvas>
                </div>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-md-12">
                <h4>No of Transactions</h4>
                <!--    DAILY PERFORMANCE TRANSACTIONS-->
                <div class="chart">
                    <canvas id="noOfTransactionDaysInMonth" style="height:200px"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- QUARTER PERFORMANCE -->
<div class="card" id="quarterPerformance">
    <div class="card-header">
        <h3 class="box-title">QUARTER </h3>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-12">
                <div>
                    <canvas id="amountWeekInQuarter" style="height:200px"></canvas>
                </div>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-md-12">
                <div class="chart">
                    <canvas id="noOfTransactionWeeksInQuarter" style="height:200px"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- YEAR PERFORMANCE -->
<div class="card" id="yearPerformance">
    <div class="card-header">
        <h3 class="box-title">YEAR </h3>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-12">
                <!--    DAILY PERFORMANCE AMOUNT     -->
                <div class="chart">
                    <canvas id="amountMonthly" style="height:200px"></canvas>
                </div>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-md-12">
                <!--    DAILY PERFORMANCE TRANSACTIONS-->
                <div class="chart">
                    <canvas id="noOfTransactionsMonthly" style="height:200px"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>