Login Register Wishes Forum About
Language Reference » Charting functions » drawProgress
Help topics
Latest updates
4669d  replaceImageMapTitle
4669d  replaceImageMapValues
4669d  createFunctionSerie
4669d  setAbsicssaPosition
4669d  negateValues
  Download as PDF
  Print this page
  Share this page
  Create an account
  Feed the updates!
Google AdSense
drawProgress - Draw percentage progress bars

This function allows you to draw customisable progress bars. All the drawing parameters are given trough a $Format array. To learn more about this please read the Format array guide.

To draw progress bars you don‘t need to have a pData object. Only one value between 0-100 is required.

Calling this function
Where :

X1,Y1 are the coordinates where the box will start.
Percent is a value between 0-100.
Format is an array containing the drawing parameters of the progress bar.

Customisation array - Tune up your bars!

It is possible to customize the progress bar rendering by playing with this array. Providing a detailled configuration is not mandatory, by default the bar will be drawn with a width of 200px, a height of 20px and basic color sets.

The filled area color can be set with R, G, B.
The filled area border color can be set with BorderR, BorderG, BorderB.
The control area filling color can be set with BoxBackrR, BoxBackG, BoxBackB.
The control area border color can be set with BoxBorderR, BoxBorderG, BoxBorderB.
You can use the Surrounding option to define the border color of the filled area. This value will be added to the R, G, B factors to define the border color.
You can use the BoxSurrounding option to define the border color of the control. This value will be added to the BoxBackrR, BoxBackrG, BoxBackrB factors to define the border color.
You can make labels visible setting ShowLabel to TRUE.
You can set the text spacing with Margin.
You can define the control orientation with Orientation (See below).
You can define where the labels will be put with LabelPos (See below).
The alpha transparency factor can be set with Alpha.
You can break the angles of surrounding area by setting NoAngle to TRUE.

If you want to fill the area with a gradient box instead of a solid color, you can specify :

The gradient end color can be set with RFade, GFade, BFade.

If you use the gradient option, you can define an alpha surrounding box around the drawn aread playing with the Surrounding parameter. This parameter will be used as the alpha value of the surrounding box (small values like 30 will produce the best visual effect).

The control orientation can be either set to ORIENTATION_HORIZONTAL or ORIENTATION_VERTICAL.

Depending of the orientation choosen, the label position can be set to LABEL_POS_LEFT, LABEL_POS_CENTER, LABEL_POS_RIGHT, LABEL_POS_TOP, LABEL_POS_BOTTOM, LABEL_POS_INSIDE.

Sample script

 /* Enable shadow support */

 /* Left Red bar */
 $progressOptions = array $progressOptions = array("R"=>209, "G"=>31, "B"=>27, "Surrounding"=>20, "BoxBorderR"=>0, "BoxBorderG"=>0, "BoxBorderB"=>0, "BoxBackR"=>255, "BoxBackG"=>255, "BoxBackB"=>255, "RFade"=>206, "GFade"=>133, "BFade"=>30, "ShowLabel"=>TRUE);

 /* Left Orange bar */
 $progressOptions = array("Width"=>165, "R"=>209, "G"=>125, "B"=>27, "Surrounding"=>20, "BoxBorderR"=>0, "BoxBorderG"=>0, "BoxBorderB"=>0, "BoxBackR"=>255, "BoxBackG"=>255, "BoxBackB"=>255, "NoAngle"=>TRUE, "ShowLabel"=>TRUE, "LabelPos"=>LABEL_POS_RIGHT);

 /* Left Yellow bar */
 $progressOptions = array("Width"=>165, "R"=>209, "G"=>198, "B"=>27, "Surrounding"=>20, "BoxBorderR"=>0, "BoxBorderG"=>0, "BoxBorderB"=>0, "BoxBackR"=>255, "BoxBackG"=>255, "BoxBackB"=>255, "ShowLabel"=>TRUE, "LabelPos"=>LABEL_POS_LEFT);

 /* Left Green bar */
 $progressOptions = array("Width"=>400, "R"=>134, "G"=>209, "B"=>27, "Surrounding"=>20, "BoxBorderR"=>0, "BoxBorderG"=>0, "BoxBorderB"=>0, "BoxBackR"=>255, "BoxBackG"=>255, "BoxBackB"=>255, "RFade"=>206, "GFade"=>133, "BFade"=>30, "ShowLabel"=>TRUE, "LabelPos"=>LABEL_POS_CENTER);

 /* Right vertical Red bar */
 $progressOptions = array("Width"=>20, "Height"=>150, "R"=>209, "G"=>31, "B"=>27, "Surrounding"=>20, "BoxBorderR"=>0, "BoxBorderG"=>0, "BoxBorderB"=>0, "BoxBackR"=>255, "BoxBackG"=>255, "BoxBackB"=>255, "RFade"=>206, "GFade"=>133, "BFade"=>30, "ShowLabel"=>TRUE, "Orientation"=>ORIENTATION_VERTICAL, "LabelPos"=>LABEL_POS_BOTTOM);

 /* Right vertical Orange bar */
 $progressOptions = array("Width"=>20, "Height"=>150, "R"=>209, "G"=>125, "B"=>27, "Surrounding"=>20, "BoxBorderR"=>0, "BoxBorderG"=>0, "BoxBorderB"=>0, "BoxBackR"=>255, "BoxBackG"=>255, "BoxBackB"=>255, "NoAngle"=>TRUE, "ShowLabel"=>TRUE, "Orientation"=>ORIENTATION_VERTICAL, "LabelPos"=>LABEL_POS_TOP);

 /* Right vertical Yellow bar */
 $progressOptions = array("Width"=>20, "Height"=>150, "R"=>209, "G"=>198, "B"=>27, "Surrounding"=>20, "BoxBorderR"=>0, "BoxBorderG"=>0, "BoxBorderB"=>0, "BoxBackR"=>255, "BoxBackG"=>255, "BoxBackB"=>255, "ShowLabel"=>TRUE, "Orientation"=>ORIENTATION_VERTICAL, "LabelPos"=>LABEL_POS_INSIDE);

 /* Right vertical Green bar */
 $progressOptions = array("Width"=>20, "Height"=>150, "R"=>134, "G"=>209, "B"=>27, "Surrounding"=>20, "BoxBorderR"=>0, "BoxBorderG"=>0, "BoxBorderB"=>0, "BoxBackR"=>255, "BoxBackG"=>255, "BoxBackB"=>255, "RFade"=>206, "GFade"=>133, "BFade"=>30, "ShowLabel"=>TRUE, "Orientation"=>ORIENTATION_VERTICAL, "LabelPos"=>LABEL_POS_CENTER);

This sample script may look a bit tricky because of the multiple options that can be configured on the progress bars controls. You can also call this function without any additional parameters :

 /* Draw a basic progress bar */
Last updated on 11/18/2009 
by Jean-Damien 
Linked resources
  There is no linked topic yet.
Community comments
  No comments have been posted yet.
© Copyrights
Components used on this web site : Famfamfam icons has been made by Mark James, Rounded corners lite has been coded by Cameron Cooke and Tim Hutchison, SyntaxHighlighter has been written by Alex Gorbatchev. pChart and this web site have been created by Jean-Damien POGOLOTTI. This documentation contains 185 pages and 56 comments. 415 users have registered. This page has been rendered in 0,01 seconds. Wiki revision 1.37.