<div class="col-md-6 text-center">
    <div id="yearly_overview">
        <h4>@lang('app.yearly_overview')</h4>
        <canvas id="yearly_overview_inner"></canvas>
    </div>
</div>
<div class="col-md-6 text-center">
    <div id="payment_overview">
        <h4>@lang('app.payment_overview')</h4>
        <canvas id="payment_overview_inner"></canvas>
    </div>
</div>
<script>
    var income_data     = '{{ $yearly_income }}';
    var invoices_data    = '{{ $yearly_invoices }}';
    income_data = JSON.parse(income_data.replace(/&quot;/g, '\"'));
    invoices_data = JSON.parse(invoices_data.replace(/&quot;/g, '\"'));
    var lineChartData   = {
        labels : ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
        datasets : [{
            label               : "Payments",
            fillColor           : "rgba(14,172,147,0.1)",
            strokeColor         : "rgba(14,172,147,1)",
            pointColor          : "rgba(14,172,147,1)",
            pointStrokeColor    : "#fff",
            pointHighlightFill  : "rgba(54,73,92,0.8)",
            pointHighlightStroke: "rgba(54,73,92,1)",
            data                : income_data
        },
        {
            label               : "Invoices",
            fillColor           : "rgba(244,167,47,0)",
            strokeColor         : "rgba(244,167,47,1)",
            pointColor          : "rgba(217,95,6,1)",
            pointStrokeColor    : "#fff",
            pointHighlightFill  : "rgba(54,73,92,0.8)",
            pointHighlightStroke: "rgba(54,73,92,1)",
            data                : invoices_data
        }]
    };
    var pieData = [
        {
            value: '{{ $total_payments }}',
            color:"#2FB972",
            highlight: "#37D484",
            label: "Amount Paid"
        },
        {
            value: '{{ $total_outstanding }}',
            color:"#C84135",
            highlight: "#EA5548",
            label: "Outstanding Amount"
        }
    ];
    $(function() {
        Chart.defaults.global.scaleFontSize = 12;
        var chartDiv = document.getElementById("yearly_overview_inner").getContext("2d");
        lineChart = new Chart(chartDiv).Line(lineChartData, {
            responsive: true
        });
        $('#yearly_overview').append( lineChart.generateLegend() );
        var chartDiv = document.getElementById("payment_overview_inner").getContext("2d");
        pieChart = new Chart(chartDiv).Pie(pieData, {
            responsive : true
        });
        $('#payment_overview').append( pieChart.generateLegend() );
    });
</script>