GTL for dashboards

[jins]

Can we create this dials as in

http://support.sas.com/kb/26/119.html

using GTL language?

Are there any sources which we can refer to?

[Jay54]

The simple answer is "Yes".  However, it will need some work, and two ways come to mind.  

If the dials and ranges on the dials are fixed, the easiest would be to design the dials in Photoshop, and then just display the needle on the dial using an overlaid plot.

However if each dial or KPI design is varying, and data ranges change, then you would need to draw the gauge itself using plot statements.  Can be done (justllike the example) using different plot statement, including the POLYGON plot statement.

[Jay54]

I am working on it...here is what I have so far.  I will add the ticks and the needle shortly and attach the code.

[jins]

Sanjay,

This looks impressive and i am keen to look at the code. Thanks a lot!!

[Jay54]

Here is the first cut.  This is not "Macro-ized" yet.  This POC has fixed ranges that need to be made dynamic.  

I am also awaiting some help from out UX experts.

%let gpath='.';
%let dpi=200;
ods listing gpath=&gpath image_dpi=&dpi;
ods html close;

data Tach;
  length lbl1 lbl2 vlbl $5;
  pi=constant ("PI");

  /*--Outer ring--*/
  start=0; end=360; step=2; off=90;
  ro=100; 
  do i=start to end+step by step;
    x1=ro*cos((i+off)*pi/180);
        y1=-ro*sin((i+off)*pi/180);
        output;
  end;

  /*--Inner Green segment--*/
  x1=.; y1=.;
  group=1;
  startAngle=40;
  start=startAngle; end=200; step=2; off=90;
  r=80; r2=70; rlbl=62;
  do i=start to end by step;
    x2=r*cos((i+off)*pi/180);
        y2=-r*sin((i+off)*pi/180);
        if mod(i,20) = 0 then do;
      x3=r2*cos((i+off)*pi/180);
          y3=-r2*sin((i+off)*pi/180);
      xlbl=rlbl*cos((i+off)*pi/180);
          ylbl=-rlbl*sin((i+off)*pi/180);
          if mod(i,40) = 0 then lbl1=put((i-startAngle)/4,2.0);
        end;
        else call missing (x3, y3, lbl1);
        output;
  end;

  /*--Inner yellow segment--*/
  start=200; end=240;
  group=2;
  do i=start to end by step;
    x2=r*cos((i+off)*pi/180);
        y2=-r*sin((i+off)*pi/180);
        if mod(i,20) = 0 then do;
      x3=r2*cos((i+off)*pi/180);
          y3=-r2*sin((i+off)*pi/180);
      xlbl=rlbl*cos((i+off)*pi/180);
          ylbl=-rlbl*sin((i+off)*pi/180);
          if mod(i,40) = 0 then lbl1=put((i-startAngle)/4,2.0);;
        end;
        else call missing (x3, y3, lbl1);
        output;
  end;

  /*--Inner red segment--*/
  start=240; end=320;
  group=3;
  do i=start to end by step;
    x2=r*cos((i+off)*pi/180);
        y2=-r*sin((i+off)*pi/180);
        if mod(i,20) = 0 then do;
      x3=r2*cos((i+off)*pi/180);
          y3=-r2*sin((i+off)*pi/180);
      xlbl=rlbl*cos((i+off)*pi/180);
          ylbl=-rlbl*sin((i+off)*pi/180);
          if mod(i,40) = 0 then lbl1=put((i-startAngle)/4,2.0);;
        end;
        else call missing (x3, y3, lbl1);
        output;
  end;

  /*--Value--*/
  call missing (x1, y1, x2, y2, x3, y3, xlbl, ylbl, lbl1 );
  value=20;  
  vlbl=put(value,2.0);
  xv=0; yv=-60;
  output;

  /*--Needle--*/
  xn1=0; yn1=0;
  xn2=r*cos((4*value+startAngle+off)*pi/180);
  yn2=-r*sin((4*value+startAngle+off)*pi/180);
  output;

  /*--Hub--*/
  xh=0; yh=0; output;
run;
/*ods html;*/
/*proc print;run;*/
/*ods html close;*/

ods graphics / reset attrpriority=color noborder width=2in height=2in imagename='Tach_2C';
proc sgplot data=tach aspect=1 nocycleattrs noautolegend noborder subpixel;
  styleattrs datacontrastcolors=(lightgreen yellow red);
  /*--Outer ring--*/
  series x=x1 y=y1 / lineattrs=(thickness=12 color=black);
  series x=x1 y=y1 / lineattrs=(thickness=10 color=lightblue);

  /*--Inner Green Ring--*/
  series x=x2 y=y2 / group=group lineattrs=(thickness=8 color=black);
  series x=x2 y=y2 / group=group lineattrs=(thickness=6);

  /*--Tick marks--*/
  vector x=x2 y=y2 / xorigin=x3 yorigin=y3 noarrowheads;

  /*--Tick values--*/
  text x=xlbl y=ylbl text=lbl1 / position=center;

  /*--Display value--*/
  text x=xv y=yv text=vlbl / position=center textattrs=(size=16pt weight=normal);

  /*--Display Needle--*/
  vector x=xn2 y=yn2 / xorigin=xn1 yorigin=yn1 lineattrs=(thickness=2)
         arrowheadshape=barbed;

  /*--Display Hub--*/
  scatter x=xh y=yh / markerattrs=(size=20 symbol=circlefilled color=gray)
          filledoutlinedmarkers dataskin=pressed 
          markerfillattrs=(color=silver) markeroutlineattrs=(thickness=3);

  xaxis display=none;
  yaxis display=none;
run;
    
    

[Jay54 · Accepted solution]

http://blogs.sas.com/content/graphicallyspeaking/2016/05/13/dial-kpi-using-sgplot/

[jins]

this looks great and thanks again.