【パブリッシャー】ゲージグラフを並列に表示してみる

今回は、[Sharperlight](https://sharperlight.jp/)パブリッシャーで公開クエリ(Webレポート)を作成し、ゲージグラフを並列に表示する方法を紹介したいと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/500940b8-bd1f-c142-6fa7-5ca8930f8b33.png)
### サンプルデータの作成 ###
では、[Sharperlight](https://sharperlight.jp/)アプリケーションメニューからパブリッシャーを起動し、Webレポートを新規作成します。
次に**クエリーを編集**ボタンを利用して、クエリビルダを起動し、使用する参考データを作成します。
製品には**システム**、テーブルには**カスタム定義のデータセット**を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/35d1d325-ce0e-70f1-aca8-84b90ef811aa.png)
データセットを定義フィルターで、実際に使用するデータセットを定義します。値フィールドをダブルクリックすると、ダイアログがテンプレートと共に表示されるので、以下のように定義し直してみます。**OK**を押し保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/f4814f23-349c-a8a7-9079-d52b9f7e02eb.png)
**選択領域**は、このようになると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/4fc65dd0-6d6d-a392-9095-7eb94e3eb358.png)
### フィールドの出力領域への設定と名前の変更 ###
選択領域の**コード**と**値**を出力領域にドラッグ＆ドロップして設定します。
名前の変更は、出力領域に設定された各フィールドを選択し、右クリックメニューを開き、表示されるテキストフィールドに新しい名前を入力します。ここでは、`コード`と`値カウント`にします。
(**名前**は、このフィールドに対する参照符号としての性格を有します)
プレビューで出力を確認します。通常どおりにデータが縦列に表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/37a70171-df5c-a438-68d1-23839d90970b.png)
### 出力形態を並列にする ###
次に、出力形態を並列にしてみます。クエリビルダに戻り、選択領域から**コード**をフィルター領域にドラッグ＆ドロップします。フィルター値は`<ALL>`と記入します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/3c39ccbe-94ff-89ee-6966-e9b58d574b5a.png)
先ず、出力領域の**コード**を削除します。
**値**フィールドをダブルクリックし、出力オプションダイアログを開きます。**関数**タブに移動し、**出力項目にフィルターを適用**オプションの設定を行います。**コード**にチェックを入れ、下部の**動的出力として設定**ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/971bb4cd-386d-0ed6-72ff-b90afcb7a350.png)
**一般**タブに行き、**合計行**オプションを`None`にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/c7030dcc-5867-9909-db98-69af1ebc37fd.png)
プレビューで出力を確認してみましょう。今度は、コード列が作成され、値が並列に表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/18cd1613-29e2-8ac6-3288-4b028f2cc17c.png)
### ゲージグラフの表示 ###
今度は、値をゲージグラフに置き換えてみます。
クエリビルダに戻り、出力領域の右クリックメニューから拡張表現を追加します。
拡張表現のダイアログが表示されたら、検索フィールドに`gauge`と入力し、ケージグラフのテンプレートを探します。
検索結果から、今回はType6を選択してみましょう。ダブルクリックすることで、テンプレートがエディタに転送されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/6e1a3e18-53c0-b360-d678-4a11ffa33af9.png)
検索フィールドの文字列を削除し、転送されたテンプレートの`{yourValue}`を選択します。関数一覧から`現在の行`->`# 値 {%値カウント}`をダブルクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/c29fe02a-0698-e194-e86a-32ebb2b370f9.png)
`{yourValue}`が`{%値カウント}`で置き換えれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/dd39ffe8-d2ee-f02e-39c3-3ed931be9b7d.png)
ダイアログ上部の**データ型**オプションを`HTML`に設定します。
**関数**タブに移動し、**出力項目にフィルターを適用**オプションの設定を行います。**コード**にチェックを入れ、下部の**動的出力として設定**ボタンをクリックします。
**一般**タブでは、説明を変更します。テキストフィールド右のカスタマイズオプションボタンで一覧を表示し、下記のオプションを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/5cfd9eee-6857-ba47-94df-15d78376e229.png)
拡張表現の定義を**OK**ボタンで保存し、プレビューしてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/11cacb49-4cb1-c6af-d197-be7402c58818.png)
このように出力されると思います。値フィールドも拡張表現も並列に表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/0da56d25-d4ae-86a2-e476-67896ca59bc1.png)
クエリビルダを**OK**ボタンで保存終了し、Webレポートの定義ダイアログに戻り、**コード**と**グループ**を記入後、**適用**ボタンで保存します。[Sharperlight](https://sharperlight.jp/)サービスを開始して、Webレポートの定義ダイアログ上の**ビュー**ボタンを使用して、Webブラウザで確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/5565bd52-6f26-9c79-12fe-febbfb1bce54.png)
ゲージグラフが並列に表示されました。
でも、各左横の値列が不要ですね。それとゲージグラフのタイトルも初期値のままです。変更してみましょう。
クエリビルダに戻ります。先ず、出力領域の値フィールドを右クリックメニューを利用して、非表示にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/021bf144-a3a7-05c2-ec07-3e77182c7b65.png)
次に、拡張表現のオプションダイアログを開きます。構文の`"Your Title"`を選択し、関数一覧から`動的出力値ラベル`->`DynamicOutputValue()`を選択し、ダブルクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/4ce7e9a4-b110-dee7-1051-5d2152629f40.png)
**OK**ボタンで拡張表現オプションを保存し、クエリビルダも**OK**ボタンで保存終了し、Webレポートの定義ダイアログ上では**適用**ボタンをクリックします。**ビュー**ボタンを使用して、Webブラウザで再確認します。
値列も消え、それぞれのタイトルもコードに置き換わっていることが確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/75309da5-2582-43e5-4de7-db5095d4da57.png)
表の列タイトルとゲージタイトルが重複しているのが気に入りませんね。表の列タイトルを非表示にしてみましょう。
Webレポートの定義ダイアログのテーブルタブに移動し、ヘッダー行を表示オプションのチェックを外し、**適用**ボタンで保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/2a653e06-bd94-effd-fd62-6b05ec63ca38.png)
先ほどのWebページを更新してみます。見事に列タイトルが消えましたね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/40a8f8f0-c46e-efdc-64e3-c37552d20331.png)
表の枠線が気に入らない場合は、Webレポートの定義ダイアログのテーブルタブにオプションが在りますので試してみてくださいね。


:postbox:[お問い合わせ](https://sharperlight.jp/about-us/contact-us/)