Everybody want to see the flash charts in their reports. Particularly the business is very keen to see this kind of chats in the reports. There are many ways to implement this but it is very simple. Let's see how it is....
We need a Cognos version and Fusion charts free version - Click here to download
Before starting place the chart.swf (i.e FCF_MSColumn3DLineDY.swf) under /samples/images/FCF_MSColumn3DLineDY.swf. (on server)
Now on we are going to refer this swf file in our report.
The logic behind this is just populating above swf file with hmtl and javascript coding. There are many ways to populate swf. (like dataXML,parsing Cognos XML output ..etc)
Here the simple example with dataXML method.
1. Open new report in report studio, build a query contains 1 dimension(you interest- in our case i took periods, 3 measures (any fact values - factA, factB,FactC)
2. Let's come to Page explorer and drag html items as mentioned.
1) Drag html item and copy below text to it.
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="600" height="400" id="MSColumn3DLineDY" >
<param name="movie" value="../samples/images/FCF_MSColumn3DLineDY.swf" />
<param name="FlashVars" value="&chartWidth=800&chartHeight=400&dataXML=<graph caption='Surgical Sales YTD' PYAxisName='Actual' SYAxisName='Total Sales' numberPrefix='OB$' showvalues='0' numDivLines='4' formatNumberScale='0' decimalPrecision='0' anchorSides='10' anchorRadius='3' anchorBorderColor='009900' PYAxisMinValue='0' PYAxisMaxValue='30000' SYAxisMinValue='0' SYAxisMaxValue='30000'>Please set equal values for PYAxisMinValue & SYAxisMinValue and SYAxisMaxValue & PYAxisMaxValue in the <graph> element - if you require
2) Drag 2nd html item and copy below text to it.
<categories>
3) Now you drag a repeater right to 2nd html item. Associate the query that we have created previously to it. From the properties panel select the repeater, Under data - properties include periods data item and click OK.
4) Drag 3rd html item to repeater and copy below text to html source
<category name='
5) Drag 4th html item to repeater and select the
Source Type - Data Item Value.
Data Item Value - select the respected dimension from list - (in my case Periods)
6) Drag 5th html item to repeater and copy below text to html source
' />
7) Drag 6th html item after repeater and copy below text to html source
</categories>
Note: We just completed the categories in our chart. The next part is creating datasets
8) Drag 7th html item and copy below text to html source
<dataset seriesName='factA' color='AFD8F8' showValues='0'>
9) Now you drag a repeater next to 7th html item. Associate the query that we have created previously to it. From the properties panel select the repeater, Under data - properties include periods and factA data items and click OK.
10) Drag 8th html item and copy below text to html source
<set value='
11) Drag 9th html item to repeater 2 and select the
Source Type - Report Expression
Report Expression- number2string([Query1].[factA]/1000)
12) Drag 10th html item to repeater and copy below text to html source
' />
13) Drag 11th html item after repeater 2 and copy below text to html source
</dataset>
Note: Dateset 1 is now completed. like this we need to repeat from step 8 to step 13 twice.
When you drag repeater 3 properties should incude perods,factB data items and repeater 4 should include periods,factC data items.
But last Dataset contains below text
<dataset seriesName='factC' color='FF3333' showValues='0' parentYAxis='S'>
Here parentYAxis='S' is nothing but we are mentioning this dataset is plotting against to secondary axis(i.e Y) S- secondary, P - Primary
14) Drag last html item and copy below text to it.
</graph>">
<param name="quality" value="high" />
</object>
finally the report layout looks like ...
That's it.
Now our report is ready to run. check the flash effects on the chart.
I hope this article is helpful to you techies
