飞鸟快队棋牌

書名： IBM Cognos 8 Report Studio Cookbook
作者名： Abhishek Sanghani
本章字數： 574字
更新時間： 2021-08-06 17:15:51

Variable width bar chart using JavaScript

A report shows 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.

In this recipe, we will create 'Variable width bar chart' using JavaScript, which shows a bar for every product. The length of bar will indicate the Profit Margin, whereas width will indicate the unit price.

Getting ready

Create a simple list report with Product name, 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: ([Unit price]-[Unit cost])/[Unit cost].

How to do it...

Drag a new HTML item on the list report as a new column.
Unlock the report objects using Unlock button . Add four more HTML items in the column where you added above HTML item. The report should look like this in the Studio:
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 a data item.
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 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 this:

As you can see, Bugshield Lotion Lite has a huge profit margin. Whereas, Canyon Mule Extreme Backpack might have a relatively low 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 with 100 to get the bars in range of 50 to 300 pixels long. Similarly, Unit Price is scaled down by 10 to get bar width in 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 web browser. Also, users must have JavaScripts enabled in their browser. It doesn't work for PDFs, Excel, or any output format other than HTML.

官术网_书友最值得收藏!

IBM Cognos 8 Report Studio Cookbook

Variable width bar chart using JavaScript

Getting ready

How to do it...

How it works...

There's more...