Create a radial progress bar in Design Studio

This post is to go through the steps to implement a simple example of Gauge in Design Studio.

Circular progress bar, radial progress bar, gauge, or speedometer are the different names for a very effective component used in dashboards. It is an easy way to present a KPI in form of a percentage. This tutorial will go through the steps of implementing a simple gauge in Design Studio using standard components (CSS, script and a few panels). Steps have been tested on Design Studio 1.6 / IE 11 / Google Chrome 55.

1. Create a wrapper which will contain all the other objects of the gauge. For this I used a standard Panel Container.

• Component: Panel
• Name: “WRAP”
• Width: 140
• Height: 140
• CSS class: “wrap”

2. Create a spinner which will represent the first half of the circle (in red on the screenshot). Initially positioned vertically, on the left and hidden behind a panel, this spinner will progressively turn clockwise and appear as the progress bar for KPI values between 0% and 50%.

• Component: Panel
• Parent: “WRAP”
• Name: “SPINNER”
• Width: 120
• Height: 120
• CSS class: “spinner1”

3. Create a second spinner which will represent the second half of the circle (in green on the screenshot). Initially positioned vertically, on the right, and hidden, this spinner will progressively turn clockwise and appear as the progress bar for KPI values between 50% and 100%.

• Component: Panel
• Parent: “WRAP”
• Name: “SPINNER2”
• Width: 120
• Height: 120
• CSS class: “spinner2”

4. Create a left background panel which will be in charge of hiding the left side of the first spinner when percentage to display is between 0% and 50%.

• Component: Panel
• Parent: “WRAP”
• Name: “BGLEFT”
• Width: 120
• Height: 120
• CSS class: “bgLeft”

5. Create a right background panel which will be in charge of hiding the right side of the second spinner when percentage to display is between 0% and 50%.

• Component: Panel
• Parent: “WRAP”
• Name: “BGRIGHT”
• Width: 120
• Height: 120
• CSS class: “bgRight”

6. Create a script “setProgressBarAngle” taking a number (percentage) as a parameter to set the position of the spinners. This function will call a CSS class containing the code to rotate the spinners, and hide / unhide the backgrounds when appropriate.

• Function Name: setProgressBarAngle
• Input Parameters: kpivalue (type: int)

var vCss = "";
var vAngle = 0;
var vLog = "";
vLog = TEXT_LOG.getText();

var spinner0to180 = SPINNER;
var spinner180to360 = SPINNER2; 

if (kpivalue > 100){
	kpivalue = 100;
}
if (kpivalue <= 50) {
	vAngle = Math.round(kpivalue * 180 / 50);
	vCss = "spinner1 rotate" + vAngle;
	spinner0to180.setCSSClass(vCss);
 	spinner180to360.setVisible(false);
	vLog = vLog +" "+ vCss + "\n";
}
else if (kpivalue > 50 && kpivalue <=100){
	vAngle = Math.round((kpivalue - 50) * 180 / 50);
	vCss = "spinner2 rotate" + vAngle;
	spinner0to180.setCSSClass("spinner1 rotate180");
	spinner180to360.setCSSClass(vCss);
	spinner180to360.setVisible(true);
	vLog = vLog +" "+ vCss + "\n";	
}

6. Attach the CSS to the dashboard. The main CSS is used to define the properties of all the containers. The embedded CSS is used to set the angle of the spinners.

Main CSS:

@import url('radialprogress.css');

.wrap {
  	position: relative;
	background: white;
}
.kpivalue{
	display: table-cell;
	text-align: center;	
	justify-content: center;
	font-size: 50px;	
	display: table-cell;
	line-height: 60%;	
	font-style: light; 
	color: #0c4666;	
	font-family: "Open Sans", arial;  	
}


.bgRight {
  position: absolute !important;
  border: 10px solid #eeeeee;
  border-radius: 100%;
  clip: rect(auto, auto, auto, 70px);
  z-index: 1;
}

.spinner1 {
  position: absolute !important;
/*  border: 10px solid #064b84;*/
  border: 10px solid #ff0000;
  border-radius: 100%;
  clip: rect(auto, 70px, auto, auto);
  z-index: 2;
}
 
.bgLeft {
  position: absolute !important;
  border: 10px solid #eeeeee;
  border-radius: 100%;
  clip: rect(auto, 70px, auto, auto);
  z-index: 3;
}

.spinner2 {
  position: absolute !important;
/*  border: 10px solid #064b84;*/
  border: 10px solid #00ff40;
  border-radius: 100%;
  clip: rect(auto, auto, auto, 70px);
  z-index: 4;
}

Second CSS (to upload in the same folder as the previous one):

.rotate0{transform:rotate(0deg);}
.rotate1{transform:rotate(1deg);}
.rotate2{transform:rotate(2deg);}
.rotate3{transform:rotate(3deg);}
.rotate4{transform:rotate(4deg);}
.rotate5{transform:rotate(5deg);}
.rotate6{transform:rotate(6deg);}
.rotate7{transform:rotate(7deg);}
.rotate8{transform:rotate(8deg);}
.rotate9{transform:rotate(9deg);}
.rotate10{transform:rotate(10deg);}

// [...]
// Copy / Paste the line until you have the class ".rotate180"

.rotate180{transform:rotate(180deg);}

7. Order the panels in this Order:

• Top Parent: “WRAP”
• Then children of “WRAP”, in the following order: “BGRIGHT”, “SPINNER”, BGLEFT”, “SPINNER2”

Thanks for reading, please post a comment for any enquiry.

Mikael.