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...

1. Drag a new HTML item on the list report as a new column.

2. 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:
   

3. Now define the first HTML item as:

   <script>
   var...