Use SGPLOT to produce an animated .svg via the HTML or HTML5 ODS destinations

[DaveShea]

Hi,

I would like to produce a chart animation in a single .html file that contains a nice and simple Scaleable Vector Graphic (.svg) file that is the result of running Proc SGPLOT.

I seem to be able to do this with Proc GCHART, but I definitely want to use Proc SGPLOT.

I only seem to be able to get SGPLOT and the .svg parts working if I use the ODS PRINTER destination and that produces a .svg file, rather than an .html file.

I really do want a single .html file that, when opened in a browser, shows my nice animation, and crucially, displays the pause/refresh controls to allow the user to manage the .svg animation.

My demo code via the ODS PRINTER destination, using SASHELP.CARS, so you can all join in, looks like the following.

You will probably need to amend the path used in the ODS PRINTER File option.

GOptions Reset=ALL;
Options  PrinterPath=SVG 
         Animate=START 
         AnimDuration=0.75 
         PaperSize=("45cm", "15cm")
         SVGTitle="Daves Animation"
         ;

**************************************************************;
*Close ALL ODS destinations before we start.                  ;
**************************************************************;
ODS _ALL_ CLOSE;
**************************************************************;
*Open just the ODS PRINTER destination.                       ;
**************************************************************;
ODS PRINTER File="C:\Temp\SGPlotDemo03.svg";
**************************************************************;
*Use each SGPLOT to produce a frame of the animation.         ;
**************************************************************;
title1 "Plot of MPG City versus Horsepower - Cars from Asia" ;  
proc sgplot data=sashelp.cars; 
Where Origin="Asia";
  bubble x=horsepower y=mpg_city size=cylinders / fillattrs=(color=green transparency=.5);
run;

title1 "Plot of MPG City versus Horsepower - Cars from Europe" ;  
proc sgplot data=sashelp.cars; 
Where Origin="Europe";
  bubble x=horsepower y=mpg_city size=cylinders / fillattrs=(color=yellow transparency=.5);
run;

title1 "Plot of MPG City versus Horsepower - Cars from USA" ;  
proc sgplot data=sashelp.cars; 
Where Origin="USA";
  bubble x=horsepower y=mpg_city size=cylinders / fillattrs=(color=red transparency=.5);
run;
Title;

**************************************************************;
*Stop the animation.                                          ;
**************************************************************;
Options Animation=STOP;
**************************************************************;
*Close the ODS PRINTER destination.                           ;
**************************************************************;
ODS PRINTER CLOSE;

I hope that someone can put me out of misery here.

Am I chasing ghosts trying to get an .svg animation into a single .html file using Proc SGPLOT or is there something fundamental that I am missing here ? I do  not understand why Proc GCHART plays ball writing out to the ODS HTML destination, but Proc SGPLOT does not.

Many thanks,

Downunder Dave

[Rick_SAS]

I don't know the answer to your SVG question, but if your goal is to produce an animation that displays in a web page, here is an example of how to generate the frames for an animated gif:

Create an animation with the BY statement in PROC SGPLOT

[DaveShea]

Hi Rick,

Thanks for your reply along with the excellent example of creating an animated .gif file via the ODS PRINTER destination.

However, I am quite keen to find out if I can use SGPLOT with the ODS HTML destination to create an .html file that automatically has an .svg file embedded. The controls available to the user (pause/restart) make it more attractive over the .gif file.

Does anyone else out there have any ideas. If this is just not possible, due to the constraints of the combination of the ODS HTML destination, SGPLOT and an .svg file, I'll stop looking, but I would like know definitively that I am not just missing something.

I know that I can use GCHART to achieve this, but I really want to make use of what SGPLOT offers for charting.

Any more thoughts, anyone ?

[GraphGuy]

When I create an animated svg animation of sgplots, and view the svg file via Google Chrome, I get the pause & refresh controls at the top/right. So, you're saying you don't get those?

Here's my minimal code, and a screen-capture showing my browser displaying the svg animation (with the pause & refresh controls):

%let name=svganim;
filename odsout '.';

options printerpath=svg animate=start animduration=3
svgfadein=0 svgfadeout=0 noanimoverlay nodate nonumber;
ODS PRINTER CLOSE;
ODS PRINTER file="&name..svg";

proc sgplot data=sashelp.stocks;
by stock;
series x=date y=close;
run;

options animation=stop;
ods printer close;

[DaveShea]

Hi Robert,

Thanks for your reply along with the excellent example of creating an animated .svg file via the ODS PRINTER destination.

However, I am quite keen to find out if I can use SGPLOT with the ODS HTML destination to create an .html file that automatically has an .svg file embedded.

I want to create several .html files straight off the bat with the ODS HTML destination rather than use the ODS PRINTER destination which only seems to let me produce .svg files when I use SGPLOT. Ideally, my users would just be directed to a folder with a series of familiar .html files, rather than a series of .svg files which they are not used to.

I am just a bit puzzled as to how I am able to use GCHART with the ODS HTML destination and get nice .html files than contain an automatically embedded .svg file, but I cannot simply replace GCHART with SGPLOT in that same ODS HTML sandwich.

As I said in a previous reply, if I this is actually impossible, I will stop looking, but I'm ever hopeful. I keep thinking that there must be some option in the ODS HTML statement that I am missing.

Anyhow, thanks again. I love your graphics resource pages, by the way, they are my go to any chart questions or ideas !

Downunder Dave

[Rick_SAS · Accepted solution]

> if I this is actually impossible, I will stop looking, but I'm ever hopeful. I keep thinking that there must be some option in the ODS HTML statement that I am missing.

As always, the documentation is the ultimate source of what is supported. The documentation for 

"Creating Animated GIF Images and SVG Documents" states:

"When you create a multi-page GIF image or SVG document using the ODS PRINTER destination, you can animate the GIF image or SVG document that is created."

That seems definitive to me: Use the ODS PRINTER destination.

[DaveShea]

Hi,
Thank you all very much for you input to this post. Once again, I am left in awe as to how freely people share their ideas, time and patience.

Despite it appearing to be the case that the ODS HTML destination cannot presently do what I want, I will add an entry to the SAS Ballot because I think that ODS HTML should be able to do something like I need without too much fuss.

Thank you especially, @RobertAllison_SAS for referring us to the idea put forward by @RichardADeVenezia as a way of getting where I want to be, and also for an excellent example of what chart animations can do.

Cheers,

Downunder Dave

[GraphGuy]

Gchart is older/traditional SAS/Graph technology, whereas Sgplot is newer/different ODS Graphics technology (not part of the SAS/Graph product). They were developed separately, and they just do things 'differently'. That's the best explanation of "why" I can give you 🙂

As a work-around, perhaps you could tweak your SAS job to script out the html page, similar to what this person did in their sample code a few years ago ... except point to your svg instead of a gif. (you have to click the program/spoiler link, to see their code): https://communities.sas.com/t5/Graphics-Programming/Any-options-to-create-a-compressed-or-smaller-an...

Something like this:

filename htmlout "spiral.html";  

proc stream outfile=htmlout; BEGIN
<HTML><HEAD><TITLE>Animated spiral</TITLE></HEAD><BODY>
<IMG src='spiral.gif'>
</BODY></HTML>
;;;;

ods _all_ close;

[DanH_sas]

Here is a blog article Sanjay created a while back to do animated graphics with SGPLOT: https://blogs.sas.com/content/graphicallyspeaking/2013/05/23/animation-using-sgplot/

I believe there have been other papers describing this technique as well. Try Sanjay's examples, but change all of the GIF specifications to SVG.

Hope this helps!

Dan

[Phoenix_LJ]

It was a painful and exhilarating experience to finally find the answer I was looking for. Never use ODS HTML when creating a single SVG file using SGPlot.

Thanks,@GraphGuy

See,you've helped me so much!!!