How To: Create a Gauge from a Pie Chart..

[murali_balreddy2]

This blog is for those who cannot wait until SAP releases a gauge component.

In this blog, I will show how to create a gauge (as shown in the following image) from a pie chart and a few text boxes using the CSS Transform property, I blogged here

Version 1	Version 2

First, let me talk about the datasource. Following is the datasource view of a BW query showing the quantity sold by the selected country (through a prompt), the quantity sold by all other countries and total quantity sold

I created a pie chart with the above datasource and it appears as

Since the pie chart always start plotting at 90 degree vertical, I use the CSS transform (-ms-transform: rotate(270deg); ) to rotate it to 270 degree, so that the total (which will always be 50%) is shown in the lower half as

Now all that is needed is to simulate a gauge using textbox masking.

a) hide the lower half of the chart with a textbox

b) hide the center portion of the chart with a circular textbox (enable shadows for appearance)

c) show a textbox with data at the center

d) disable chart selection and data text selection (item c above) with a circular textbox  (same size of chart) of opacity 0

Finally add a radio button group to enable prompt selection to select different countries.

See the following image to see the list and order of the components used in designing this gauge

Hope it helps.