Skip to Content
Author's profile photo Murali Balreddy

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
/wp-content/uploads/2013/06/gauge_231783.jpg /wp-content/uploads/2013/06/gauge_with_pointer_231807.jpg

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

/wp-content/uploads/2013/06/data_231784.jpg

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

/wp-content/uploads/2013/06/default_pie_231797.jpg

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

/wp-content/uploads/2013/06/rotated_pie_231798.jpg

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

/wp-content/uploads/2013/06/final_components_order_231800.jpg

Hope it helps.

Assigned Tags

      18 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Rama Shankar
      Rama Shankar

      Thanks Murali!

      Author's profile photo John Kavanagh
      John Kavanagh

      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!

      Author's profile photo HP pampana
      HP pampana

      Thank you very Much......

      Author's profile photo Dirk Mayrock
      Dirk Mayrock

      Hi, that looks really fantastic!

      But do you create a circular textbox? <i though they are always like boxes?

      Author's profile photo Murali Balreddy
      Murali Balreddy
      Blog Post Author

      Add following to CSS Style of a square Textbox

      border-radius: 50%;

      It will turn into a circle.

      Author's profile photo Dirk Mayrock
      Dirk Mayrock

      Thanks! It seems that I will have to learn lot more CSS in future 🙂

      I'm looking forward to see more post from you.

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Murali Balreddy
      Murali Balreddy
      Blog Post Author

      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.

      Author's profile photo Former Member
      Former Member

      Very creative.

      What is the use for TEXT_HIDDEN_TO_ENABLE_DELAY_AFTER_PROMPT?

      Author's profile photo Murali Balreddy
      Murali Balreddy
      Blog Post Author

      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 + "%"          );

      Author's profile photo Rama Shankar
      Rama Shankar

      Murali,

      Cool stuff - thanks for sharing!

      Rama

      Author's profile photo Jan Van Ansem
      Jan Van Ansem

      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.

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Murali Balreddy
      Murali Balreddy
      Blog Post Author

      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,

      Author's profile photo Sascha Landowski
      Sascha Landowski

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

      Author's profile photo Former Member
      Former Member

      Have you got an answer for this? 😐

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Former Member
      Former Member

      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