Google Chart を JSON から作成

Django

ここでのポイントは Step1, Step2, Step3 を入れ子構造にして、$.ajax の内側に処理を記述してしまうこと。そうしないと $.ajax の処理が終わる前に、次の処理が走ってしまいます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

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

var data, options, charts; 

function drawChart() {

  // Step1. data の取得
  $.ajax({ url: YOUR_JSON_DATA_URL, dataType:'json'}).done(function(tmp_data){
    data = google.visualization.arrayToDataTable(tmp_data);

    // Step2. options の取得
    $.ajax({ url: YOUR_JSON_OPTIONS_URL, dataType:'json'}).done(function(tmp_options){
      options = tmp_options;

      // Step3. グラフの作成
      chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    });
  });
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

　

◯ 苦しんだところ

この $.ajax 関数が Javascript 初心者のワイには一番えげつない。最初に見た時に「ファ！」ってなった。理解はしてないけど、とりあえず処理を覚えたさ。

  • ajax の実行結果を無名関数の引数 tmp_data に代入: どうやってるの？泣
  • done 関数の引数に無名関数を設定: なんで引数に関数を指定するん？もっと他に方法なかったん？泣 関数を引数に指定するのは GoF ストラテジパターンでよく見かけたけど、こんな指定して即実行みたいな、引数の中に実行後の処理を記述するような使い方は、初めてですんなり入ってこなかった泣
  • done(function{})の記述の処理が完了する前に、それ以降の処理が開始泣 普通前の処理が終わる前に次の処理が開始しないやん。そんなの許したらプログラム成り立ちませんやん。これだけ例外ってことでええんかな。

　

◯ Handsontable とか使ってて思ったこと（関係ないけど）

データ本体を格納している配列をいじると、動的に表も更新された。Javascript こんなこともできるんか...。もう本当に自分の頭の中にあるプログラミングと全然ちゃうな...。表は、どうやって検知してるんやろ...？

◯ 参考サイト

jsonファイルから散布図を作成 deffered を使う方法。
deferred.resolve( ) dfr.resolve() 処理を完了する -> dfr.done() が呼ばれるみたいな。
Deferredを用いた書き方 Deferred の利点はネストが深くならないことかな
実行順番を保障する方法