Javascript drill up and down buttons

One of my more frequent requests is for a way to allow users to drill up without having to right click. Related, many developers also want a way to support both drill-throughs and drill-downs in a single click.

The way to handle this is actually fairly simple. It can be done with an inline onclick event inside an HTML item.

<img 
  src="..\hal\images\btn_arrow_up.gif" 
  onclick="
    var oCV = window['oCV'+'_THIS_'].getRV().getCV();
    oCV.getSelectionController().selectNode(this.parentNode,this.parentNode.nodeType);
    oCV.goDrillManager.rvDrillUp();" 
  onmouseover="this.style.cursor='pointer'"
/>

drill up down buttons

Stick this inside the crosstab node or list cell next to the label, make sure that drilling is enabled and test away. This behaves exactly as if you did a right-click->drill up. If drilling is disabled, this won’t do anything but select the node. This method will not override drill behaviors or security. If a user can’t right-click/drill up past a certain level, this will not let him either.

So how does this work?

The drill manager works by finding the selected node and performing the requested action on that. So whenever you click on the background of a node and it turns orange, that node has been selected. Notice that when you drill down normally, the moment before the action triggers the cell turns orange. That is the engine selecting that node before it runs the drill.

You can test this fairly easily by creating an input anywhere on the page with test drill Put that in an HTML item, run the report, highlight a node and click the button.

The next bit is getting this to work with charts. Unfortunately charts are a little more difficult. Charts themselves are composed (basically) of two parts, an image and an HTML map containing different areas. The areas are the parts of the chart that you can hover over for tooltips and click events. The map HTML of a fairly complex chart, revenue by year/product line, looks like:

<MAP class=chart_map name=RSrsvptt0 LID="rsvptt0RS">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Product line" tabIndex=-1 href="#" shape=POLY coords="352, 6, 495, 6, 495, 20, 352, 20" isChartTitle="true" ctx="11" type="legendTitle">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Product line = Camping Equipment" tabIndex=-1 href="#" shape=POLY coords="370, 20, 495, 20, 495, 36, 370, 36" ctx="5" type="legendLabel">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Product line = Mountaineering Equipment" tabIndex=-1 href="#" shape=POLY coords="370, 36, 495, 36, 495, 52, 370, 52" ctx="6" type="legendLabel">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Product line = Personal Accessories" tabIndex=-1 href="#" shape=POLY coords="370, 52, 495, 52, 495, 68, 370, 68" ctx="7" type="legendLabel">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Product line = Outdoor Protection" tabIndex=-1 href="#" shape=POLY coords="370, 68, 495, 68, 495, 84, 370, 84" ctx="8" type="legendLabel">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Product line = Golf Equipment" tabIndex=-1 href="#" shape=POLY coords="370, 84, 495, 84, 495, 100, 370, 100" ctx="9" type="legendLabel">
  <AREA class=chart_area title=Revenue tabIndex=-1 shape=POLY coords="19, 182, 19, 139, 7, 139, 7, 183, 19, 183" type="numericAxisTitle">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title=Year tabIndex=-1 href="#" shape=POLY coords="239, 344, 239, 334, 214, 334, 214, 345, 239, 345" isChartTitle="true" ctx="10" type="ordinalAxisTitle">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2010" tabIndex=-1 href="#" shape=POLY coords="148, 330, 148, 320, 122, 320, 122, 331, 148, 331" ctx="1" type="ordinalAxisLabel">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2011" tabIndex=-1 href="#" shape=POLY coords="209, 330, 209, 320, 183, 320, 183, 331, 209, 331" ctx="2" type="ordinalAxisLabel">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2012" tabIndex=-1 href="#" shape=POLY coords="269, 330, 269, 320, 243, 320, 243, 331, 269, 331" ctx="3" type="ordinalAxisLabel">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2013" tabIndex=-1 href="#" shape=POLY coords="330, 330, 330, 320, 304, 320, 304, 331, 330, 331" ctx="4" type="ordinalAxisLabel">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2013 
Product line = Golf Equipment 
Revenue = 174,740,819.29" tabIndex=-1 href="#" shape=POLY coords="341, 310, 341, 224, 332, 224, 332, 311, 341, 311" ctx="30::9::4" type="chartElement" display="174,740,819.29">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2013 
Product line = Outdoor Protection 
Revenue = 4,471,025.26" tabIndex=-1 href="#" shape=POLY coords="332, 310, 322, 308, 322, 311, 332, 311" ctx="26::8::4" type="chartElement" display="4,471,025.26">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2013 
Product line = Personal Accessories 
Revenue = 443,693,449.85" tabIndex=-1 href="#" shape=POLY coords="322, 310, 322, 90, 312, 90, 312, 311, 322, 311" ctx="22::7::4" type="chartElement" display="443,693,449.85">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2013 
Product line = Mountaineering Equipment 
Revenue = 141,520,649.70" tabIndex=-1 href="#" shape=POLY coords="312, 310, 312, 240, 302, 240, 302, 311, 312, 311" ctx="18::6::4" type="chartElement" display="141,520,649.70">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2013 
Product line = Camping Equipment 
Revenue = 352,910,329.97" tabIndex=-1 href="#" shape=POLY coords="302, 310, 302, 135, 293, 135, 293, 311, 302, 311" ctx="15::5::4" type="chartElement" display="352,910,329.97">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2012 
Product line = Golf Equipment 
Revenue = 230,110,270.55" tabIndex=-1 href="#" shape=POLY coords="281, 310, 281, 196, 271, 196, 271, 311, 281, 311" ctx="29::9::3" type="chartElement" display="230,110,270.55">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2012 
Product line = Outdoor Protection 
Revenue = 10,349,175.84" tabIndex=-1 href="#" shape=POLY coords="271, 310, 271, 306, 261, 306, 261, 311, 271, 311" ctx="25::8::3" type="chartElement" display="10,349,175.84">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2012 
Product line = Personal Accessories 
Revenue = 594,009,408.42" tabIndex=-1 href="#" shape=POLY coords="261, 310, 261, 15, 252, 15, 252, 311, 261, 311" ctx="21::7::3" type="chartElement" display="594,009,408.42">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2012 
Product line = Mountaineering Equipment 
Revenue = 161,039,823.26" tabIndex=-1 href="#" shape=POLY coords="252, 310, 252, 230, 242, 230, 242, 311, 252, 311" ctx="17::6::3" type="chartElement" display="161,039,823.26">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2012 
Product line = Camping Equipment 
Revenue = 500,382,422.83" tabIndex=-1 href="#" shape=POLY coords="242, 310, 242, 61, 232, 61, 232, 311, 242, 311" ctx="14::5::3" type="chartElement" display="500,382,422.83">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2011 
Product line = Golf Equipment 
Revenue = 168,006,427.07" tabIndex=-1 href="#" shape=POLY coords="220, 310, 220, 227, 210, 227, 210, 311, 220, 311" ctx="28::9::2" type="chartElement" display="168,006,427.07">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2011 
Product line = Outdoor Protection 
Revenue = 25,008,574.08" tabIndex=-1 href="#" shape=POLY coords="210, 310, 210, 298, 201, 298, 201, 311, 210, 311" ctx="24::8::2" type="chartElement" display="25,008,574.08">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2011 
Product line = Personal Accessories 
Revenue = 456,323,355.90" tabIndex=-1 href="#" shape=POLY coords="201, 310, 201, 83, 191, 83, 191, 311, 201, 311" ctx="20::7::2" type="chartElement" display="456,323,355.90">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2011 
Product line = Mountaineering Equipment 
Revenue = 107,099,659.94" tabIndex=-1 href="#" shape=POLY coords="191, 310, 191, 257, 181, 257, 181, 311, 191, 311" ctx="16::6::2" type="chartElement" display="107,099,659.94">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2011 
Product line = Camping Equipment 
Revenue = 402,757,573.17" tabIndex=-1 href="#" shape=POLY coords="181, 310, 181, 110, 171, 110, 171, 311, 181, 311" ctx="13::5::2" type="chartElement" display="402,757,573.17">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2010 
Product line = Golf Equipment 
Revenue = 153,553,850.98" tabIndex=-1 href="#" shape=POLY coords="159, 310, 159, 234, 150, 234, 150, 311, 159, 311" ctx="27::9::1" type="chartElement" display="153,553,850.98">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2010 
Product line = Outdoor Protection 
Revenue = 36,165,521.07" tabIndex=-1 href="#" shape=POLY coords="150, 310, 150, 293, 140, 293, 140, 311, 150, 311" ctx="23::8::1" type="chartElement" display="36,165,521.07">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2010 
Product line = Personal Accessories 
Revenue = 391,647,093.61" tabIndex=-1 href="#" shape=POLY coords="140, 310, 140, 116, 130, 116, 130, 311, 140, 311" ctx="19::7::1" type="chartElement" display="391,647,093.61">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2010 
Product line = Camping Equipment 
Revenue = 332,986,338.06" tabIndex=-1 href="#" shape=POLY coords="121, 310, 121, 145, 111, 145, 111, 311, 121, 311" ctx="12::5::1" type="chartElement" display="332,986,338.06">
</MAP>

Areas can’t be selected the same way as crosstab nodes. For one, the button can’t be placed directly into the chart. Secondly, the selectNode function won’t work on charts. No, for that we’ll need something radically different: setSelectedChartArea()

First, let’s decide what we want to drill up on. For the sake of this example, I’ll say that the users are drilling down on the time dimension in the ordinal axis. So in order to drill up, we need to isolate one of those areas. It normally doesn’t matter which one as they will all drill up to the same member (this may not always be the case, especially if you change the default drill behavior). We need to loop through the areas of the chart, and find the first area that has the type “ordinalAxisLAbel”. Once we have it, we can use the drastically different function to select it.

Since the button doesn’t exist inside the chart, we also need a way to find the chart element on the page. Fortunately there is a Cognos function for that. getLayoutElementFromLid works just like getElementById. Except just for Cognos objects. And when using it, you have to remember to specify the namespace you’re working in. So not like getElementById at all. Using getLayoutElementFromLid will return the actual image of the chart, so to get the areas we have to go two nodes up.

var oCV = window['oCV'+'_THIS_'].getRV().getCV()
  , areas = oCV.getLayoutElementFromLid('ChartName'+'_THIS_').parentNode.parentNode.getElementsByTagName('AREA')  ;

for(var i = 0;i<areas.length;i++){
  if ( areas[i].getAttribute('type')=='ordinalAxisLabel') 
  {
    oCV.getSelectionController().setSelectedChartArea(areas[i]);
    oCV.goDrillManager.rvDrillUp();break;
  }

}

Stick that into the onclick event of an element, and it will drill up on the first ordinal area it finds in your chart.

This should, in theory, work in previous versions of Cognos. It works perfectly in 10.1.1 (switch _THIS_ with the correct namespace (RS for running from Report Studio or _NS_ for running from connection or in a portlet)), but unfortunately I don’t have access to any prior versions to test.

Below is the report XML. You can downgrade this to 10.1 fairly easily by changing /report/9.0/ to /report/8.0/.

<report xmlns="http://developer.cognos.com/schemas/report/9.0/" useStyleVersion="10" expressionLocale="en-us">
				<modelPath>/content/folder[@name='Samples']/folder[@name='Cubes']/package[@name='Sales and Marketing (cube)']/model[@name='2008-07-25T15:28:38.072Z']</modelPath>
				
				<layouts>
					<layout>
						<reportPages>
							<page name="Page1">
								<style>
									<defaultStyles>
										<defaultStyle refStyle="pg"/>
									</defaultStyles>
								</style>
								<pageBody>
									<style>
										<defaultStyles>
											<defaultStyle refStyle="pb"/>
										</defaultStyles>
									</style>
									<contents><v2_combinationChart maxHotspots="10000" refQuery="Query1" name="MyChart">
								<v2_combinationTypeTooltips/>
								<v2_legend>
									<v2_legendPosition>
										<v2_legendPreset/>
									</v2_legendPosition>
									<v2_legendTitle refQuery="Query1">
										<v2_chartTextContents>
											<v2_automaticText/>
										</v2_chartTextContents>
										<style>
											<defaultStyles>
												<defaultStyle refStyle="lx"/>
											</defaultStyles>
										</style>
									</v2_legendTitle>
									<style>
										<defaultStyles>
											<defaultStyle refStyle="lg"/>
										</defaultStyles>
									</style>
								</v2_legend>
								<v2_commonAxis>
									<v2_ordinalAxis>
										<v2_axisTitle refQuery="Query1">
											<v2_chartTextContents>
												<v2_automaticText/>
											</v2_chartTextContents>
											<style>
												<defaultStyles>
													<defaultStyle refStyle="at"/>
												</defaultStyles>
											</style>
										</v2_axisTitle>
										<v2_axisLine lineWeight="0"/>
										<v2_axisLabels>
											<style>
												<defaultStyles>
													<defaultStyle refStyle="al"/>
												</defaultStyles>
											</style>
										</v2_axisLabels>
									</v2_ordinalAxis>
									<chartNodes><chartNode><chartNodeMembers><chartNodeMember refDataItem="Year"><chartContents><chartTextItem><dataSource><memberCaption/></dataSource></chartTextItem></chartContents></chartNodeMember></chartNodeMembers></chartNode></chartNodes></v2_commonAxis>
								<v2_topLeftAxis>
									<v2_combinationChartTypes>
										<v2_bar borders="show">
											<v2_solidPalette>
												<v2_solidPaletteEntries>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#8599D3">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#8599D3"/>
																<v2_gradientColor colorPosition="100" gradientColor="#5876AE"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#E3AE6C">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#E3AE6C"/>
																<v2_gradientColor colorPosition="100" gradientColor="#CD854E"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#839862">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#839862"/>
																<v2_gradientColor colorPosition="100" gradientColor="#6C7F56"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#B7C873">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#B7C873"/>
																<v2_gradientColor colorPosition="100" gradientColor="#AFB885"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#8484A8">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#8484A8"/>
																<v2_gradientColor colorPosition="100" gradientColor="#525E7E"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#C0CCED">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#C0CCED"/>
																<v2_gradientColor colorPosition="100" gradientColor="#B0C2E5"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#8C5580">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#8C5580"/>
																<v2_gradientColor colorPosition="100" gradientColor="#794067"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#C789BC">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#C789BC"/>
																<v2_gradientColor colorPosition="100" gradientColor="#BB72BC"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#D5BAEF">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#D5BAEF"/>
																<v2_gradientColor colorPosition="100" gradientColor="#C29FD1"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#83683F">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#83683F"/>
																<v2_gradientColor colorPosition="100" gradientColor="#604926"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#DCB05A">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#DCB05A"/>
																<v2_gradientColor colorPosition="100" gradientColor="#C09C52"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#F4DF9E">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#F4DF9E"/>
																<v2_gradientColor colorPosition="100" gradientColor="#E4CF87"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#5F8A8C">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#5F8A8C"/>
																<v2_gradientColor colorPosition="100" gradientColor="#537579"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#96C4B2">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#96C4B2"/>
																<v2_gradientColor colorPosition="100" gradientColor="#89B0A0"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#CBE8E7">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#CBE8E7"/>
																<v2_gradientColor colorPosition="100" gradientColor="#BDD6D5"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#AE6564">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#AE6564"/>
																<v2_gradientColor colorPosition="100" gradientColor="#875352"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#D88C6F">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#D88C6F"/>
																<v2_gradientColor colorPosition="100" gradientColor="#C47D61"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#E3C9B0">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#E3C9B0"/>
																<v2_gradientColor colorPosition="100" gradientColor="#D2B2A5"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#848484">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#848484"/>
																<v2_gradientColor colorPosition="100" gradientColor="#555555"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#a4a4a4">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#a4a4a4"/>
																<v2_gradientColor colorPosition="100" gradientColor="#909090"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#C7C7C7">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#C7C7C7"/>
																<v2_gradientColor colorPosition="100" gradientColor="#c1c1c1"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
												</v2_solidPaletteEntries>
											</v2_solidPalette>
											<!-- v2_solidPaletteRef ref="gDefaultSolid"/ -->
										<chartNodes><chartNode><chartNodeMembers><chartNodeMember refDataItem="Product line"><chartContents><chartTextItem><dataSource><memberCaption/></dataSource></chartTextItem></chartContents></chartNodeMember></chartNodeMembers></chartNode></chartNodes></v2_bar>
									</v2_combinationChartTypes>
									<v2_axis>
										<v2_axisTitle refQuery="Query1">
											<v2_chartTextContents>
												<v2_automaticText/>
											</v2_chartTextContents>
											<style>
												<defaultStyles>
													<defaultStyle refStyle="at"/>
												</defaultStyles>
											</style>
										</v2_axisTitle>
										<v2_axisLine lineWeight="0"/>
										<v2_axisRange>
											<v2_automaticRange/>
										</v2_axisRange>
										<v2_axisLabels>
											<style>
												<defaultStyles>
													<defaultStyle refStyle="al"/>
												</defaultStyles>
											</style>
										</v2_axisLabels>
										<v2_majorGridlines lineWeight="0" lineColor="#CCCCCC"/>
										<v2_majorBackgroundColors>
											<v2_firstBackgroundColor color="#D2D2D2" transparency="50"/>
											<v2_secondBackgroundColor color="#E2E2E2" transparency="50"/>
										</v2_majorBackgroundColors>
									</v2_axis>
								</v2_topLeftAxis>
								<style>
									<defaultStyles>
										<defaultStyle refStyle="ch"/>
									</defaultStyles>
								</style>
								<noDataHandler>
									<contents>
										<block>
											<contents>
												<textItem>
													<dataSource>
														<staticValue>No Data Available</staticValue>
													</dataSource>
													<style>
														<CSS value="padding:10px 18px;"/>
													</style>
												</textItem>
											</contents>
										</block>
									</contents>
								</noDataHandler>
								<v2_defaultChartMeasure refDataItem="Revenue"/></v2_combinationChart>
							<HTMLItem>
			<dataSource>
				<staticValue>&lt;input type="button" onclick="
var oCV = window['oCV'+'_THIS_'].getRV().getCV()
  , areas = oCV.getLayoutElementFromLid('MyChart'+'_THIS_').parentNode.parentNode.getElementsByTagName('AREA')  ;

for(var i = 0;i&lt;areas.length;i++){
  if ( areas[i].getAttribute('type')=='ordinalAxisLabel') 
  {
    oCV.getSelectionController().setSelectedChartArea(areas[i]);
    oCV.goDrillManager.rvDrillUp();break;
  }

}
" value="Drill up chart"/&gt;</staticValue>
			</dataSource>
		</HTMLItem><list horizontalPagination="true" name="List1" refQuery="Query1">
			
			
			
			<noDataHandler>
				<contents>
					<block>
						<contents>
							<textItem>
								<dataSource>
									<staticValue>No Data Available</staticValue>
								</dataSource>
								<style>
									<CSS value="padding:10px 18px;"/>
								</style>
							</textItem>
						</contents>
					</block>
				</contents>
			</noDataHandler>
			<style>
				<CSS value="border-collapse:collapse"/>
				<defaultStyles>
					<defaultStyle refStyle="ls"/>
				</defaultStyles>
			</style>
		<listColumns><listColumn><listColumnTitle><style><defaultStyles><defaultStyle refStyle="lt"/></defaultStyles></style><contents><textItem><dataSource><dataItemLabel refDataItem="Year"/></dataSource></textItem></contents></listColumnTitle><listColumnBody><style><defaultStyles><defaultStyle refStyle="lc"/></defaultStyles></style><contents><HTMLItem description="drillUp">
			<dataSource>
				<staticValue>&lt;img src="..\hal\images\btn_arrow_up.gif" onclick="var oCV = window['oCV'+'_THIS_'].getRV().getCV();oCV.getSelectionController().selectNode(this.parentNode);oCV.goDrillManager.rvDrillUp();" onmouseover="this.style.cursor='pointer'"/&gt;</staticValue>
			</dataSource>
		</HTMLItem><textItem><dataSource><dataItemValue refDataItem="Year"/></dataSource></textItem><HTMLItem description="drillDown">
			<dataSource>
				<staticValue>&lt;img src="..\hal\images\btn_arrow_down.gif" onclick="var oCV = window['oCV'+'_THIS_'].getRV().getCV();oCV.getSelectionController().selectNode(this.parentNode);oCV.goDrillManager.rvDrillDown();" onmouseover="this.style.cursor='pointer'"/&gt;</staticValue>
			</dataSource>
		</HTMLItem></contents></listColumnBody></listColumn></listColumns></list><crosstab horizontalPagination="true" name="Crosstab1" refQuery="Query1">
			<crosstabCorner>
				<contents/>
				<style>
					<defaultStyles>
						<defaultStyle refStyle="xm"/>
					</defaultStyles>
				</style>
			</crosstabCorner>
			
			
			<noDataHandler>
				<contents>
					<block>
						<contents>
							<textItem>
								<dataSource>
									<staticValue>No Data Available</staticValue>
								</dataSource>
								<style>
									<CSS value="padding:10px 18px;"/>
								</style>
							</textItem>
						</contents>
					</block>
				</contents>
			</noDataHandler>
			<style>
				<CSS value="border-collapse:collapse"/>
				<defaultStyles>
					<defaultStyle refStyle="xt"/>
				</defaultStyles>
			</style>
		<crosstabRows><crosstabNode><crosstabNestedNodes><crosstabNode><crosstabNodeMembers><crosstabNodeMember refDataItem="Product line" edgeLocation="e2"><style><defaultStyles><defaultStyle refStyle="ml"/></defaultStyles></style><contents><HTMLItem description="drillUp">
			<dataSource>
				<staticValue>&lt;img src="..\hal\images\btn_arrow_up.gif" onclick="var oCV = window['oCV'+'_THIS_'].getRV().getCV();oCV.getSelectionController().selectNode(this.parentNode);oCV.goDrillManager.rvDrillUp();" onmouseover="this.style.cursor='pointer'"/&gt;</staticValue>
			</dataSource>
		</HTMLItem><textItem><dataSource><memberCaption/></dataSource></textItem><HTMLItem description="drillDown">
			<dataSource>
				<staticValue>&lt;img src="..\hal\images\btn_arrow_down.gif" onclick="var oCV = window['oCV'+'_THIS_'].getRV().getCV();oCV.getSelectionController().selectNode(this.parentNode);oCV.goDrillManager.rvDrillDown();" onmouseover="this.style.cursor='pointer'"/&gt;</staticValue>
			</dataSource>
		</HTMLItem></contents></crosstabNodeMember></crosstabNodeMembers></crosstabNode></crosstabNestedNodes><crosstabNodeMembers><crosstabNodeMember refDataItem="Year" edgeLocation="e1"><style><defaultStyles><defaultStyle refStyle="ml"/></defaultStyles></style><contents><HTMLItem description="drillUp">
			<dataSource>
				<staticValue>&lt;img src="..\hal\images\btn_arrow_up.gif" onclick="var oCV = window['oCV'+'_THIS_'].getRV().getCV();oCV.getSelectionController().selectNode(this.parentNode);oCV.goDrillManager.rvDrillUp();" onmouseover="this.style.cursor='pointer'"/&gt;</staticValue>
			</dataSource>
		</HTMLItem><textItem><dataSource><memberCaption/></dataSource><reportDrills><reportDrill name="Drill-Through Definition1"><drillLabel><dataSource><staticValue/></dataSource></drillLabel><drillTarget method="execute" showInNewWindow="true"><reportPath path="CAMID(&quot;OpenDJ:u:cn=administrator&quot;)/folder[@name='My Folders']/report[@name='test drill down']"><XMLAttributes><XMLAttribute name="ReportName" value="test drill down" output="no"/><XMLAttribute name="class" value="report" output="no"/></XMLAttributes></reportPath></drillTarget></reportDrill></reportDrills><style><defaultStyles><defaultStyle refStyle="hy"/></defaultStyles></style></textItem><HTMLItem description="drillDown">
			<dataSource>
				<staticValue>&lt;img src="..\hal\images\btn_arrow_down.gif" onclick="var oCV = window['oCV'+'_THIS_'].getRV().getCV();oCV.getSelectionController().selectNode(this.parentNode);oCV.goDrillManager.rvDrillDown();" onmouseover="this.style.cursor='pointer'"/&gt;</staticValue>
			</dataSource>
		</HTMLItem></contents></crosstabNodeMember></crosstabNodeMembers></crosstabNode></crosstabRows><crosstabFactCell><contents><HTMLItem description="drillUp">
			<dataSource>
				<staticValue>&lt;img src="..\hal\images\btn_arrow_up.gif" onclick="var oCV = window['oCV'+'_THIS_'].getRV().getCV();oCV.getSelectionController().selectNode(this.parentNode);oCV.goDrillManager.rvDrillUp();" onmouseover="this.style.cursor='pointer'"/&gt;</staticValue>
			</dataSource>
		</HTMLItem><textItem><dataSource><cellValue/></dataSource></textItem><HTMLItem description="drillDown">
			<dataSource>
				<staticValue>&lt;img src="..\hal\images\btn_arrow_down.gif" onclick="var oCV = window['oCV'+'_THIS_'].getRV().getCV();oCV.getSelectionController().selectNode(this.parentNode);oCV.goDrillManager.rvDrillDown();" onmouseover="this.style.cursor='pointer'"/&gt;</staticValue>
			</dataSource>
		</HTMLItem></contents><style><defaultStyles><defaultStyle refStyle="mv"/></defaultStyles></style></crosstabFactCell><defaultMeasure refDataItem="Revenue"/><crosstabColumns><crosstabNode><crosstabNodeMembers><crosstabNodeMember refDataItem="Region" edgeLocation="e3"><style><defaultStyles><defaultStyle refStyle="ml"/></defaultStyles></style><contents><HTMLItem description="drillUp">
			<dataSource>
				<staticValue>&lt;img src="..\hal\images\btn_arrow_up.gif" onclick="var oCV = window['oCV'+'_THIS_'].getRV().getCV();oCV.getSelectionController().selectNode(this.parentNode);oCV.goDrillManager.rvDrillUp();" onmouseover="this.style.cursor='pointer'"/&gt;</staticValue>
			</dataSource>
		</HTMLItem><textItem><dataSource><memberCaption/></dataSource></textItem><HTMLItem description="drillDown">
			<dataSource>
				<staticValue>&lt;img src="..\hal\images\btn_arrow_down.gif" onclick="var oCV = window['oCV'+'_THIS_'].getRV().getCV();oCV.getSelectionController().selectNode(this.parentNode);oCV.goDrillManager.rvDrillDown();" onmouseover="this.style.cursor='pointer'"/&gt;</staticValue>
			</dataSource>
		</HTMLItem></contents></crosstabNodeMember></crosstabNodeMembers></crosstabNode></crosstabColumns></crosstab></contents>
								</pageBody>
							</page>
						</reportPages>
					</layout>
				</layouts>
			<XMLAttributes><XMLAttribute name="RS_CreateExtendedDataItems" value="true" output="no"/><XMLAttribute name="listSeparator" value="," output="no"/><XMLAttribute name="RS_modelModificationTime" value="2008-07-25T15:28:38.133Z" output="no"/></XMLAttributes><queries><query name="Query1"><source><model/></source><selection><dataItemLevelSet name="Year"><dmLevel><LUN>[sales_and_marketing].[Time].[Time].[Year]</LUN><itemCaption>Year</itemCaption></dmLevel><dmDimension><DUN>[sales_and_marketing].[Time]</DUN><itemCaption>Time</itemCaption></dmDimension><dmHierarchy><HUN>[sales_and_marketing].[Time].[Time]</HUN><itemCaption>Time</itemCaption></dmHierarchy></dataItemLevelSet><dataItemLevelSet name="Product line"><dmLevel><LUN>[sales_and_marketing].[Products].[Products].[Product line]</LUN><itemCaption>Product line</itemCaption></dmLevel><dmDimension><DUN>[sales_and_marketing].[Products]</DUN><itemCaption>Products</itemCaption></dmDimension><dmHierarchy><HUN>[sales_and_marketing].[Products].[Products]</HUN><itemCaption>Products</itemCaption></dmHierarchy></dataItemLevelSet><dataItemMeasure name="Revenue"><dmMember><MUN>[sales_and_marketing].[Measures].[Revenue]</MUN><itemCaption>Revenue</itemCaption></dmMember><dmDimension><DUN>[sales_and_marketing].[Measures]</DUN><itemCaption>Measures</itemCaption></dmDimension><XMLAttributes><XMLAttribute name="RS_dataType" value="9" output="no"/></XMLAttributes></dataItemMeasure><dataItemLevelSet name="Region"><dmLevel><LUN>[sales_and_marketing].[Retailers].[Retailers].[Region]</LUN><itemCaption>Region</itemCaption></dmLevel><dmDimension><DUN>[sales_and_marketing].[Retailers]</DUN><itemCaption>Retailers</itemCaption></dmDimension><dmHierarchy><HUN>[sales_and_marketing].[Retailers].[Retailers]</HUN><itemCaption>Retailers</itemCaption></dmHierarchy></dataItemLevelSet></selection></query></queries><reportName>test drill down</reportName><drillBehavior drillUpDown="true" modelBasedDrillThru="true"/></report>
Advertisements

3 Responses to Javascript drill up and down buttons

  1. Scott Taylor says:

    Every time I see your blog it inspires me to push past my basic understanding of report writing. You definitely inspire as well as educate with your work. Thanks!

  2. gilles fau says:

    Thanks you for this, it was exactly what i m looking for.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: