26108 - Create a dial meter indicator for a dashboard

Sample 26108: Create a dial meter indicator for a dashboard

This example uses the Annotate facility and the GANNO procedure in the SAS/GRAPH software to create a single dial meter indicator for use in a dashboard. For a sample of a complete dashboard, see Create a dashboard with multiple dial meter indicators.

The gauge in this sample is created by specifying the values for the start-angle, end-angle, and color for each range and segment, and the value of the gauge pointer or arrow. Here are the values that are specified in a data set:

   data my_data2;
   length grtype color $ 8;
   input  grtype color start end;
   cards;
   segment cxff0000  0  50
   segment cx00cd00 50 100
   arrow   black     11 11
   ;

Here is the definition of the variables that are used in the data set:

GRTYPE: specifies the graphic type, which can be segment or arrow.
COLOR: specifies the color of the graphic as a SAS color or a HEX code color.
START: specifies the starting value for the color range.
END: specifies the ending value for the color range.

This data set is passed to the %DO_GAUGE macro along with several other parameters that control the look of the custom gauge chart. No error checking is done on these parameters. To keep this sample simple, short, and understandable, all values are assumed to be valid. Here is the syntax of the %DO_GAUGE macro:

%do_gauge(mydata, major_tick_by, minor_tick_by, titletext, foottext, pltname)

Here is a description of the macro parameters:

mydata: specifies the name of the data set that describes the color ranges and marker values.
major_tick_by: specifies the major tick mark increment.
minor_tick_by: specifies the minor tick mark increment.
titletext: specifies the text of the title above the gauge.
foottext: specifies the text of the footnote below the gauge.
pltname: specifies a name for the GRSEG in which the graph is stored temporarily.

Here is an example of a %DO_GAUGE macro call:

%do_gauge(my_data2,10,5,Scheduling,Percent Bid When Scheduled,sched1);

The %DO_GAUGE macro performs the following steps to draw the gauge:

To draw the gauge background, the macro annotates a pie for the outer ring of the gauge and fills the entire pie with a solid dark-blue color, which appears as the outer dark-blue ring around the outer edge. It then overlays a slightly smaller, lighter blue pie onto the dark-blue pie, which appears as the wider, lighter blue band just inside of the outer dark-blue ring. Finally, it overlays a smaller dark-blue pie and a gray circle onto the light-blue pie, which appears as the inner, narrow, dark-blue ring and the gray dial background.
To draw the ranges, the macro annotates the color ranges as pie slices whose start and end angles correspond to the values of their slice. For the gauge in this sample, the minimum segment must start at an angle of 240 degrees and progress in a clockwise fashion to a maximum of angle of 300 degrees. Also, the user must be allowed to set the minimum gauge segment to a value other than zero. To meet these requirements, the macro uses several equations to normalize the values and map them to the appropriate annotated pie angles.
To draw the major and minor tick marks, the macro uses the Annotate pie slice mode to position the cursor for each tick mark, and then draws a line through through the pie slice to the center of the gauge. After it draws all of the tick-mark lines, it then draws a slightly smaller annotated gray pie that covers the interior part of the range slices and the tick-mark lines. This results in a gray interior for the gauge chart and tick marks on the scale.
To draw the gauge needle, the macro uses the same process that it used to draw the tick-mark lines, except that it draws only one line and it does not draw the gray pie. Unlike the tick-mark lines, the needle line must extend to the gauge hub.
Finally, to draw the hub on which the gauge needle is connected, the macro draws a small white pie in the center of the gauge.

For additional information about creating dashboard applications with SAS/GRAPH software, see SAS/GRAPH Dashboard Samples.

These sample files and code examples are provided by SAS Institute Inc. "as is" without warranty of any kind, either express or implied, including but not limited to the implied warranties of merchantability and fitness for a particular purpose. Recipients acknowledge and agree that SAS Institute shall not be liable for any damages whatsoever arising out of their use of this material. In addition, SAS Institute will provide no support for the materials contained herein.

Note: This version is intended to be submitted as a SAS program in interactive or batch mode. For versions that can be executed in other ways, see

/* Specify the name for the output file. */
%let name=dialMeterInd;

/* Set output options. */
filename odsout '.';
goptions reset=all;
goptions device=gif;

/* Define fonts for indicator title and text. */
%let ftitle='swissb';
%let ftext='swissl';

/* Define colors for dial meter features. */
%let label_color=black;
%let outer_ring_color=cx33A1C9;
%let inner_border_color=cx36648B;
%let outer_border_color=cx36648B;
%let gray_color=cxdddddd;
%let hub_color=white;
%let hub_border=black;
%let minor_tick_color=gray66;
%let major_tick_color=black;

/* Define the location of the HTML page that supplies drill-down details 
   for the indicator.  If you don't have Internet access, you must put
   the target HTML file where your browser can access it, then change the 
   following URL to point to your location. */
%let hardcoded_drilldown=http://support.sas.com/rnd/datavisualization/dashboards/generic_drilldown.htm;       

/**************************************************************************/
/* The do_gauge macro creates an individual dial meter indicator. The dial 
meter is created by specifying the values for the start-angle, end-angle, 
and color for each segment, along with a value to specify the position of 
the pointer for the gauge.

The do_gauge macro accepts the following list of parameters:

mydata = name of the data set that contains indicator values
major_tick_by = increment for major tick marks
minor_tick_by = increment for minor tick marks
titletext = title to print above individual chart
foottext = title to print below individual chart
pltname = name of GRSEG to store the chart
*/

%macro do_gauge(mydata, major_tick_by, minor_tick_by, titletext, foottext, pltname);

%local mydata major_tick_by minor_tick_by titletext foottext pltname;

proc sql noprint;
   select min(start) into :min_start from &mydata where (lowcase(grtype) eq 'segment');
   select max(end)   into :max_end from   &mydata where (lowcase(grtype) eq 'segment');
   select min(start) into :arrow_val from &mydata where (lowcase(grtype) eq 'arrow');
quit;     

data ranges arrow text; 
   length html $500;
   length text $100;
   length function color $ 8; 
   length style $ 20;
   set &mydata;
   xsys='3'; ysys='3'; hsys='3'; when='A';  

   /* Draw color range segments */
   if grtype eq 'segment' then do;
      x=50; y=50; size=32;
      function='PIE';
      style='PSOLID'; 
      min_start=&min_start;
      max_end=&max_end;
      percent_start=((start-&min_start)/(&max_end-&min_start));
      percent_end=((end-&min_start)/(&max_end-&min_start));
      angle_start=240-((start-&min_start)/(&max_end-&min_start))*300;
      angle_end=240-((end-&min_start)/(&max_end-&min_start))*300;
      angle=angle_end;
      rotate= 
      (240-((start-&min_start)/(&max_end-&min_start))*300) 
      - 
      (240-((end-&min_start)/(&max_end-&min_start))*300)
      ;
      output ranges;
   end;

   /* Draw an arrow pointer by first drawing a fake pie slice, then 
      positioning the cursor at 100% to the edge of this invisible slice, 
      then drawing a line back to the center of the chart (coordinate 50,50). */
   else if grtype eq 'arrow' then do;
      x=50; y=50; size=32;
      function='PIE'; when='b'; style='PSOLID';  /* real pie slice is invisible/behind */
      angle=240-((start-&min_start)/(&max_end-&min_start))*300;
      rotate=.1;
      output arrow;
      function='piexy'; size=1; /* With piexy size is the 'multiplier' for the previous pie's size */  
      output arrow;
      x=50; y=50; when='a'; function='draw'; size=.5;  /* size is width of line now */
      output arrow;

      /* Add text labels at the bottom and top of the pie (in conjunction with
         drawing the arrow, so it is done only once. */
      function='label'; color="&label_color";
      style="&ftitle";
      angle=0; rotate=0;
      position='5'; size=6;
      y=98; text="&titletext";
      output text;
      y=5;  text="&foottext";
      output text;
   end;
run;


/* The dial meter has several different color bands and borders.
   This is done by overlapping several pies. */
data behind middle front hub; 
   length function color $ 8; 
   length style $ 20;
   xsys='3'; ysys='3'; hsys='3'; when='A';  
   
   /* Position the center of the gauge in the center of the page. */
   x=50; y=50; 
   
   /* Set the 'tool tip' for the chart to provide a link to an 
      HTML page with drill-down details. */
   length html $ 200;
   html='title='||quote( trim(left("&arrow_val"))) ||' '|| 
   'href="'||"&hardcoded_drilldown"||'"';
      
   function='PIE'; style='PSOLID'; 
   angle=0;
   rotate=360;
   color="&outer_border_color"; size=42; output behind;  /* outer border */
   
   /* Ensure that the tool tip appears only for the outer/biggest pie slice. */
   html='';
   
   color="&outer_ring_color"; size=41; output behind;    /* outer color swatch/ring */
   color="&inner_border_color"; size=36; output behind;  /* inner color border */
   color="&gray_color"; size=35; output behind;          /* gray area */
   color="&gray_color"; size=29; output middle;          /* gray area, inside colored ranges */
   color="&gray_color"; size=27.5; output front;         /* innermost gray area (chops the major tickmarks) */
   color="&hub_color";  size=2; output hub;              /* white center */
   color="&hub_border"; size=2; style="pempty"; output hub; /* black ring around white center */
run;

/* Draw the minor tick marks.  The process is similar to drawing the 
   arrow/pointer line, except that ticks overlap a smaller gray pie on 
   top of them so you don't see the whole line, but only the piece of the 
   line in the "tick" area. */
data minorticks;
   length text $100;
   length function color $ 8;
   length style $ 20;
   xsys='3'; ysys='3'; hsys='3';
   do tick = &min_start to &max_end by &minor_tick_by;
      x=50; y=50; size=32;
      function='PIE'; when='b'; style='pempty';  /* real pie slice is invisible/behind */
      angle=240-((tick-&min_start)/(&max_end-&min_start))*300;
      rotate=.1;
      output;
      function='piexy'; size=1;
      output;
      x=50; y=50; color="&minor_tick_color"; when='a'; function='draw'; size=.1;
      output;
   end;
run;

/* Major ticks marks are done in the same way as the minor ticks. */
data majorticks;
   length text $100;
   length function color $ 8;
   length style $ 20;
   xsys='3'; ysys='3'; hsys='3';
   do tick = &min_start to &max_end by &major_tick_by;
      x=50; y=50; size=32;
      function='PIE'; when='b'; style='pempty';  /* real pie slice is invisible/behind */
      angle=240-((tick-&min_start)/(&max_end-&min_start))*300;
      rotate=.1;
      output;
      function='piexy'; size=1;
      output;
      x=50; y=50; color="&major_tick_color"; when='a'; function='draw'; size=.1;  output;
   end;
run;

data majornums;
   length text $100;
   length function color $ 8;
   length style $ 20;
   xsys='3'; ysys='3'; hsys='3';
   do tick = &min_start to &max_end by &major_tick_by;
      x=50; y=50; size=32;
      function='PIE'; when='b'; style='pempty';  /* real pie slice is invisible/behind */
      angle=240-((tick-&min_start)/(&max_end-&min_start))*300;
      rotate=.1;
      output;
      function='piexy'; size=.75;
      output;
      function='cntl2txt';
      output;
      function='label'; when='a'; text=trim(left(tick)); angle=0; rotate=0; 
      position='5'; style="&ftext"; size=4.25; x=.; y=.;
      output;
   end;
run;

data gaugeanno; 
   set behind ranges minorticks middle majorticks front majornums arrow hub text;
run;

proc ganno annotate=gaugeanno des="" name="&pltname";                                               
run;                                                                            
quit;

%mend do_gauge;

/**************************************************************************/

/* Create an example data set with the variables required by the 
   do_gauge macro. */
data my_data2;
   length grtype color $ 8;    
   input  grtype color start end;
   datalines;
segment cxff0000  0  50
segment cx00cd00 50 100 
arrow   black     11 .  
;
run;

ODS LISTING CLOSE;
ODS HTML path=odsout body="&name..htm" (title="Custom Gauge Chart")
   style=minimal gtitle gfootnote;
goptions border;

goptions device=gif;
goptions xpixels=400 ypixels=300;
options mprint;

/* Call the macro  with specified data values to draw a dial meter indicator. */
%do_gauge(my_data2,10,5,Scheduling,Percent Bid When Scheduled,sched1);

ODS HTML CLOSE;
ODS LISTING;

These sample files and code examples are provided by SAS Institute Inc. "as is" without warranty of any kind, either express or implied, including but not limited to the implied warranties of merchantability and fitness for a particular purpose. Recipients acknowledge and agree that SAS Institute shall not be liable for any damages whatsoever arising out of their use of this material. In addition, SAS Institute will provide no support for the materials contained herein.

Type:	Sample
Topic:	Query and Reporting ==> Creating Reports ==> Graphical ==> Graph Types ==> Dashboards

Date Modified:	2009-01-07 14:35:15
Date Created:	2006-12-22 03:03:25

Product Family	Product	Host	SAS Release
			Starting	Ending
SAS System	SAS/GRAPH	All	9.1 TS1M3	9.1 TS1M3

Support

Sample 26108: Create a dial meter indicator for a dashboard

Operating System and Release Information