dbois/application/views/reports/monthlyemployeehours/_employeehour_view.php

<div class="row">
    <div class="col-md-12">
        <h2 style="margin-top:0">uren per project</h2>
        <table class="table table-condensed table-bordered">
            <thead>
            <tr class="table-info">
                <th>project</th>
                <th class="align-right">tarief</th>
                <th class="align-right">jan</th>
                <th class="align-right">feb</th>
                <th class="align-right">mrt</th>
                <th class="align-right">apr</th>
                <th class="align-right">mei</th>
                <th class="align-right">juni</th>
                <th class="align-right">juli</th>
                <th class="align-right">aug</th>
                <th class="align-right">sep</th>
                <th class="align-right">okt</th>
                <th class="align-right">nov</th>
                <th class="align-right">dec</th>
                <th class="align-right">tot jaar</th>
                <th class="align-right">tot overig</th>
                <th class="align-right">grand total</th>
            </tr>
            </thead>
            <tbody data-bind="foreach:myData">
            <tr>
                <td>
                    <span data-bind="text:projectname"></span>
                </td>
                <td class="align-right">
                    <span data-bind="text:tarif"></span>
                </td>
                <td class="align-right">
                    <span data-bind="text:januari"></span>
                </td>
                <td class="align-right">
                    <span data-bind="text:februari"></span>
                </td>
                <td class="align-right">
                    <span data-bind="text:maart"></span>
                </td>
                <td class="align-right">
                    <span data-bind="text:april"></span>
                </td>
                <td class="align-right">
                    <span data-bind="text:mei"></span>
                </td>
                <td class="align-right">
                    <span data-bind="text:juni"></span>
                </td>
                <td class="align-right">
                    <span data-bind="text:juli"></span>
                </td>
                <td class="align-right">
                    <span data-bind="text:augustus"></span>
                </td>
                <td class="align-right">
                    <span data-bind="text:september"></span>
                </td>
                <td class="align-right">
                    <span data-bind="text:oktober"></span>
                </td>
                <td class="align-right">
                    <span data-bind="text:november"></span>
                </td>
                <td class="align-right">
                    <span data-bind="text:december"></span>
                </td>
                <th class="align-right">
                    <span data-bind="text:totalyear"></span>
                </th>
                <th class="align-right">
                    <span data-bind="text:totalotheryears"></span>
                </th>
                <th class="align-right">
                    <span data-bind="text:totalhours"></span>
                </th>
            </tr>
            </tbody>
            <tfoot>
            <tr class="table-info">
                <th>totaal</th>
                <th>&nbsp;</th>
                <th class="align-right">
                    <span data-bind="text:totalJanuari "></span>
                </th>
                <th class="align-right">
                    <span data-bind="text:totalFebruari "></span>
                </th>
                <th class="align-right">
                    <span data-bind="text:totalMaart "></span>
                </th>
                <th class="align-right">
                    <span data-bind="text:totalApril "></span>
                </th>
                <th class="align-right">
                    <span data-bind="text:totalMei "></span>
                </th>
                <th class="align-right">
                    <span data-bind="text:totalJuni "></span>
                </th>
                <th class="align-right">
                    <span data-bind="text:totalJuli "></span>
                </th>
                <th class="align-right">
                    <span data-bind="text:totalAugustus"></span>
                </th>
                <th class="align-right">
                    <span data-bind="text:totalSeptember "></span>
                </th>
                <th class="align-right">
                    <span data-bind="text:totalOktober "></span>
                </th>
                <th class="align-right">
                    <span data-bind="text:totalNovember "></span>
                </th>
                <th class="align-right">
                    <span data-bind="text:totalDecember "></span>
                </th>
                <th class="align-right">
                    <span data-bind="text:totalTotal().toFixed(1)"></span>
                </th>
                <th class="align-right">
                    <span data-bind="text:totalTotalOtheryears().toFixed(1)"></span>
                </th>
                <th class="align-right">
                    <span data-bind="text:(totalTotalOtheryears() + totalTotal()).toFixed(1)"></span>
                </th>
            </tr>
            </tfoot>
        </table>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="graph-holder">
            <canvas data-bind="attr:{id: 'hours-per-month-' + slug}" id="" height="300"></canvas>
        </div>
    </div>
    <div class="col-md-6">
        <div class="graph-holder">
            <canvas data-bind="attr:{id: 'hours-per-project-' + slug}" id="" height="300"></canvas>
        </div>
    </div>
</div>