google chartが反映されたらというトリガーの作成方法

開発環境

rails 5.1
jQuery rails 4.3

質問内容

google chartを読み込んでそのグラフの内容に基づいた位置の吹き出しをつけたいと思っています。
その位置を取得するのにjsで取得していますが、google chartsが反映するまで時間がかかるので取得値がundefinedになってしまいます。
このような場合はどうトリガーを設定すれば良いでしょうか？

Google Chartsの表示方法

ヒストグラムを作成しています。
https://www.google.com/jsapiを読み込み以下のようにjsを記述しています。

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

function drawHistogram(){
    // 表示するデータの設定
    var data = new google.visualization.DataTable();
    data.addColumn('string', '商品');
    data.addColumn('number', '品数');
    data.addColumn({type: 'string', role: 'style'});

    // この辺のデータコードは書き換えています。
    data.addRows([
        ["item1", data1],
        ["item2", data2],
        ["item3", data3],
        ["item4", data4]
    ]);

  // グラフの設定
    var option = {
        width: '100%',
        height: '100%'
    };

    var chart = new google.visualization.ComboChart(document.getElementById('gchart'));
    chart.draw(data, option);
}
}


$(function(){
    // google chartの反映待ちで遅らせたい↓↓↓
    setTimeout(function(){
        var position = $('.position').position();
        $('.balloon').css('left', position.left);
    }, 2000);
});

試したこと

setTimeOutでだいたい読み込むくらいの時間に設定してやるとうまくは行くのですが環境によっては30秒くらいに設定しないと反映されないものもあってアンチパターンかと思ったのでボツにしました。

mix-peach

2019/02/05 02:47

$('.position')の取得対象は、どこで登場するのでしょうか？あと、チャートの反映に時間がかかる理由も分かると、現象が再現しやすいのですが・・

satorushimo

2019/02/05 06:58 編集

.positionは都合よく変えたのですが、chartsのバー要素である `rect`のpositionを取得しています。時間がかかる理由は普通にロードが遅いからです。下記のサイトもpie chartが表示されるまでに時間がかかっています。 https://developers.google.com/chart/?hl=ja

行動規範の内容に同意します

回答1件

ベストアンサー

「チャートの用意が出来たよ」的なイベントがあるので、そちらを使ってみるのはどうですか？

こんな感じです。

javascript
1  var chart = new google.visualization.ComboChart(document.getElementById('gchart'));
2  google.visualization.events.addListener(chart, 'ready',
3    function() {
4      //試しに全てのrectの位置をログに出力してみた・・
5      $('#gchart').find('rect').each(function(){
6      	console.log($(this).position());
7      });
8    }
9  );
10  chart.draw(data, option);