analytics/templates/ps/qs/chart.xts

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

BI and PM: qs

(C) Copyright IBM Corp. 2001, 2017

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/QSRVUITextPL.xml,messages/portal.xml,messages/portalRL.xml" requiredCapability="canUseQueryStudio">
	<xts:block id="page" type="exec" mode="output" processor="XSLT" mimeType="text/html">
		<!-- get the debug logic sheet -->
		<xts:logicsheet path="logicsheets/debuglogic.xslt"/>
		<!-- get the new theme stuff -->
		<xts:logicsheet path="logicsheets/portal.xsl"/>
		<xts:logicsheet path="qs/logicsheets/dialogs.xsl"/>
		<xts:logicsheet path="logicsheets/presentation/dialog/framework.xsl"/>
		<xts:logicsheet path="logicsheets/presentation/layout.xsl"/>
		<xts:logicsheet path="logicsheets/presentation/dialog/presentation.xsl"/>
		<xts:logicsheet path="logicsheets/presentation/controls/framework.xsl"/>
		<xts:logicsheet path="logicsheets/presentation/controls/presentation.xsl"/>
		<xts:logicsheet path="logicsheets/cm-logic.xsl"/>
		<!-- apply the form logic -->
		<xts:logicsheet path="logicsheets/formlogic.xslt"/>
		<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xts="http://developer.cognos.com/schemas/xts/" xmlns:lyt="http://developer.cognos.com/schemas/xts/logicsheets/xslt/presentation/layout/" xmlns:pf="http://developer.cognos.com/schemas/xts/pf" xmlns:dp="http://developer.cognos.com/schemas/xts/logicsheets/xslt/presentation/dialog/presentation/" xmlns:df="http://developer.cognos.com/schemas/xts/logicsheets/xslt/presentation/dialog/framework/" xmlns:cp="http://developer.cognos.com/schemas/xts/logicsheets/xslt/presentation/controls/presentation/" xmlns:cf="http://developer.cognos.com/schemas/xts/logicsheets/xslt/presentation/controls/framework/" xmlns:dbg="http://developer.cognos.com/schemas/xts/logicsheets/xslt/debug/" xmlns:qsdlg="http://developer.cognos.com/schemas/xts/logicsheets/xslt/qs/dialog/" xmlns:xtsext="xalan://com.cognos.xts.ext.XTSExt" exclude-result-prefixes="xsl xts lyt pf dp df cp cf dbg qsdlg xtsext">
			<xsl:output method="html" version="1.0" encoding="UTF-8" indent="no"/>
			<!-- add any theme variables -->
			<df:variables/>
			<pf:variables/>
			<xsl:key name="param-name" match="/root/env/param" use="@name"/>
			<!-- start the output -->
			<xsl:template match="/root">
				<xsl:variable name="chartType" select="key('param-name','chartType')"/>
				<xsl:variable name="chartSubtype" select="key('param-name','chartSubtype')"/>
				<xsl:variable name="showChartValues" select="key('param-name','showChartValues')"/>
				<xsl:variable name="showTable" select="key('param-name','showTable')"/>
				<dp:page>
					<dp:script>


						<script type="text/javascript">
							<xsl:attribute name="src"><xsl:value-of select="$webRoot"/>/qs/layout.js</xsl:attribute>
							<xsl:text/>//<xsl:text/>
						</script>
						<script type="text/javascript">
							<xsl:attribute name="src"><xsl:value-of select="$webRoot"/>/qs/classes/CDialogManager.js</xsl:attribute>
							<xsl:text/>//<xsl:text/>
						</script>
						<script type="text/javascript">&lt;!--

var goDialogManager = new CDialogManager();
var iconArray = new Array();
for (var i=0; i &lt; 25; i++)
	iconArray[i] = new Image(48,48);

var path = "<xsl:value-of select="$webRoot"/>/qs/images/chart/";
iconArray[0].src = path + "area_standard.gif";
iconArray[1].src = path + "area_stacked.gif";
iconArray[2].src = path + "area_percent.gif";
iconArray[3].src = path + "area_3d.gif";
iconArray[4].src = path + "bar_standard.gif";
iconArray[5].src = path + "bar_stacked.gif";
iconArray[6].src = path + "bar_percent.gif";
iconArray[7].src = path + "column_standard.gif";
iconArray[8].src = path + "column_stacked.gif";
iconArray[9].src = path + "column_percent.gif";
iconArray[10].src = path + "column_3d.gif";
iconArray[11].src = path + "line_standard.gif";
iconArray[12].src = path + "line_stacked.gif";
iconArray[13].src = path + "line_percent.gif";
iconArray[14].src = path + "line_3d.gif";
iconArray[15].src = path + "pie_flat.gif";
iconArray[16].src = path + "pie_percent.gif";
iconArray[17].src = path + "pie_3d.gif";
iconArray[18].src = path + "radar_standard.gif";
iconArray[19].src = path + "radar_stacked.gif";
iconArray[20].src = path + "columnline_standard.gif";
iconArray[21].src = path + "columnline_stacked.gif";
iconArray[22].src = path + "columnline_percentage.gif";
iconArray[23].src = path + "columnline_3d.gif";
iconArray[24].src = path + "pie_percent_2d.gif";

var chartMap = new Array();
chartMap['_default'] = new Array();
chartMap['_default'][1] = "standard";
chartMap['_default'][3] = "stacked";
chartMap['_default'][2] = "percent";
chartMap['_default'][4] = "3DAxis";
chartMap['pie'] = new Array();
chartMap['pie'][1] = "standard";
chartMap['pie'][3] = "3DAxis";
chartMap['pie'][2] = "percent2D";
chartMap['pie'][4] = "percent";


function execute()
{
	var cf = getConfigFrame();
	var style;
	for (var i = 0; i &lt; 4; i++)
	{
		if (document.f.chartStyle[i].checked)
		{
			style = document.f.chartStyle[i].value;
			break;
		}
	}
	var chart = (document.f.chartTypeRadio[0].checked) ? "table" : document.f.chartTypeSelect.value;
	var tempChart = chart;
	if (typeof chartMap[chart] == "undefined")
		tempChart = '_default';

	style = chartMap[tempChart][style];

	cf.addColumnsForReselection();
	cf.submitChart(chart,style,document.f.chartTable[0].checked,document.f.showChartValues.checked);
}

function init()
{
	changeIcons(true);

	var chartType = document.f.chartTypeSelect.value;
	if (typeof chartMap[chartType] == "undefined")
		chartType = "_default";
	var subType = "<xsl:value-of select="xtsext:javascriptencode(string($chartSubtype))"/>";

	var i = 0;
	for (var j = 1; j &lt;= 4; j++)
	{
		if (chartMap[chartType][j] == subType)
		{
			if (j == 1)
				i = 0;
			else if (j == 2)
				i = 2;
			else if (j == 3)
				i = 1;
			else if (j == 4)
				i = 3;
			break;
		}
	}
	document.f.chartStyle[i].checked = true;

	attachMouseEvents();
	var cf=getConfigFrame?getConfigFrame():null;if (cf &amp;&amp; cf.showDialogFrame) cf.showDialogFrame(375);
}

function disableCtrls(bDisable)
{
	document.f.showChartValues.disabled = bDisable;
	document.f.chartTable[0].disabled = bDisable;
	document.f.chartTable[1].disabled = bDisable;
}

function changeIcons(bInit)
{
	if (!bInit)
		document.f.chartTypeRadio[1].checked= true;

	if (document.f.chartTypeSelect.value == "table")
	{
		document.f.chartTypeRadio[0].checked = true;
		disableCtrls(true);
	}
	else
		disableCtrls(false);

	if (document.f.chartTypeSelect.value == "bar")
	{
		document.f.image1.src = iconArray[4].src;
		document.f.image3.src = iconArray[5].src;
		document.f.image2.src = iconArray[6].src;
	}
	else if (document.f.chartTypeSelect.value == "column")
	{
		document.f.image1.src = iconArray[7].src;
		document.f.image3.src = iconArray[8].src;
		document.f.image2.src = iconArray[9].src;
		document.f.image4.src = iconArray[10].src;
	}
	else if (document.f.chartTypeSelect.value == "pie")
	{
		document.f.image1.src = iconArray[15].src;
		document.f.image3.src = iconArray[17].src;
		document.f.image2.src = iconArray[24].src;
		document.f.image4.src = iconArray[16].src;
	}
	else if (document.f.chartTypeSelect.value == "radar")
	{
		document.f.image1.src = iconArray[18].src;
		document.f.image3.src = iconArray[19].src;
	}
	else if (document.f.chartTypeSelect.value == "columnline")
	{
		document.f.image1.src = iconArray[20].src;
		document.f.image3.src = iconArray[21].src;
		document.f.image2.src = iconArray[22].src;
		document.f.image4.src = iconArray[23].src;
	}
	else if (document.f.chartTypeSelect.value == "line")
	{
		document.f.image1.src = iconArray[11].src;
		document.f.image3.src = iconArray[12].src;
		document.f.image2.src = iconArray[13].src;
		document.f.image4.src = iconArray[14].src;
	}
	else if (document.f.chartTypeSelect.value == "area3D")
	{
		document.f.image1.src = iconArray[0].src;
		document.f.image3.src = iconArray[1].src;
		document.f.image2.src = iconArray[2].src;
		document.f.image4.src = iconArray[3].src;
	}

	if (document.f.chartTypeSelect.value == "bar")
	{
		if (document.f.chartStyle[3].checked)
			document.f.chartStyle[0].checked = true;
	}
	else if (document.f.chartTypeSelect.value == "radar")
	{
		if (document.f.chartStyle[2].checked || document.f.chartStyle[3].checked)
			document.f.chartStyle[0].checked = true;
	}

	if (document.f.chartTypeSelect.value == "pie")
	{
		document.getElementById("style2").removeChild(document.getElementById("style2").firstChild);
		document.getElementById("style2").appendChild(document.createTextNode("<xts:string id="CHART_STYLE_PERCENT_PIE_2D" encode="javascript"/>"));
		document.getElementById("style3").removeChild(document.getElementById("style3").firstChild);
		document.getElementById("style3").appendChild(document.createTextNode("<xts:string id="CHART_STYLE_PIE_3D" encode="javascript"/>"));
		document.getElementById("style4").removeChild(document.getElementById("style4").firstChild);
		document.getElementById("style4").appendChild(document.createTextNode("<xts:string id="CHART_STYLE_PERCENT_PIE_3D" encode="javascript"/>"));
	}
	else
	{
		document.getElementById("style2").removeChild(document.getElementById("style2").firstChild);
		document.getElementById("style2").appendChild(document.createTextNode("<xts:string id="CHART_STYLE_PERCENTAGE" encode="javascript"/>"));
		document.getElementById("style3").removeChild(document.getElementById("style3").firstChild);
		if (document.f.chartTypeSelect.value == "radar")
		{
			document.getElementById("style3").appendChild(document.createTextNode("<xts:string id="CHART_STYLE_STACKED_AREA" encode="javascript"/>"));
		}
		else
		{
			document.getElementById("style3").appendChild(document.createTextNode("<xts:string id="CHART_STYLE_STACKED" encode="javascript"/>"));
		}
		document.getElementById("style4").removeChild(document.getElementById("style4").firstChild);
		if (document.f.chartTypeSelect.value == "columnline" || document.f.chartTypeSelect.value == "area3D")
		{
			document.getElementById("style4").appendChild(document.createTextNode("<xts:string id="CHART_STYLE_COLUMN_LINE_3D" encode="javascript"/>"));
		}
		else
		{
			document.getElementById("style4").appendChild(document.createTextNode("<xts:string id="CHART_STYLE_3D" encode="javascript"/>"));
		}
	}

	document.getElementById("span1").style.visibility = (document.f.chartTypeRadio[0].checked) ? "hidden": "visible";
	document.getElementById("span3").style.visibility = (document.f.chartTypeRadio[0].checked) ? "hidden": "visible";
	document.getElementById("span2").style.visibility = (document.f.chartTypeRadio[0].checked || document.f.chartTypeSelect.value == "radar") ? "hidden": "visible";
	document.getElementById("span4").style.visibility = (document.f.chartTypeRadio[0].checked || document.f.chartTypeSelect.value == "bar" || document.f.chartTypeSelect.value == "radar") ? "hidden": "visible";
}
                        //--&gt;</script>
							<script type="text/javascript">
								<xsl:attribute name="src"><xsl:value-of select="$webRoot"/>/qs/dialogs/executeButton.js</xsl:attribute>
								<xsl:text/>//<xsl:text/>
							</script>
					</dp:script>
					<form name="f" method="POST" onsubmit="return false;">
						<table border="0" cellspacing="0" cellpadding="0" height="100%" width="100%">
							<tr>
								<td width="100%" height="0%">
									<!-- dialog header -->
									<dp:header help="false">
										<!-- header titles -->
										<dp:title>
											<xts:string id="CHART_TITLE"/>
										</dp:title>
										<!-- close link for the header -->
										<dp:close>
											<a href="javascript:getConfigFrame().hideDialogFrame()">
												<dp:closeMarker/>
											</a>
										</dp:close>
										<!-- description (hint text) -->
										<dp:description>
											<xts:string id="CHART_DESCRIPTION"/>
										</dp:description>
									</dp:header>
								</td>
							</tr>
							<tr>
								<td width="100%" height="100%" valign="top">
									<!-- layout -->
									<lyt:layout style="2" border="no">
										<lyt:section>
											<dp:input>
												<dp:section1>
													<xts:string id="CHART_TYPE"/>
												</dp:section1>
												<dp:section2>
													<dp:choice>
														<dp:section1>
															<input name="chartTypeRadio" type="radio" value="table" onClick="disableCtrls(true);"/>
														</dp:section1>
														<dp:section2>
															<xts:string id="DIALOG_NONE"/>
														</dp:section2>
														<dp:section1>
															<input name="chartTypeRadio" type="radio" value="true" checked="" onClick="disableCtrls(false);">
																<xsl:if test="not( $chartType )">
																	<xsl:attribute name="checked">true</xsl:attribute>
																</xsl:if>
															</input>
														</dp:section1>
														<dp:section2>
															<select name="chartTypeSelect" selectedParam="$chartType" onChange="changeIcons(false);">
																<qsdlg:option>
																	<qsdlg:value>column</qsdlg:value>
																	<qsdlg:label>CHART_TYPE_COLUMN</qsdlg:label>
																</qsdlg:option>
																<qsdlg:option>
																	<qsdlg:value>bar</qsdlg:value>
																	<qsdlg:label>CHART_TYPE_BAR</qsdlg:label>
																</qsdlg:option>
																<qsdlg:option>
																	<qsdlg:value>pie</qsdlg:value>
																	<qsdlg:label>CHART_TYPE_PIE</qsdlg:label>
																</qsdlg:option>
																<qsdlg:option>
																	<qsdlg:value>line</qsdlg:value>
																	<qsdlg:label>CHART_TYPE_LINE</qsdlg:label>
																</qsdlg:option>
																<qsdlg:option>
																	<qsdlg:value>columnline</qsdlg:value>
																	<qsdlg:label>CHART_TYPE_COLUMN_LINE</qsdlg:label>
																</qsdlg:option>
																<qsdlg:option>
																	<qsdlg:value>area3D</qsdlg:value>
																	<qsdlg:label>CHART_TYPE_AREA</qsdlg:label>
																</qsdlg:option>
																<qsdlg:option>
																	<qsdlg:value>radar</qsdlg:value>
																	<qsdlg:label>CHART_TYPE_RADAR</qsdlg:label>
																</qsdlg:option>
															</select>
														</dp:section2>
														<dp:section3>
															<div style="height:10px"/>
															<table border="0" cellspacing="0" cellpadding="3">
																<tr>
																	<td width="125px" id="span1" style="visibility:hidden;">
																		<table border="0" cellspacing="0" cellpadding="0">
																			<tr>
																				<td style="vertical-align:middle">
																					<input type="radio" name="chartStyle" value="1" onClick="changeIcons(false);"/>
																				</td>
																				<td>
																					<table border="0" cellspacing="0" cellpadding="0">
																						<tr>
																							<img name="image1">
																								<xsl:attribute name="src"><xsl:value-of select="$webRoot"/>/qs/images/chart/column_standard.gif</xsl:attribute>
																							</img>
																						</tr>
																						<tr>
																							<td id="style1" class="formText">
																								<xts:string id="CHART_STYLE_STANDARD"/>
																							</td>
																						</tr>
																					</table>
																				</td>
																			</tr>
																		</table>
																	</td>
																	<td width="125px" id="span3" style="visibility:hidden;">
																		<table border="0" cellspacing="0" cellpadding="0">
																			<tr>
																				<td style="vertical-align:middle">
																					<input type="radio" name="chartStyle" value="3" onClick="changeIcons(false);"/>
																				</td>
																				<td>
																					<table border="0" cellspacing="0" cellpadding="0">
																						<tr>
																							<img name="image3">
																								<xsl:attribute name="src"><xsl:value-of select="$webRoot"/>/qs/images/chart/column_percent.gif</xsl:attribute>
																							</img>
																						</tr>
																						<tr>
																							<td id="style3" class="formText">
																								<xts:string id="CHART_STYLE_STACKED"/>
																							</td>
																						</tr>
																					</table>
																				</td>
																			</tr>
																		</table>
																	</td>
																</tr>
																<tr>
																	<td width="125px" id="span2" style="visibility:hidden;">
																		<table border="0" cellspacing="0" cellpadding="0">
																			<tr>
																				<td style="vertical-align:middle">
																					<input type="radio" name="chartStyle" value="2" onClick="changeIcons(false);"/>
																				</td>
																				<td>
																					<table border="0" cellspacing="0" cellpadding="0">
																						<tr>
																							<img name="image2">
																								<xsl:attribute name="src"><xsl:value-of select="$webRoot"/>/qs/images/chart/column_stacked.gif</xsl:attribute>
																							</img>
																						</tr>
																						<tr>
																							<td id="style2" class="formText">
																								<xts:string id="CHART_STYLE_PERCENTAGE"/>
																							</td>
																						</tr>
																					</table>
																				</td>
																			</tr>
																		</table>
																	</td>
																	<td width="125px" id="span4" style="visibility:hidden;">
																		<table border="0" cellspacing="0" cellpadding="0">
																			<tr>
																				<td style="vertical-align:middle">
																					<input type="radio" name="chartStyle" value="4" onClick="changeIcons(false);"/>
																				</td>
																				<td>
																					<table border="0" cellspacing="0" cellpadding="0">
																						<tr>
																							<img name="image4">
																								<xsl:attribute name="src"><xsl:value-of select="$webRoot"/>/qs/images/chart/column_3d.gif</xsl:attribute>
																							</img>
																						</tr>
																						<tr>
																							<td id="style4" class="formText">
																								<xts:string id="CHART_STYLE_3D"/>
																							</td>
																						</tr>
																					</table>
																				</td>
																			</tr>
																		</table>
																	</td>
																</tr>
															</table>
														</dp:section3>
													</dp:choice>
												</dp:section2>
											</dp:input>
										</lyt:section>
										<lyt:section>
											<dp:choice>
												<dp:section1>
													<input name="showChartValues" type="checkbox" value="true">
														<xsl:if test="$showChartValues ='true'">
															<xsl:attribute name="checked">true</xsl:attribute>
														</xsl:if>
													</input>
												</dp:section1>
												<dp:section2>
													<xts:string id="CHART_SHOW_VALUES"/>
												</dp:section2>
											</dp:choice>
											<dp:choice title="CHART_SHOW_FOLLOWING">
												<dp:section1>
													<input type="radio" name="chartTable" value="true">
														<xsl:if test="not($showTable ='false')">
															<xsl:attribute name="checked">true</xsl:attribute>
														</xsl:if>
													</input>
												</dp:section1>
												<dp:section2>
													<xts:string id="CHART_AND_TABLE"/>
												</dp:section2>
												<dp:section1>
													<input type="radio" name="chartTable" value="false">
														<xsl:if test="$showTable ='false'">
															<xsl:attribute name="checked">true</xsl:attribute>
														</xsl:if>
													</input>
												</dp:section1>
												<dp:section2>
													<xts:string id="CHART_ONLY"/>
												</dp:section2>
											</dp:choice>
										</lyt:section>
									</lyt:layout>
								</td>
							</tr>
							<tr>
								<td width="100%" height="0%">
									<!-- Use default buttons [ OK = execute() and CANCEL = hideDialogFrame() ] -->
									<qsdlg:defaultButtons/>
								</td>
							</tr>
							<!-- <dbg:dumpxml select="/"/> -->
						</table>
					</form>
				</dp:page>
			</xsl:template>
		</xsl:stylesheet>
	</xts:block>
</xts:morphlet>