リストをデータとして使用するCognos内のJavascriptテーブル

Question

コード内のデータテーブルからチャートを生成するJavascriptがあります。

私たちは、データをプルするプロセスを自動化するためにCognosを使用することを検討しています。本質的には、Report Studio内のリストを使用して、下のJavascriptコードのテーブルセクションに値を設定します。

テーブルの前後にあるコードのリストの前後にHTMLアイテムを追加しようとしましたが、ページが空白として表示されました。

ご協力いただければ幸いです。 ありがとうございます

<script type="text/javascript"  src="https://www.gstatic.com/charts/loader.js"></script> 

<script type="text/javascript"> 
    google.charts.load("current", {packages:["timeline"]}); 
    google.charts.setOnLoadCallback(drawChart); 
    function drawChart() { 

var container = document.getElementById('example5.1'); 
var chart = new google.visualization.Timeline(container); 
var dataTable = new google.visualization.DataTable(); 
dataTable.addColumn({ type: 'string', id: 'Room' }); 
dataTable.addColumn({ type: 'string', id: 'Name' }); 
dataTable.addColumn({ type: 'date', id: 'Start' }); 
dataTable.addColumn({ type: 'date', id: 'End' }); 
dataTable.addRows([ 

['Job1', '', new Date(0,0,0,18,0,0), new Date(0,0,0,18,0,1) ], 
['Job2', '', new Date(0,0,0,18,3,0), new Date(0,0,0,18,3,7) ], 
['Job3', '', new Date(0,0,0,17,30,0), new Date(0,0,0,18,0,39) ], 
['Job4', '', new Date(0,0,0,18,0,0), new Date(0,0,0,18,10,19) ], 
['Job5', '', new Date(0,0,0,18,0,0), new Date(0,0,0,18,0,22) ] 


    ]); 

var options = { 
    timeline: { colorByRowLabel: true } 
}; 

chart.draw(dataTable, options); 
    } 

</script> 

<div id="example5.1" style="height: 500px;" style="width: 100px;"></div> 

Answer 1

私たちはこれを行う方法を考え出しました。

まず、JavaScriptをシングルトン内のHTMLアイテム内に配置する必要がありました。 JSを使用したHTML項目がシングルトンになったら、Cognosレポートの実行時にChartに（静的テーブルを使用して）表示させることができました。

Cognos QueryのデータからJS内のテーブルを実行したいので、既存のJSをHTMLから削除し、JSの最初の部分をSingleton内のHTML項目に配置しました。

JSの最初の部分：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 

<script type="text/javascript"> 
    google.charts.load("current", {packages:["timeline"]}); 
    google.charts.setOnLoadCallback(drawChart); 
    function drawChart() { 

var container = document.getElementById('example5.1'); 
var chart = new google.visualization.Timeline(container); 
var dataTable = new google.visualization.DataTable(); 
dataTable.addColumn({ type: 'string', id: 'Room' }); 
dataTable.addColumn({ type: 'string', id: 'Name' }); 
dataTable.addColumn({ type: 'date', id: 'Start' }); 
dataTable.addColumn({ type: 'date', id: 'End' }); 
dataTable.addRows([ 

次の場所HTML項目の右側にリピータ。 Repeater内にHTMLアイテムを配置します。このHTMLアイテムのプロパティで、ソースタイプをデータアイテム値に変更します。データ項目値で、表示するデータ項目をJSの表セクション内に配置します。

注：元のJSのテーブルと同じフォーマットでデータアイテムをフォーマットするようにしてください。テーブルを作成するためのデータ項目コードの概要を以下に示します。リピータ内のHTMLで[FinalDataItem]を使用します。

[ConcatenatedDataItem]

'['''+[JobName]+''''+', ''' + 
[ExecutionStatus] + '''' 
+', new Date(0,0,0,' 
+cast(Datepart({HH}, [StartTime]) as nvarchar(10)) + ',' 
+ cast(DatePart({MI}, [StartTime]) as nvarchar(10)) + ',' + cast(DatePart({SS}, [StartTime]) as nvarchar(10)) + '), new Date(0,0,0,' + cast(Datepart({HH}, [EndTime]) as nvarchar(10)) + ',' 
+ cast(DatePart({MI}, [EndTime]) as nvarchar(10)) + ',' + cast(DatePart({SS}, [EndTime]) as nvarchar(10)) + ') ]' 

各行は、我々は以下の方法を用い、最後の行を除いて、終了時にコンマを必要とするので。

1）[RowNum]：実行カウント（[YourConcatenatedDataItem]）を使用して各行に数値を与えるためのデータ項目を作成します。

2）[MaxRowNum]：最大（[RowNumberDataItem] FOR REPORT）を使用して、レポートの最大行番号を取得する別のデータ項目を作成します。両方の集計関数を自動に設定します。

3）[FinalDataItem]：新しいデータアイテムを作成します。この新しいデータ項目では、最後の行を除いて、すべての行に最後にカンマがあるようにします。 [RowNum] <> [MaxRowNum] THEN [YourConcatenatedDataItem] + '、' ELSE [YourConcatenatedDataItem] ENDを使用します。

レポートに戻って、Repeaterの右側に別のHTMLアイテムを追加することをお勧めします。このHTMLアイテムでは、JSの最後の部分をその中に配置します。

]); 

var options = { 
    timeline: { colorByRowLabel: true } 
}; 

chart.draw(dataTable, options); 
    } 

</script> 

<div id="example5.1" style="height: 500px;" style="width: 100px;"></div>