analytics/templates/ps/cogadmin/dojo_chart_viewer.xts

<?xml version="1.0" encoding="UTF-8"?>
<!--
    Licensed Materials - Property of IBM

    IBM Cognos Products: cogadmin

    (C) Copyright IBM Corp. 2005, 2013

    US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
-->

<!--
Copyright (C) 2008 Cognos ULC, an IBM Company. All rights reserved.
Cognos (R) is a trademark of Cognos ULC, (formerly Cognos Incorporated).
-->
<xts:morphlet version="1.0" xmlns:xts="http://developer.cognos.com/schemas/xts/" messageBase="messages/cogadminuimsgs.xml">

	<xts:block id="decode" processor="XSLT" type="exec" mode="interpret" nodelist="env">
		<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xts="http://developer.cognos.com/schemas/xts/" xmlns:xtsext="xalan://com.cognos.xts.ext.XTSExt" exclude-result-prefixes="xts xtsext">
			<xsl:output method="xml" version="1.0" encoding="UTF-8" indent="no"/>
			<xsl:template match="/">
				<xts:sequence>
					<xts:replace select="/root/env/param[@name = 'frag-state']">
						<param name="state">
							<xsl:value-of select="xtsext:base64decode(/root/env/param[@name = 'frag-state'], true())" disable-output-escaping="yes"/>
						</param>
					</xts:replace>
				</xts:sequence>
			</xsl:template>
		</xsl:stylesheet>
	</xts:block>

	<xts:block id="response" type="exec" mode="interpret" processor="XSLT" dependency="decode">
		<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
			xmlns:xts="http://developer.cognos.com/schemas/xts/" xmlns:xtsext="xalan://com.cognos.xts.ext.XTSExt"
			xmlns:xos="http://developer.cognos.com/schemas/xts/output/" exclude-result-prefixes="xts xtsext xos">
			<xsl:output method="xml" version="1.0" encoding="UTF-8" indent="no" />
			<!--
			The dojo chart viewer is a fragment using Dojo toolkit to render simple charts(bars or columns), the fragment is expecting a JSON from /root/env/param[@name='source'] as it's feed, the format of JSON is like this:
			{
			    "type": "Bars", 
			    "titles": {
			        "xTitle": "Monitoring Activities",
			        "yTitle": "Number of Activities"
			    },
			    "rows": [
			        {
			            "label": "Pending",
			            "value": "1"
			        },
			        {
			            "label": "Executing",
			            "value": "3"
			        },
			        {
			            "label": "Waiting",
			            "value": "2"
			        },
			        {
			            "label": "Suspended",
			            "value": "4"
			        }
			    ]
			}
			-->
			<xsl:template match="/">
				<xsl:variable name="source">
					<xsl:choose>
						<xsl:when test="/root/env/param[@name='source']">
							<xsl:value-of select="xtsext:javascriptencode(string(/root/env/param[@name='source']))"/>
						</xsl:when>
						<xsl:when test="/root/env/param[@name='state']">
							<xsl:value-of select="xtsext:javascriptencode(string(/root/env/param[@name='state']))"/>
						</xsl:when>
					</xsl:choose>
				</xsl:variable>
				<xts:sequence>
					<xts:append select="/root/output">
						<xos:part>
							<xos:entityHeader>
								<xos:param name="Content-Type">text/xml</xos:param>
							</xos:entityHeader>
							<xos:entityBody>
								<fragment>
									<info>
										<title>Dojo Chart Viewer</title>
									</info>
									<meta>
										<modes>view</modes>
										<publishedEvents>
										</publishedEvents>
									</meta>
									<library type="text/javascript" href="$WEB$/dojo16/dojo/dojo.js"/>
									<css type="text/css" media="all" href="$WEB$/dojo16/dijit/themes/tundra/tundra.css"/>
									<markup>
										<mimeType>text/html</mimeType>
										<markupXml>
											<script type="text/javascript">
												dojo.require("dojox.charting.Chart2D");
												dojo.require("dojox.charting.action2d.Highlight");
												dojo.require("dojox.charting.action2d.Tooltip");
												dojo.require("dojox.charting.themes.BlueDusk");
												dojo.require("dojox.secure.capability");
												
												dojo.addOnLoad(function(){
													var DEFAULT_WIDTH = 750,	//for the sake of resolution 1024x768
														HEIGHT_PER_ROW = 30,
														X_AXIS_HEIGHT = 40,
														TITLE_HEIGHT = 15,
														NUMBER_OF_TICKS = 3,
														MIN_X = 15;
													
													var source = '<xsl:value-of select="$source"/>';
													//pass in the text of a script. If it passes and it can be eval'ed, it should be safe. 
													// remove 2 known unicode characters that fail in validate() - but only for the validate call
													safeSource = source.replace(/\uff3f|\uff5c/g, '');
													dojox.secure.capability.validate(safeSource,[],{}); 

													var data = dojo.fromJson(source);
													var rows = data.rows;
													var chart = new dojox.charting.Chart2D("chart_THIS_",{fill:"transparent"});
													
													//inject the tundra css into body class, before we have an elegant solution
													var body = document.getElementsByTagName("body")[0];
												    var currClass = dojo.attr( body, "class" ) || "";
												    if (currClass.indexOf ("tundra") == -1){
														dojo.attr( body, "class", currClass + " tundra" );
													}
													
													//prepare the data needed by chart object
													var preChart = {
														maxValue : MIN_X,
														totalValue : 0,
														labels : [{text:"",value:0}],
														series : []
													};
																										
													var funcs = [];
													_addTraverseRowsFunc = function (func) {
														if (dojo.isFunction(func)){
															funcs.push (func);
														}
													};
													
													//maxValue
													_addTraverseRowsFunc(function(row){
														var absValue = Math.abs(row.value);
														if (absValue &gt; preChart.maxValue){
															preChart.maxValue = absValue;
														}													
													});
													
													getMaxLabel= function(min,max) {
														var MOD = 15;
														if (max &lt;= min) return min;
														
														var delta = max % MOD;
														if (delta == 0) {
															return max;
														} else {
															return max + MOD - delta;
														}
													};
													//totalValue
													_addTraverseRowsFunc(function(row){
														preChart.totalValue += Math.abs(row.value);										
													});
													//labels
													_addTraverseRowsFunc(function(row,index){
														preChart.labels.push({text:row.label,value:index+1});										
													});
													//series
													_addTraverseRowsFunc(function(row){
														preChart.series.push(parseInt(row.value));									
													});
													//walk the rows and apply the functions registered.
													dojo.forEach(funcs,function(item){
														dojo.forEach(rows,item);
													});
																										
													//adjust the fragment container to a proper height
													var height = rows.length * HEIGHT_PER_ROW + X_AXIS_HEIGHT;
													dojo.byId("_THIS_content").style.height = height + TITLE_HEIGHT;	
													dojo.byId("title_THIS_").innerHTML = '<xts:string id="IDS_BARCHART_TOTAL" encode="javascript"/>: ' + preChart.totalValue;
													dojo.byId("title_THIS_").style.width = DEFAULT_WIDTH;
													dojo.byId("chart_THIS_").style.whiteSpace = 'nowrap';
															
													var maxLabel = getMaxLabel(MIN_X,preChart.maxValue);				
													chart.addAxis("x", {
														fixLower: "major", 
														fixUpper: "major", 
														minorTicks: false, 
														microTicks: false, 
														majorTickStep : maxLabel/NUMBER_OF_TICKS,
														max: maxLabel,
														min: 0,
														font: "normal normal normal 8pt tahoma"
													}).addAxis("y", {
														vertical: true, 
														fixLower: "none", 
														fixUpper: "none", 
														minorTicks: false, 
														microTicks: false, 
														labels: preChart.labels,
														font: "normal normal normal 8pt tahoma"
													}).addPlot("default", {
														type: data.type,
														gap: 3
													}).addPlot("grid", {
														type: "Grid",
														hMinorLines: false,
														hMajorLines: false,
														vMinorLines: false,
														vMajorLines: true
													}).setTheme(dojox.charting.themes.BlueDusk);
													chart.addSeries("Series 1",preChart.series);
													var highlight = new dojox.charting.action2d.Highlight(chart, "default");
													var tooltip = new dojox.charting.action2d.Tooltip(chart, "default");
													chart.resize(DEFAULT_WIDTH,height);
												});
											</script>
											<div id="title_THIS_" style="text-align:center; width:700px; font-weight:bold;"/>
											<div id="chart_THIS_"/>
										</markupXml>
									</markup>
									<state>
										<xsl:value-of select="xtsext:base64encode($source, true())"/>
									</state>
								</fragment>
							</xos:entityBody>
						</xos:part>
					</xts:append>
				</xts:sequence>
			</xsl:template>
		</xsl:stylesheet>
	</xts:block>
</xts:morphlet>