X Graph - (by Felice Di Stefano)
This server behavior will create a dynamic image representing a chart from the data in a recordset. It can be represented actually in 3 fashions, as Histogram, as horizontal Bars or as Lines, and two mode display, Flat and 3D. It is required that a recordset is created, before applying it, which will contain the list of items or labels and their values in numeric format plus an optional column for defined colors to assign to the items. The colors must be inserted in hexadecimal format with a leading (#) as you usually see on DW (ie: #FF5BD9). You will not define fixed colors for each item on the UI dialog since this would not be practical, the number of items is not fixed, you may have 4 items as you may have 50 items or more, but we will see below what we can do with colors.
Note: This code requires that the GD library is properly installed on the server, otherwise it will not work.
Applying
First let's understand that this behavior must not be applied on the page where the graph will be displayed but on another page on its own. Create a new php page and give a name as you would give it to an image, just to be more appropriate, then create the recordset from which the data will be recalled and after apply the X Graph. You can close it after that, then open the page where the graph will be displayed and insert the prior created page where you want, exactly like it was an image, open the image dialog and browse to the file, don't bother if it has the php extension, just assign it.
| Recordset: | Here you will assign the recordset created for the purpose. |
| Label Col: | Assign here the column will be used as label. |
| Label Add: | This is an optional column, you may use it in case you want composed label as, for example, first name and last name. You see a checkbox beside it, check it to enable the list or viceversa. |
| Value Col: | Assign here the column will be used as value which will determine the status of the graph. |
| Graph Type: | Here you
have 3 choices, the Histogram (vertical bars), Bars (horizontal bars) and
Lines. Choose which is more convenient for you. Consider that depending on the source a type of graph may be more suitable than another, for example a Lines graph would better represent developments in time as sales per month, when a Histogram could better represent volumes per item. |
| Color Choice: | Here we
have 4 choices used to colorize the bars in the graph and legenda. "Defined": as mentioned above this option will retrieve the colors from the column of the database in case you created it. "Unique defined": choosing this option will enable the below color picker where you can define a color equal for all bars or lines. Assume we have a long list it would not be practical a long legenda and colorize the entire list, instead you may apply labels beside or below the bars and use the same color for all bars. Or if you use a Lines graph a unique color would be more adequate. "Random": this will disable any choice from the dialog and will assign randomly different colors to the bars any time the page is reloaded. This is a solution in case you don't want to think what colors to assign. "Unique random": this is like the 'Unique defined' but it will be assigned randomly any time the page is reloaded. |
| Color Col: | In case you have chosen the Defined option from the Color Choice you will have to assign here the column from the recordset. |
| Unique Color: | In case you have chosen the 'Unique defined' option from the Color Choice you will have to define here the unique color to use. |
| Title: | This is not required but you may give a title to the graph which will appear above it. You may leave it blank. |
| Font Size: | This is only for the title and has only 2 choices Small and Big, both in bold. |
| Bg Color: | This is the background color of the entire image. A light color it would be always preferable but taste is taste. |
| Font Color: | This is the general font color excluding the scale font. |
| Graph Height: | This together the Bars Width will determine the size of the graph not of the entire image, but of course it will condition it. You define here exactly the height of the graph in pixels. Note that when used the Bars type display this will be the width of the graph. |
| Bars Width: | This together the Graph Height will determine the size of the graph not of the entire image, but of course it will condition ate it. The width is a fixed size of the bar base which can be multiplied by 1 to 10. It apply also to Lines. |
| Scale Type | Determine
what is the base of the scale (meter) to which values refer and it works
in combination with the Perc/Base Unit. The type can be Unit or Percent.
When Unit is chosen the scale will always refer to the highest value proportioned to the defined Base Unit. That is, if the highest value is 134 and you assigned a Base Unit of 100 the top of the scale will be 200, if you assigned 10 the top of the scale will be 140. You may use any base, for example 16 for hexadecimal or 8 for octal etc. When Percent is chosen the scale will refer to a maximum defined in the Perc Base and will display in percentage with a standard top of 100%, but it can be exceeded. To define a percentage we must always assume a maximum which represent the 100%, it can be 300, 10000, 2500000 or what you like, the percent will be referred to the defined percent base. Sometimes the maximum quote can be exceeded, in this case the scale will re-proportionate creating a headroom over 100. When percent is selected the percentage of each item rounded to 2 decimals will be displayed beside the name in the legenda. |
| Perc/Base Unit: | Here is where you define the base for the scale depending on the chosen scale as explained above. |
| Lines Interval: | Here define the number of lines will appear in background which refer to the scale. That is, if you insert 4 the scale will be divided in 4 section and if for example the highest scale value is 100 you will have 0, 25, 50, 75, 100 and relative lines. |
| Display: | With this you can choose the display mode, Flat or 3D. |
| Legenda: | Checking this box the legenda will be added to the image on the left side. |
| Infobase: | Checking this box information of the used base will appear above the legenda or below the Title if the Legenda is not included. |
| Labels: | Checking this box will add labels beside or below the bars. Sometimes may be more convenient then using the legenda. |
| Add Values: | Checking this box values will appear on each bar. |
by FELIXONE