本記事では、YellowfinでJavaScript(JS)グラフをコーディングおよびデバッグする際に役立つツールについて紹介します。今回ブラウザはGoogleChromeを使用しています。
ブラウザコンソール
ブラウザで右クリックをして、「Inspect(検証)」をクリックすることでアクセスできます。
こちらから、以下を実行することができます。
- Yellowfinが提供する利用可能なJavaScript オブジェクトの探索
- 作成したコードが生成するエラーの評価
デバッガー
これは、コードにブレークポイントを作成します。「preview(プレビュー)」タブに移動することで、Yellowfinがデータを関数に提供した後、コードは一時停止します。
つまり、コンソールに入力するだけで、「オプション」オブジェクトが探索可能になることを意味します。このリスト内の各オブジェクトをクリックすることで、Yellowfinが提供する利用可能なすべてのオブジェクトの名前や階層を展開して、表示できます。
コード内のこれらのアイテムにアクセスするには、階層を下に移動します。例えば、これは「booking step」カラム(列)の最初のロウ(行)のロウバージョンを示しています。
options.dataset.data.booking_step[0].raw_data
Div内にグラフを配置
chartDivに要素を配置するのは難しい場合もありますが、次のヒントが役に立ちます。
まず、グラフに新しい要素を作成します。
chartDiv.append('<div id="my_div" class="mydiv">') chartDiv.append('<table id="my_table" class="mytable">)
div内で最初のオブジェクトを参照します(D3で必要になることが多い)
d3.select($chartDiv[0])
JavaScript エラー
ブラウザコンソールには、グラフを実行しようとして生成されたあらゆるエラーが表示されます。JavaScriptはとてもよく使用されており、ドキュメントも非常に充実しています。
上図の例では、processDataの呼び出しにシンプルな入力ミスがあります。
Console.log
コンソールに直接入力することができます。すべてのエラーが行番号を含むわけではないため、これはどこでコードが停止したのか、またはデータ操作の結果を表示するときに有効です。
for (var i=0; i < dataset.booking_step.length; i++) { my_math=parseFloat(dataset.invoiced_amount[i].raw_data)-parseFloat(dataset.invoice_estimate[i].raw_data) console.log("row: "+i); console.log(my_math); }
こちらの例では、基本的な数学の結果を各行に出力しています。