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 放在 Singleton 中的 HTML 项中。一旦带有 JS 的 HTML 项目位于单例中，我们就可以在运行 Cognos 报告时显示图表（使用静态表格）。

由于我们希望 JS 中的表从 Cognos Query 中的数据运行，我们从 HTML 中删除了现有的 JS，并将 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 项的右侧放置一个中继器。在中继器中放置一个 HTML 项。在此 HTML 项的属性中，将 Source Type 更改为 Data Item Value。在数据项值中，将您希望显示的数据项放在 JS 的表格部分中。

注意：确保使用与原始 JS 中的表格相同的格式来格式化数据项。下面概述了我们用于制作表格的数据项代码。在中继器中使用 HTML 中的 [FinalDataItem]。

[连接数据项]

'['''+[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]：创建一个数据项，使用 running-count([YourConcatenatedDataItem]) 为每一行赋予一个数字。

2) [MaxRowNum]：使用Maximum([RowNumberDataItem] FOR REPORT)创建另一个数据项以获取报表的最大行数。将两个聚合函数都设置为自动。

3) [FinalDataItem]：创建一个新的数据项。在这个新的数据项中，我们将使其每行末尾都有一个逗号，除了最后一行。使用 CASE WHEN [RowNum] [MaxRowNum] THEN [YourConcatenatedDataItem]+',' ELSE [YourConcatenatedDataItem] END。

返回报表，您将希望在中继器右侧添加另一个 HTML 项目。在这个 HTML 项目中，您将在其中放置 JS 的最后一部分。

  ]);

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

chart.draw(dataTable, options);
  }

</script>

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