有一张显示所有产品的单位成本和单位价格的报表。同时，还使用这两个指标计算利润率。
用户自然对单位价格和利润率更高的产品更感兴趣。
在此例中，我们将使用JavaScript创建“可变宽度条形图表”，用来为每一个产品显示一个条形图。条形图的长度将由利润率决定，而宽度，将由单位价格决定。
准备工作…
使用Product name，Unit cost和Unit price作为列创建一张简单的列表。添加一个calculated item到列表中用以计算Profit Margin，将其命名为Margin，并定义其表达式为：
([Unit price]-[Unit cost])/[Unit cost]
如何实施…
1. 向列表中添加一个HTML项目作为一个新的列。
2. 使用Unlock按钮解锁报表，并在HTML列中添加4个新的HTML项目。这时报表看起来如下图：
3. 定义第一个HTML项目为：
<script>
var barlen=100*((
4. 对于第二个HTML项目，设置其Source Type属性为Data Item Value，并选择Margin作为data item。
5. 定义第三个HTML项目为：
)) ;
var barheight=((
6. 对于第四个HTML项目，设置其Source Type为Data Item Value，并选择Unit price作为其data item。
7. 定义第五个也就是最后一个HTML项目为：
)/10) ;
var myBar='<div style="background-color:blue; width:' +barlen+'; height:' + barheight +'"></div>' ;
document.write(myBar) ;
</script>8. 运行并测试报表。报表看起来应该如下图：
如我们所见，Bugshield Lotion Lite有很大的利润率。反之，Canyon Mule Extreme Backpack的利润率相对较低，但是他的单位价格较高。所以它也是一个很重要的产品。
简言之，条形图的面积标示了一个产品在商业收益中的重要性。
工作原理…
Report Studio有内置的图表对象，它允许我们构建复杂详尽的图表。但是在此例中，我们并没有太多复杂的需求，我们只需要突出显示具有较高收益能力的产品。
此例中使用的JavaScript脚本有如下结构：
<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>我们把上面的结构分割在五个HTML项目中，这样length_driver和width_driver就是可以使用查询中的对象替换。次数我们使用Margin和Unit price。当然按照不同的需求，我们可以使用其他任何的查询或计算项目。
代码中使用的乘数（100）和除数（10）作为缩放因子，我们用来控制实际显示的条形图的像素值。我们知道Margin是一个百分数，并且其值在0.5至30之间。这里我们乘以100，控制条形图的长度在50至300像素之间。类似的，我们将Unit cost除以10将条形图的宽度控制在5至50个像素之间。
我们可以修改缩放比例为一个合适的值以使图形显示的更合理。
更多…
此例中，我们把代码分别放在5个HTML项目。事实上，代码也是可编辑在一个HTML项目中的。具体实现，大家可以查阅相关资料。
因为此例图形的生成，是在客户端浏览器中实现的，对服务器无压力。但是，也是这个原因，图形在PDF输出，Excel输出中都无效。