グラフサンプル３（スマートデバイス）

1. はじめに

本サンプルは、スマートデバイス上に各種グラフをリアルタイムで表示する構成例です。

2. 利用条件

この機能を利用するには、スマートデバイスオプションの有償ライセンスが必要です。

3. サンプル機能の内容と確認ポイント

本サンプルでは、累計値、複数種類のグラフ、および内訳データ一覧をスマートデバイス上でリアルタイムに表示します。

設定の手順は次の通りです。

• 事前準備（採番設定）
  サンプルデータ用の採番「GRAPH_SAMPLE_007_ID」を設定します。
   
• Total（累計）単票ブロックの作成
  累計を表示する単票ブロックを作成します。
   
• 各種グラフブロックの作成
  以下のグラフを設定します。
  1. 横棒グラフ（年別区分別）
  2. ドーナツグラフ（区分別）
  3. 縦棒グラフ（クラス別区分比率）
  4. 折れ線エリアグラフ（日付別）
      
• リスト（内訳データ一覧）明細ブロックの作成
  グラフデータの内訳を表示する明細ブロックを設定します。
   
• リアルタイム更新／非同期通信に関わる設定
  「機能設定画面 ＞ 非同期通信」にて、リアルタイム更新およびデータ初期化を行うためのボタン動作を設定します。
  いずれの処理も「DB検索後JavaScript」で実装しています。
  1. リアルタイム更新
     「画面・データ更新」ボタンを 非表示 に設定し、3 秒ごとにランダムなサンプルデータを追加したうえで、グラフおよび一覧を再描画します。
     データの追加時には TALON.getNumberingData() を使用し、採番ID「GRAPH_SAMPLE_007_ID」による自動採番で一意キーを付与して登録しています。
  2. データ初期化
     ボタン押下により、表示中のデータを初期化します。
      
• 画面表示・レイアウト調整に関わる設定
  1. フリーレイアウト設定
     ・ ヘッダ部のデザイン調整
     ・ 累計ブロックのクラス名を設定
  2. CSS設定
     累計ブロック、ツールバー、ブロックタイトルのスタイル設定。

!++++

使用テーブルCreate文ファイル：SQLファイルZIP
※上記ファイルはMySQL環境のものになっております。ご利用の環境に合わせて修正しご利用ください。 

!----

🔍 確認いただけるポイント

1. Total（累計）ブロックが設定された条件で正しく集計されていること

2. グラフおよび一覧が指定のレイアウトで表示されていること

3. リアルタイム更新により、データが自動的に追加・再描画されること

4. 画面イメージ

使用したコード一覧

• TALON.getNumberingData()
• TALON.getDbConfig()
• TalonDbUtil.insert()
• TalonDbUtil.delete()
• TalonDbUtil.commit()