How To: Create a Gauge from a Pie Chart..
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.
Thanks Murali!
Very clever! I could have used something like this in a recent Proof of Concept, I will keep it in mind for the future. Thank you!
Thank you very Much......
Hi, that looks really fantastic!
But do you create a circular textbox? <i though they are always like boxes?
Add following to CSS Style of a square Textbox
border-radius: 50%;
It will turn into a circle.
Thanks! It seems that I will have to learn lot more CSS in future 🙂
I'm looking forward to see more post from you.
HI Murali, Thanks for a nice blog. Expect, we can use the CSS functionality to create cool applications using DS.
Do you have any references to know all possiblities of chaging the look and feel of CROSSTAB component, standard one does'nt fit the way we would like to present the information. Kind regards, Anil
Read this blog by Jeroen.
I don't think you can use the CSS class property of crosstab to alter the style, as a crosstab is made up of different elements like table, th, tr etc.
Instead, in your Custom CSS at the application level, duplicate all the SAP provided classes that you need to change and change them accordingly.
When the client browser process, the styles defined in the last document (and this is anything in the Custom CSS) overrides any previous styles and so your style is delivered.
To get all related SAP CSS files used in your application, in your browser, select PF12 and see the source.
Hope it helps.
Very creative.
What is the use for TEXT_HIDDEN_TO_ENABLE_DELAY_AFTER_PROMPT?
In this application, I submitted my prompt using the radiobutton. After I submit the prompt, I use the data from the datasource. Most of the time, my datasource is not getting updated with the new data quickly, but only has the old data. In order to introduce a time delay, I added a setText method to kill some time.
Introducing this time delay by setText worked fine with my case. But not in real world situation, where the query return is slow.
I should have as well used DS_1.reloadData(). I hope it will use the new prompt value.
Again, this I did, before exploring reloadData(). reloadData() will be the appropriate solution.
Here is the code I used with Radiobutton onclick().
APPLICATION.setVariableValue("VAR_20130615030859", RADIOBUTTONGROUP_PROMPT_SELECTION.getSelectedValue());
TEXT_HIDDEN_TO_ENABLE_DELAY_AFTER_PROMPT.setText(RADIOBUTTONGROUP_PROMPT_SELECTION.getSelectedText());
// I should have gone with DS_1.reloadData();
percentOff = 100 * DS_1.getData("4SETS4305MVSH8VQYJRM887WU", {}).value / DS_1.getData("4SETS4305MVSH8VSZGTGHAXOU", {}).value;
percentOffStr =Convert.subString(Convert.floatToString(percentOff), 0, 5);
TEXT_GENERATED_DATA_STRING.setText( RADIOBUTTONGROUP_PROMPT_SELECTION.getSelectedValue()+
": " + percentOffStr + "%" );
Murali,
Cool stuff - thanks for sharing!
Rama
The nerd in me really likes this - well done and full marks for creativity!
From system maintenance point of view this is a bit of a 'smoke and mirrors' solutions so hopefully the next SP or release will have an out of the box gauge.
In the meanwhile, I will dazzle my customers with your solution 🙂
Many thanks for sharing!
Jan.
Really good!
Am I right to think that your example definition shows version 1 without gauge indicator?
What needs to be added to get something like version 2 with gauge indicator?
Ulrich
Yes, version 1 is based on this blog. Version 2 with gauge indicator is not explained here.
For gauge indicator, I created the hand and the tip using textbox. Then I placed them on a panel. Based on the percentage value, I rotate the panel. This panel is rotated using CSS. Each integer of the percent has a class, so for 100 values, there are 100 classes. Based on the percent value I set the correct CSS class as shown below
var myPointerCSS = "myPointer" + percentOffInt;
PANEL_GAUGER_POINTER.setCSSClass(myPointerCSS);
And my Custom CSS has the following code
.myPointer0
{
-ms-transform: rotate(0deg);
}
.myPointer1
{
-ms-transform: rotate(1.8deg);
}
.myPointer2
{
-ms-transform: rotate(3.6deg);
}
.myPointer3
{
-ms-transform: rotate(5.4deg);
}
....
....
.myPointer99
{
-ms-transform: rotate(1.8deg);
}
.myPointer100
{
-ms-transform: rotate(180deg);
}
This is not the cleaner way to do but this is the best I can do with what DS and CSS supports.
Thanks,
Hi,
where can I add the custom CSS to the "Chart"?
In the properties list i have the field css class but this seems to be for a whole class, that does not exist yet...
Have you got an answer for this? 😐
Hi,
Excellent article,
It works very nice but I do have one issue regarding the tooltips,
If I want them to still appear they are being hidden in some cases behind the "text circle"
Any idea how to walk around that?
Shlomi
Hi Murali,
I am actually trying to achieve this but I am not able to hide the chart with a textbox. It would be really nice if you could help me out in the same.
Thanks
Bedabrata