WEBI 4.0 Trick - Creating Progress Bar

[former_member197846]

Progress Bars can be used to show the performance of a particular entity on Dashboard to make it more visually appealing. Web Intelligence does not readily provide Progress Bar component. But with the help of some formatting, Progress Bar can be created in Web Intelligence. Here is how you can create a Progress Bar in Web Intelligence 4.0.

We will create a Progress Bar to show "How much percentage of the Target Quantity Sale is achieved?". The color of the Progress bar would change from Red to Green on achievement of Target. For this, we will use the efashion Universe.

1. Open the efashion Universe and pull "Quantity Sold" object in Result Objects. Refresh the query to get the data. Note that No Dimension is pulled in Result Objects.

2.  As there is no Target data available in efashion Universe, create a variable (dummy) adding some random number into "Quantity Sold" as Target. In real world scenario, there would be Actual and Target both coming from Database.

3. Select Chart --> Others --> Horizontal Bar Chart option and put the chart on the document.

4. Horizontal Bar chart requires a Measure as well as a Dimension. But as mentioned earlier, there is no Dimension pulled into the query. So create a Dummy Dimension variable in report.

5. As the Percentage Target Completion is to be displayed on graph, create a Variable "% Target Achieved" with formula as ("Quantity Sold"/"Target" )*100. Now drop "Dummy Dimension" and "% Target Achieved" variable on to the Chart. The chart will look like as shown below.

6. Right Click on the Chart and go to Format Chart option. Make the following formatting changes -

• Set the Legends off.
• Set Title and Design Display off for the Category Axis.
• Set the Title Display off for the Value Axis.
• In the Global tab,
  • General - Name the Chart as "Green" and set some Width and Height values. In my case I set it to 8 cm and 3.2 cm respectively.
  • Palette - Select "Palette Green" and Set Bar Effects = "Cylinder"
• In Value Axis tab,
  • Scaling - Set the Maximum value to 100.
  • Number - Set the Custom Format Pattern as ##%
• In Plot Area tab, set the background color for the Chart

After all the changes mentioned above. the chart should look like as shown below.

7. In order to show the Red Progress Bar when the Actual < Target, create a copy of the Graph and Select Red Palette in Chart Formatting. Name the new chart as "Red". Create a Flag Variable that will have "Red" value when Actual < Target and "Green" when it is otherwise.

8. Right Click on each Chart and set the "Hide When" Condition as Flag = "Red" for Green Chart and Flag = "Green" for Red Chart. Also set the same Relative Positions (distance from top and sides) for both the Charts so that one will superimpose on another.

This way based on the values for Actual and Target coming from database, the Green and Red Chart will toggle among themselves.