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]

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:

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.

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.

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.