Skill Level: Intermediate


This article is mainly to provide an overview of how to use Cognos framework manager or framework model to integrate with external open source. This article should provide some basic guidance to the developers integrating d3 or google charts


Developers expected to work on Cognos integration charts should have some basic knowledge of developing Cognos reports using Report Studio. Developers should know how to create different queries with Cognos report studio. Developers should have some basic knowledge of how Javascripts work and what are the basic scripting languages are used with-in javascript. Higher knowledge of CSS or HTML is not required for developers to understand and work on Cognos report integration


  1. Introduction to Cognos Report Studio & JavaScript

    Cognos –> This article assumes that most of the developers reviewing or looking at this article has some fair or good understanding of Cognos Framework model, Cognos data items, Cognos queries and Cognos report studio. This article mainly focuses on using one of the new feature called “Custom Control” available in Cognos 11.0 & above. Cognos custom control is used mainly to integrate with open source charts and get more interactive and effective chart published. Cognos report studio is a tool used to develop interactive reports capturing different data elements from database and publish the charts into more user readable format.

    Java Script –> JavaScript is a programming language that can be included on web pages to make them more interactive. It is used it to check or modify the contents of forms, change images, open new windows and write dynamic page content. You can even use it with CSS to make DHTML (Dynamic HyperText Markup Language). This allows you to make parts of your web pages appear or disappear or move around on the page. JavaScripts only execute on the page(s) that are on your browser window at any set time. When the user stops viewing that page, any scripts that were running on it are immediately stopped.

  2. Cognos custom control

    Custom Control –> Cognos custom control in one of the feature that is provided in Cognos 11.x to integrate with external charts using Javascript or any of the scrpting languages. It is also considered as a simplified way of integrating with static charts or images.

    Below reference link provides the steps of including or adding Custom Control to Cognos reports.


    Sample Screen shot of how custom control are inserted in to report sections


    To associate Cognos queries to the Customer object using custom control properties of Cognos. To provide the appropriate naming convention for the same



    There can be multiple queries added to the single dataset. If the reports are expected to render multiple output and that needs to be handled in single JavaScript code, then it is advisable to have one single Custom Control with multiple data sets

    Below snapshot provides a view of how Cognos data set looks like with querie data items and association of queries to the data set



  3. Javascript association to custom control

    Here it is important to first define a control prototype function to read the data from data sets. Each third party data sets would have particular libraries to be referred to use its internal function and appropriately work on plotting the graph. Before actually starting and making the cognos data set to plot the chart, it is important to first ensure to read the main javascript library files. E.g. reading jQuery.min.js file at the beginning of the script file. Similar to invoking any java script from html files as part of the standard development process. Usually it is advisable to one generic javascript file and then further invoke each of the charting script.

    Connecting Cognos data set to JavaScript code

    As it is important to read Data set value passed from Cognos, Below code examples gives the overview of how Cognos values are first read as a data set with-in Plotly or Java Script. The referred JavaScript is invoked with-in custom control properties of Cognos object

    Control.prototype.setData = function( oControlHost, oDataStore )


                   this.m_aValues = [];

                   this.m_aLabels = [];

                   var iRowCount = oDataStore.rowCount;

                   for ( var iRow = 0; iRow < iRowCount; iRow++ )


                                  this.m_aLabels.push( oDataStore.getCellValue( iRow, 0 ) );

                                  this.m_aValues.push( oDataStore.getCellValue( iRow, 1 ) );




    Below examples given details about capturing filter values from Cognos report and applying it appropriately with-in Cognos chart plotting.

    Control.prototype.draw = function( oControlHost )


                   var o = oControlHost.configuration;


                   var oControl1 = oControlHost.page.getControlByName( o.name1 );

                   var oControl2 = oControlHost.page.getControlByName( o.name2 );


                   var v_aValues1 = oControl1.getValues(); 

                   var v_aValues2 = oControl2.getValues(); 


                   var chartTitle = v_aValues1[0].use + ” – ” + v_aValues2[0].use;



    Once Java script is able to read appropriate value from the Cognos data sets, different charts can be used to plot using Plotly features and chart properties.

  4. Additional reference for begineer's

    Below are some of the references to Cognos developers to explore more of custom control integration:-



  5. Conclusion

    Above article is written in as much as general content to provide starting steps for developers. It is not associated to any particular project and do use it only as a starting reference to implement Cognos feature.

  6. Practical Issues or Error Faced…it might help for quick check….

    1) Positioning or copying the javascript file into right directory.

    Please copy the javascript files into ../webcontent/bi/samples/javascript <<any subsequent path>. NOT IN TO ../webcontent/samples/javascript/<<subsequent path>>. Took quite a lot of time to figure out the issue with one simple “bi” folder name missing

    2) Javascript & Unix are highly case sensitive, people take care of uppercase name, lowercase names etc. Developers are tend to make mistakes

    3) Report PAGE INTERACTIVE MODE –> Report Studio PAGE properties should be change to make “INTERACTIVE MODE to “YES”. Otherwise Custom object returns data in the output

    4) Browser ISSUE –> Sometimes Custom Control doesn’t work well with “FIREFOX”, Please use CHROME, this issue exists with Cognos 11.0.R12 as well

    5) DataSET Order and setting the DataSET –> This is important for Custom Control to have right set of column and necessary values working. Setting the right Module path is equally important

    6) In case of any filter, Entering them in Cognos configuration part is also important.


    **** Above things might look simple, but eats out lot of time to drill down on the issues. Please check for spelling and names

Join The Discussion