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

var line_chart_{!!$index!!};

function lineChart{!!$index!!}() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'X');
    data.addColumn('number', 'Dogs');
    data.addColumn('number', 'Cats');

    data.addRows({!!$data['popularity']!!});

    var options = {
        hAxis: {
            title: '{!!date('F Y',strtotime($data['date']))!!}'
        },
        vAxis: {
            title: 'Pet Popularity'
        },
        colors: ['#ff6384', '#36a2eb'],
        curveType: 'function',
        legend: { position: 'bottom' },
            orientation: 'vertical',
    };

    var line_chart_div_{!!$index!!} = document.getElementById('line_chart_div_{!!$index!!}');
    var chart = new google.visualization.LineChart(line_chart_div_{!!$index!!});

    google.visualization.events.addListener(chart, 'ready', function () {
        line_chart_{!!$index!!} = chart.getImageURI();
        $(".chart_div").append('<input type="hidden" name="line_chart[]"  value="' + line_chart_{!!$index!!} + '">');
    });
    chart.draw(data, options);
}
@endforeach
</script>
