Creating a variable width bar chart using JavaScript_IBM Cognos 10 Report Studio Cookbook（Second Edition）-QQ阅读男频武侠网

上QQ阅读APP看书，第一时间看更新

Creating a variable width bar chart using JavaScript

A report shows the Unit cost and Unit price of all products. It also works out the Profit Margin from these two.

Business owners are naturally more interested in products with a high profit margin as well as a high unit price.

Getting ready

Create a simple list report with Product, Unit cost, and Unit price as columns.

Also, add a calculated item called Margin to the list to compute the profit margin and define it as follows:

([Unit price]-[Unit cost])/[Unit cost]

How to do it...

In this recipe, we will create a variable width bar chart using JavaScript that shows a bar for every product. The length of bar will indicate the profit margin, whereas the width will indicate the unit price. To do this, perform the following steps:

Drag a new HTML item onto the list report as a new column.
Unlock the report objects using the unlock button. Add four more HTML items in the column where you added the HTML item in the previous step. The report should look like the following screenshot:
Now define the first HTML item as:
```
<script>
var barlen=100*((
```
For the second HTML item, set the Source Type to Data Item Value and select Margin as Data Item as shown in the following screenshot:
Define the third HTML item as:
```
));
var barheight=((
```
For the fourth HTML item, again set the Source Type to Data Item Value. Select Unit price as Data Item.

Define the fifth and last HTML item as:

)/10) ;
var myBar='<div style="background-color:blue; width:' +barlen+'; height:' + barheight +'"></div>' ;
document.write(myBar) ;
</script>

Run the report to see the output. It will look like the following screenshot:

As you can see, Bugshield Lotion Lite has a huge profit margin. Canyon Mule Extreme Backpack might have a relatively low profit margin, but its unit price is high, and hence it is also an important product for the business.

In short, the area of the bar (width X height) indicates the importance of a product to the business.

How it works...

Report Studio has in-built chart objects which allow you to create sophisticated and detailed charts. However, in this case, we don't have any complex charting requirements.

We just want to highlight the products with high profitability. The JavaScript used in this recipe has the following structure:

<script>
var barlen=100*((length_driver)) ;
var barheight=((width_driver)/10) ;
var myBar='<div style="background-color:blue; width:' +barlen+'; height:' + barheight +'"></div>' ;
document.write(myBar) ;
</script>

We have split it into five HTML items so that the length_driver and width_driver can be replaced with any data item from the query. We have used the Margin and Unit price, but any other data item or calculation can be used as per the business requirement.

The multiplier (100) and divisor (10) are scaling factors as we need to scale the actual values to pixels. We know that Margin is in percentage and the value range is approximately 0.5 to 30. Hence, we multiply it by 100 to get the bars in the range of 50 to 300 pixels long. Similarly, Unit price is scaled down by 10 to get a bar width in the range of 5 to 50 pixels.

You can change the scaling to appropriate values in order to achieve nice looking bars.

There's more...

JavaScripts are executed on the client side within the web browser; hence there is no load on the server to produce these charts.

However, please note that this technique is useful only when users are interactively using the report in a web browser. Also, users must have JavaScripts enabled in their browser. It doesn't work for PDFs, Excel sheets, or any output format other than HTML.