<style type="text/css">
@foreach($elements as $index => $data)
#bar_chart_div_{!!$index!!}{
    visibility: hidden;
    height: 0px;
}
@endforeach
</style>
<script type="text/javascript">
@foreach($elements as $index => $data)
//barchart
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(barChart{!!$index!!});

var bar_chart_{!!$index!!};

function barChart{!!$index!!}() {

    var data = google.visualization.arrayToDataTable({!!$data['elements']!!});

    var options = {
        title: "{!!date('F Y',strtotime($data['date']))!!}",
        bar: {groupWidth: '100px'},
        legend: 'none',
    };
    var bar_chart_div_{!!$index!!} = document.getElementById('bar_chart_div_{!!$index!!}');
    var chart = new google.visualization.BarChart(bar_chart_div_{!!$index!!});
    google.visualization.events.addListener(chart, 'ready', function () {
        bar_chart_{!!$index!!} = chart.getImageURI();
        $(".chart_div").append('<input type="hidden" name="bar_chart[]"  value="' + bar_chart_{!!$index!!} + '">');
    });

    chart.draw(data, options);
}

@endforeach
</script>
