how to show a graph in each row in usgin googlechart(or chart.js etc)

I've been trying to display a graph in each row inside one page using Google chart but I have no idea how to do that.

I get data from database when making a graph. putting aside if this code below is right, here's my image.

@foreach ($titles as $title)


<?php $getData = App\Graph::getNumber($title->id)?>

<div id="graph_bar" ></div>     ←graph


@endforeach

<script type="text/javascript">

    var barA= @json($getData->numberA);
    var barB = @json($getData->numberB);
    var barC= @json($getData->numberC);


    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawchart);

    function drawchart() {
        var data = google.visualization.arrayToDataTable([
            ['', '', '', ''],
            ['', barA, barB , barC],
        ]);
        var options = {
            isStacked: true,
            isStacked:'percent',
            legend: {position: 'none'},
            series: {
                0:{color:'red'},
                1:{color:'blue'},
                2:{color:'grey'},
            }
        };
        var chart = new google.visualization.BarChart(document.getElementById('graph_bar'));
        chart.draw(data, options);
    }
    $(window).resize(function(){
        drawchart();

    });

</script>

1.Is it possible to do that(display a graph in each row) in the first place? 2.I'd like to get ID from HTML at javascript.

if anyone knows anything about this, I'd appreciate if if you would help me out. thank you.

via Chebli Mohamed