Library

はじめに

Status BoardではCSVもしくはJSON形式のデータを元に、美しいグラフを生成することが可能です。

CSV形式

CSV形式のファイルを作成する為のもっとも簡単な方法は、ExcelやNumbersなどの表計算ソフトを使用することです。以下の様にシンプルな表を準備します:

csv-demo

これを元にグラフが生成されます:

softDrinkGraph

このようなグラフをStatus Boardに表示する為に必要なことは、1）表データをCSV形式で保存し、2）保存されたCSV形式のファイルをWebサーバーに設置するだけです。

CSV形式で保存する

  • Numbersの場合: ファイル > 書き出す… > CSV… を選択します。

注意: 日本語を利用している場合は、テキストエンコーディングをUTF-8に設定します。

準備されるCSVデータについて: CSVファイル内の区切り文字はカンマもしくはセミコロンのいずれかです。例え ば千をあらわす際の1.000や1,000のように、数値内での桁を区切るためには使 用しないでください。使用された場合、正しく解析されません。

Status boardにグラフパネルを追加する

スクリーン左上の"ギア"アイコンをタップすると編集モードになります。以下のパネルを任意の場所にドラッグします。サイズを変更することも可能です。

graphIcon1

データを設置する

ファイルとして存在しているデータをStatus Boardがアクセス可能な場所に設置す る必要があります。以下の2つの方法があります:

Dropboxに設置する

もし既にDropboxをお使いでしたら、この方法が最もシンプルです。

  1. iPadにDropboxAppをインストールします。
  2. 編集モードで、配置された表パネルをタップします。すると設定が開きます。
  3. Dropboxをタップします。
  4. するとDropbox.appが開き、Status Boardからのアクセスを許可するかが訊ねられます。（Status Boardは許可されたファイルのみにアクセスします。許可されていない他のファイルにアクセスすることは決してありません。）
  5. 許可後、再びStatus Boardが開きます。Dropboxフォルダをブラウズし、使用したいグラフデータのファイル名をタップします。

以上です！Status Boardはグラフを描画します。Dropbox上のデータを編集すると、 Status Boardにも反映されます。

Webサーバに設置する

この方法ではWebサーバに関する知識が必要です。また、ダイナミックに生成される データを活用する場合は必ずこの方法での設置が必要となります。

  1. 任意のWebサーバに設置します。
  2. 編集モード中にグラフパネルの設定を開きます。
  3. URLをタップします。
  4. URL欄にデータファイルの設置されているリンクURLを入力します。
  5. 保存をタップします。

以上です！サーバ上のデータファイルを更新すると、程なくしてStatus Boardのパネル上でも更新されます。

CSV形式でのテクニック集

生成されるグラフのカラーを指定するにはColorsカラムを追加し、指定します。利用可能なカラーはRed, Blue, Green, Yellow, Orange, Purple, AquaそしてPinkです。

csvColors

合計数を表示することも可能です。表示したい場合は Totals というカラムを追加してください。（数値は入力する必要はありません。Status Boardが計算し結果をグラフに表示します。）

csvTotals

JSON形式

自作のグラフを準備する際、CSV形式はシンプルですがより洗練された複雑なデータからグラフを生成したいと思うかも知れません。そんな時はJSON形式で準備すること も可能です。JSON形式のサンプルは以下です:

{
  "graph" : {
    "title" : "Soft Drink Sales",
    "datasequences" : [
      {
        "title" : "X-Cola",
        "datapoints" : [
          { "title" : "2008", "value" : 22 },
          { "title" : "2009", "value" : 24 },
          { "title" : "2010", "value" : 25.5 },
          { "title" : "2011", "value" : 27.9 },
          { "title" : "2012", "value" : 31 },
        ]
      },
      {
        "title" : "Y-Cola",
        "datapoints" : [
          { "title" : "2008", "value" : 18.4 },
          { "title" : "2009", "value" : 20.1 },
          { "title" : "2010", "value" : 24.8 },
          { "title" : "2011", "value" : 26.1 },
          { "title" : "2012", "value" : 29 },
        ]
      }
    ]
  }
}

JSON形式のテクニック集

更新の感覚

あなたのグラフを参照する頻度を設定します:

{
  "graph" : {
    "title" : "Soft Drink Sales",
    "refreshEveryNSeconds" : 120,
    "datasequences" : [
      {
        "title" : "X-Cola",
        "datapoints" : [
        ...

このパラメータはオプションです。特に記述されない場合、デフォルト値は120秒です。（将来のバージョンStatus Boardでは変更されるかもしれません。）設定可能な最小値は15です。

カラー

datasequenceオブジェクトに"color"を追加します:

{
  "title" : "X-Cola",
  "color" : "red",
  "datapoints" : [
    { "title" : "2008", "value" : 22 },
    { "title" : "2009", "value" : 24 },
    { "title" : "2010", "value" : 25.5 },
    { "title" : "2011", "value" : 27.9 },
    { "title" : "2012", "value" : 31 },
  ]
}

利用可能なカラー値はyellow, green, red, purple, blue, mediumGray, pink, aqua, orangeそしてlightGrayです。

合計

graphオブジェクトtotal属性を追加します:


{
  "graph" : {
    "title" : "Soft Drink Sales",
    "total" : true,
    "datasequences" : [
...

グラフ形式

Status Boardでは線グラフまたは棒グラフでグラフを生成でき、ベストな方が自動的に選択されます。しかし強制的にどちらかのグラフ形式を指定することも可能です。そ の場合は以下の様に記述します:


{
  "graph" : {
    "title" : "Soft Drink Sales",
    "total" : true,
    "type" : "bar",
    "datasequences" : [
    ...

グラフ形式の値はbar（棒グラフ）がline（線グラフ）です。

Y軸値

グラフのY軸の起点を指定したり、最大値を指定したりすることも可能です:


{
  "graph" : {
    "title" : "Soft Drink Sales",
    "yAxis" : {
      "minValue" : 50,
      "maxValue" : 150
    },
    ...

minValue（最小値）、maxValue（最大値）属性を利用し、数値で指定してください。（両数値を同じ値で指定することは推奨しません。）

単位を指定する

グラフに単位などの文字列を追加することも可能です。下記の例では値の前に “$” を、 値の後に “%” を表示します:

{
  "graph" : {
    "title" : "Soft Drink Sales",
    "yAxis" : {
      "units" : {
      "prefix" : "$",
      "suffix" : "%"
    },
    ...

（上記の例では値の前後に単位が表示されますが、通常はどちらか一方のみが利用され、 同時に表示されるケースはあまり無いでしょう。）

数値の桁を変更する

グラフに含まれる情報が何千や何万といった数値であるとStatus Boardが検知すると、 自動的に桁を揃えてグラフを生成し、ラベルを追加します。（例えば4,6000,000は4.6と短縮され（百万）というラベルが追加されます。）

このように変更しない場合は、以下の様にします:

{
  "graph" : {
    "title" : "Soft Drink Sales",
    "yAxis" : {
      "scaleTo" : 1
    },
    ...

千桁や百万桁に指定したい場合は1000および1000000と記述します

軸ラベルを隠す

Y軸ラベルを隠したい場合は以下の様にします:

{
  "graph" : {
    "title" : "Soft Drink Sales",
    "yAxis" : {
      "hide" : true
    },
    ...

X軸のラべルを隠すにはxAxis属性を使用します。

常にX軸ラベルを表示する

Status Boardは自動的に、ラべルの描画範囲を確保するために一部のラべルを省略することがあります。例えば月別の集計グラフの場合、ラべルを毎月分表示すると視認性 が悪くなるため、自動的に奇数月のみ表示する様な調整を行っています。 しかし、常にすべてのラべルを表示したい場合があるかも知れません。その際は以下の様にします:

{
  "graph" : {
    "title" : "Soft Drink Sales",
    "xAxis" : {
      "showEveryLabel" : true
    },
    ...

エラーレポート

グラフパネルにエラーが起こった際、レポートを受け取りたい場合は以下の様に記述します:

{
  "graph" : {
    "title" : "Soft Drink Sales",
    "error" : {
      "message" : "Message displayed on panel customizer"
    },
    "datasequences" : [
    ...

Other attributes can be listed in the "graph" object, but if the "error" object is present they will be ignored. 他の属性も"graph"オブジェクトに記述することが可能ですが"error"オブジェクトがある場合は無視されます。

グラフをURLで共有する

完成したグラフパネルを顧客やユーザに共有しましょう。以下のフォーマットでリンクを作成することでStatus Boardに登録されます:

panicboard://?url=[%-encoded graph data url]&panel=graph&sourceDisplayName=[your %-encoded company name]

引数sourceDisplayNameはオプションです。

このフォーマットのリンクをiPad上でクリックすると、Status Boardが起動しグラフパネルをインストールするかを訊ねるダイアログが表示されます。

デバッグする

自身で作成されたパネルをデバッグするには、Status Boardが編集モードでない状態の時にクワッドタップ（4回連続タップ）します。すると、サーバからStatus Boardに送られたHTMLが表示されます。外部ディスプレイを使用している場合は、でバッグウインドウも外部ディスプレイにデバッグウインドウも外部ディスプレイに表示されます。

パネルを強制的に更新するには、Status Boardが編集モードでない状態の時にトリプルタップ（3回連続タップ）します。（リストパネルの場合は、下へのプル操作でリロードされます。）

最終更新日: 2018年04月04日