How do I switch from viewing one chart to another

[tjohnston@gpworldwide.com]

I have two charts created in one report studio report.  One shows revenue by Month (x axis) and the other shows revenue by Qtr (x axis).  I'd like to add a button at the top of the page that will allow the user to toggle between viewing the revenue by month chart and the revenue by qtr chart.  Initially, I thought I could add javascript to the button that updated a conditional variable that would then be tied to each of the charts.  However, it doesn't appear that this is even possible.  Any ideas?

[NaviGator]

TerriJ,

You can do this using Conditional Blocks. You just put each chart in a block and then using a value prompt with static options - like below - you can switch bettween them.

Your Value Prompt should contains 2 static options,
- Revenue by Month
- Revenue by Qtr

so when you select any of the options, the required chart will appear.

Hope this could help.

[sridhar_cheepu]

Terrij,

Another option would be with  tabs....

you will have Two Tabs..(I.E Tabs are same like Buttons..)

One Tabs shows Revinue by Month and another shows Revinue by Qtr.
And Every time you would be able to see only One Chart.

I have an example ...I.e List and Chart.   See the Attached Reports specification Code which we have created using Go Sales and Retailers Packege.

See this Report... You will Get an Idea........

If you have still doubt or is this not ur requirement? ...Let me know.

Code Select Expand



<report xmlns="http://developer.cognos.com/schemas/report/3.0/" expressionLocale="en-us"><!--RS:8.2-->
<modelPath>/content/package[@name='GO Sales and Retailers']/model[@name='model']</modelPath>
<layouts>
<layout>
<reportPages>
<page class="pg" name="Page1">
<pageBody class="pb">
<contents><HTMLItem>
<dataSource>
<staticValue>&lt;script&gt;
function divVisibility(selectedDIV)
{
//load all report's DIV elements into an array
divs = document.getElementsByTagName ('DIV');

//loop through all the DIV elements individually
for (i=0;i&lt;divs.length;i++)
{
  //make sure the DIV is specifically a report "page"
  //and not a ReportNet generated DIV element (blocks, for instance)
  if (divs[i].className == "REPORT_PAGE")
  {
   //hide all REPORT PAGES
   divs[i].style.display = "none";
  }
}


input = document.getElementsByTagName('input');

//loop through all the DIV elements individually
for (i=0;i&lt;input.length;i++)
{
  //make sure the DIV is specifically a report "page"
  //and not a ReportNet generated DIV element (blocks, for instance)
  if (input[i].className == "tabOn" || input[i].className == "tabOff")
  {
   //hide all REPORT PAGES
   input[i].className = "tabOff";
  }
}

if (document.getElementById )
{
  //create variable that will represent the report page selected
  //passed in from the onClick event of the page hyperlink
  var divToShow = document.getElementById(selectedDIV);

  //set the property of the selected report page DIV to visible
  divToShow.style.display = "block";

  //create variable that will represent the report page selected
  //passed in from the onClick event of the page hyperlink
  var inputToToggle = document.getElementById ('btn' + selectedDIV);

  //set the property of the selected report page DIV to visible
  inputToToggle.className = "tabOn";

document.getElementById(selectedDIV).click();

}
}

&lt;/script&gt;
&lt;style type="text/css"&gt;
.tabOff{padding:2px;overflow:visible;COLOR: #003399;BACKGROUND-COLOR:#C0C0C0;HEIGHT: 25;CURSOR: HAND; width:100px;height:25px;font-weight: bold;}
.tabOn {padding:2px;overflow:visible;COLOR: #FFFFFF;BACKGROUND-COLOR: #1A6E7F;HEIGHT: 35;CURSOR: HAND;width:100px;height:25px;font-weight: bold;}
&lt;/style&gt;
</staticValue>
</dataSource>
</HTMLItem>
<table class="tb"><tableRows><tableRow><tableCells><tableCell><contents><HTMLItem>
<dataSource>
<staticValue>&lt;INPUT
  TYPE='BUTTON'
  ID='btnSection A'
  CLASS='tabOn'
  VALUE='List'
  onClick='divVisibility("Section A")'&gt;</staticValue>
</dataSource>
</HTMLItem></contents></tableCell><tableCell><contents/><style><CSS value="width:6px"/></style></tableCell><tableCell><contents><HTMLItem>
<dataSource>
<staticValue>&lt;INPUT
  TYPE='BUTTON'
  ID='btnSection B'
  CLASS='tabOff'
  VALUE='Graph'
  onClick='divVisibility("Section B")'&gt;</staticValue>
</dataSource>
</HTMLItem></contents></tableCell></tableCells></tableRow></tableRows><style><CSS value="border-collapse:collapse"/></style></table><table class="tb"><tableRows><tableRow><tableCells><tableCell><contents><table class="tb"><tableRows><tableRow><tableCells><tableCell><contents><HTMLItem description="Section A Div">
              <dataSource>
               <staticValue>&lt;div CLASS="REPORT_PAGE" ID="Section A" STYLE="display:block;"&gt; </staticValue>
              </dataSource>
             </HTMLItem><table class="tb"><tableRows><tableRow><tableCells><tableCell><contents><list class="ls" refQuery="Query1">
<style>
<CSS value="border-collapse:collapse"/>
</style>
<listColumns><listColumn><listColumnTitle class="lt"><contents><textItem><dataSource><dataItemLabel refDataItem="Order method"/></dataSource></textItem></contents></listColumnTitle><listColumnBody class="lc"><contents><textItem><dataSource><dataItemValue refDataItem="Order method"/></dataSource></textItem></contents></listColumnBody></listColumn><listColumn><listColumnTitle class="lt"><contents><textItem><dataSource><dataItemLabel refDataItem="Revenue"/></dataSource></textItem></contents></listColumnTitle><listColumnBody class="lm"><contents><textItem><dataSource><dataItemValue refDataItem="Revenue"/></dataSource></textItem></contents></listColumnBody></listColumn></listColumns></list>
</contents></tableCell></tableCells></tableRow></tableRows><style><CSS value="border-collapse:collapse;width:100%"/></style></table><HTMLItem description="end div" name="endDiv">
              <dataSource>
               <staticValue>&lt;/div&gt;</staticValue>
              </dataSource>
             </HTMLItem></contents></tableCell><tableCell><contents><HTMLItem description="Section B Div">
              <dataSource>
               <staticValue>&lt;div CLASS="REPORT_PAGE" ID="Section B" STYLE="display:none;"&gt; </staticValue>
              </dataSource>
             </HTMLItem><table class="tb"><tableRows><tableRow><tableCells><tableCell><contents><combinationChart depth="0" orientation="vertical" class="ch" refQuery="Query1">
<legend class="lg">
<legendPosition>
<relativePosition/>
</legendPosition>
<legendTitle class="lx"/>
</legend>
<ordinalAxis class="al">
<axisTitle class="at"/>
<axisLine color="black"/>
</ordinalAxis>
<numericalAxisY1 class="al">
<axisTitle class="at"/>
<gridlines color="#cccccc"/>
<axisLine color="black"/>
</numericalAxisY1>
<combinationChartTypes>
<bar><chartNodes><chartNode><chartNodeMembers><chartNodeMember refDataItem="Order method"><chartContents><chartTextItem><dataSource><memberCaption/></dataSource></chartTextItem></chartContents></chartNodeMember></chartNodeMembers></chartNode></chartNodes></bar>
</combinationChartTypes>
<style>
<CSS value="padding-left:5px; padding-right:5px; padding-top:5px; padding-bottom:5px"/>
</style>
<defaultChartMeasure refDataItem="Revenue"/></combinationChart>
</contents></tableCell></tableCells></tableRow></tableRows><style><CSS value="border-collapse:collapse;width:100%"/></style></table><HTMLItem description="end div" name="endDiv1">
              <dataSource>
               <staticValue>&lt;/div&gt;</staticValue>
              </dataSource>
             </HTMLItem></contents></tableCell></tableCells></tableRow></tableRows><style><CSS value="border-collapse:collapse;width:100%"/></style></table></contents></tableCell></tableCells></tableRow></tableRows><style><CSS value="border-collapse:collapse;width:100%"/></style></table></contents>
</pageBody>
<pageHeader><contents/></pageHeader><pageFooter><contents/></pageFooter></page>
</reportPages>
</layout>
</layouts>
<queries><query name="Query1"><source><model/></source><selection><dataItem name="Order method" aggregate="none"><expression>[gosales_goretailers].[Orders].[Order method]</expression></dataItem><dataItem name="Revenue" aggregate="total"><expression>[gosales_goretailers].[Orders].[Revenue]</expression></dataItem></selection></query></queries></report>



[Gollapudi]

Hi,

NaviGator's suggestion will definitely works, but here you will have to use prompt, user will have to select the prompt value.
If you wants to have buttons [which will let the user to see data like how he wants] go for java script
For this what you have to do is..... Create 2 charts, one for month and one for quarter and write javascript to hide n show the objects based on button click.

Thanks,
Gollapudi.

[NaviGator]

Gollapudi,

How can I use Java Script for this. how will I call or control the charts from within the Java Script ?

It would be great if you can give us an example.

Thanks ..

[Gollapudi]

My Collegue Sridhar has sent a report specification in his reply just check that report, you will come to know, there hez switching from list to chart, the same way we gonna have 2 charts with the same query in one of the charts we'll add month and in another we'll add Quarter...

[Gollapudi]

Hi,

Have a look at the attached report for ur reference...

Note: It wont hit the performance any where.


Thanks,
Gollapudi.

[tjohnston@gpworldwide.com]

Thanks for all of your input.  I would prefer not having the user see any prompts so putting the javascript on the button might be the best option.  I am fairly new at writing javascript so any assistance with referencing separate blocks (hide one show the other - toggle) from the button onclick would be greatly appreciated.

[rockytopmark]

I highly recommend using in BUILT-IN Cognos features/tools/objects where possible!!!    :o

JavaScript is nice but it is "Use at your own Risk!!!"  The Cognos 8.3 release broke thousands of reports people wrote using Javascript in prior versions... keep this in mind!!!  Cognos may change how objects are named and referenced again (in future releases) at their own leisure... so be aware!!

In either case, you will be forcing the user to click something... A tab, a button with Javascript, or a Control using Cognos Prompt Object w/ Conditional Blocks, to see one Graph or the Other.  The end result will be the same, but far less risk in using Conditional Blocks with an in-line prompt control (In-Line means the prompt control is on the report page itself, not on a prompt page)

Save the use of Javascript as a last resort, where no built-in Cognos method will do what is functionally necessary.

Good Luck!

[Gollapudi]

Hi,

You can use the same javascript which is in my attached report [previous mail], take the same script and apply those html objects to your report, that will works fine.

Thanks,
Gollapudi.

I have two charts created in one report studio report.  One shows revenue by Month (x axis) and the other shows revenue by Qtr (x axis).  I'd like to add a button at the top of the page that will allow the user to toggle between viewing the revenue by month chart and the revenue by qtr chart.  Initially, I thought I could add javascript to the button that updated a conditional variable that would then be tied to each of the charts.  However, it doesn't appear that this is even possible.  Any ideas?

[tjohnston@gpworldwide.com]

Thanks for all of your help.  I ended up using an inline prompt on the report page that auto submits on initial run.  Prompt value is tied to conditional variable and based on prompt selection, the correct chart will display and the other will not be rendered.  Working beautifully!

[tpaddack]

Brilliant.  That code was exactly what I was looking for. 

Thanks!

TP

[MFGF]

I would echo Rockytopmark's wise cautionary words, though.  Only use Javascript if you really really must - otherwise you risk building yourself an upgrade nightmare if/when the controls change in future.

MF.