行ごとにグラフ(google chart もしくはchart.js等）を表示させたい

やりたいこと

今１ページの中で、
ループを使って行ごとにグラフを表示させたいと思っています。

↓イメージ

・行を作成するうえでのデータはデータベースからとってきます

やってみたこと

あっているかどうかは別として、イメージとしてはこんな感じです(グラフはgoogle chartを利用）

@foreach ($titles as $title)
{{$title->title_name}}

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

<div id="graph_bar" ></div>     ←グラフ出したい


@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>

以上のようにやってみましたが、
複数行すべてグラフが表示されません。

知りたいこと

そもそもループの中でグラフを表示させることは可能なのでしょうか？
また可能な場合、どのようにしたらよいのでしょうか。。？
ご教示宜しくお願いいたします。

Lhankor_Mhy

2020/12/22 05:27

PHPはよくわからないので、回答欄ではなくてこちらで。 id属性は一意的ですので、かぶってはいけません。 https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/id ですので、foreachの中で <div id="graph_bar" ></div> を回してはいけないと思いますし、 new google.visualization.BarChart(document.getElementById('graph_bar')); は、全て同じ要素を一つだけ返すと思います。