GTL for dashboards

jins — Sun, 08 May 2016 20:14:16 GMT

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?

Re: GTL for dashboards

Jay54 — Mon, 09 May 2016 00:11:35 GMT

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.

Re: GTL for dashboards

Jay54 — Mon, 09 May 2016 05:47:55 GMT

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.

Re: GTL for dashboards

jins — Mon, 09 May 2016 10:42:48 GMT

Sanjay,

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

Re: GTL for dashboards

Jay54 — Tue, 10 May 2016 04:21:18 GMT

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;

Re: GTL for dashboards

jins — Sat, 14 May 2016 11:12:24 GMT

this looks great and thanks again.

topic Re: GTL for dashboards in Graphics Programming

GTL for dashboards

Re: GTL for dashboards

Re: GTL for dashboards

Re: GTL for dashboards

Re: GTL for dashboards

Re: GTL for dashboards

Re: GTL for dashboards