How to create a drop down menu for a html file containing graphs

[SASER]

Hello there,

I have posted this on the programing forum and one of the person there have asked me to do a posting here as its the correct place to do so.

Could someone please share his/her knowledge on how to create a drop down menu on an html file using ods html and gplot. The skeleton stucture is below.

ods html file=

               body=

              content=

               frame=

               path=;

proc gplot;

    plot A*B;

    run;

proc gplot;

    plot C*D;

    run;

proc gplot;

    plot E*F;

    run;

ods html close;

This is how I created the graphs to the html file and its location.  What I would like to know is "HOW" and "WHERE" will I type in the code for the drop down menu for the html file. 

 The graphs that I generate are from a dynamic macro and its like this

A---1

      2

      3

B---1

      2

C---1

       2

       3

       4

       5

A , B , C are the levels that the graphs need to be generated for. and each level have different number of graphs to generate. The numbers 1,2,3 etc are the number of graphs generated. Its a dynamic one and have to find a way to do a "drop down menu" and select each number(1,2,3....) graph.

If my question is vague please do let me know so I can explain it in a better way. Hoping to see some suggestions.

Thank you,

Niran

[Reeza]

Can you add a link to your previous post? So others can see what's already been suggested. 

[SASER]

The link to the previous post is below:

https://communities.sas.com/t5/General-SAS-Programming/How-to-create-a-drop-down-menu-in-a-HTML-file...

[Cynthia_sas]

Hi:
Reeza suggested a Table of Contents structure in your other posting. I see in the code you've posted here that you are showing a Table of Contents structure.

That is the only "out of the box" type of linking that you can make ODS HTML do automatically. I gather that you don't like the Table of Contents because it is too long??? When coded correctly, the Table of Contents is quite nice for navigating multiple outputs which are displayed in one web page.

The issue with what you say you want is that a drop down menu has to usually be accomplished with non-SAS technology -- like coding an HTML form or coding JavaScript or PHP or ActiveX on the web page.

Let's just look at an HTML form -- ODS HTML won't generate a form for you. So basically, you would use ODS HTML to make all your individual files and then you would have to manually generate the HTML form with the drop down menu -- But then, once someone picked Graph A, #1 or Graph C #3, your form would have to execute some action -- even a simple. Again -- this is all HTML and web page technology. It sounds like your macro is already geared up to create all the graphs in one HTML page and you don't want to scroll down the page to see a particular graph of interest.

That's where the Table of Contents approach that Reeza suggested comes in. ODS HTML will automatically build you a Table of Contents that shows up on the left side of the browser page and has links to load your item of interest into the big display area on the right side of the browser page.

There are a lot of levels to the links in the Table of Contents by default, but, there are ways to streamline what you see in the Table of Contents so you get more of a simple list and less of a nested list that takes up a lot of space.

Since it is not entirely clear to me what your final result is, other than the fact that you want a drop-down menu that allows people to select the graphs.

If you have some of the more advanced software, like SAS/IntrNet and/or the BI Server components, there are other ways to generate links using the prompting framework. But assuming that all you have is Base SAS and are creating ODS HTML files, then your best resource for figuring out HTML forms and getting drop down menu is for you to talk to your web folks or look on the W3Cschools site for a tutorial on web forms like this one http://www.w3schools.com/html/html_forms.asp . Basically, you would take the "driver" files created by ODS HTML (the frame and the contents and maybe the body file) and replace them with the new HTML files that you manually create, where the main driver file is the HTML form with the drop-down and the secondary file would be the file that is going to cause the browser to load the choice from the form.

I hope this helps.

cynthia

[SASER]

Hi Cynthia,

Thank you for spending your time for my isssue. Yes the table of contents suggested by Reeza is a good idea, but its got too much of extra informations that is not needed. I have over written the sas generated contents to a custom one. I have attached an img with this post. Please do have a look at it. It may not be upto the expectation but did the best I could....

1. The img you see is one html file.

2. Has 3 columns:  a) left most one is the custom made contents.  

                              b) middle is what I need to make for drop down menu

                              c) right most one is the displayed graphs

3. The pic shows how each levels(A,B,C....) html file with graphs look like. Meaning each level will have its own html file with the graphs in it.

4. Each level will have some sub-levels(may be 1 or 2 or 4 or even 70)

5. Each sub-level will have a constant number of charts (usually 9 graphs each).

6. The problem that I face is that for a level with 70 sub-level, its hard to scroll down and see the graphs. So I need a drop down menu for the sub-levels. Meaning : Click on the drop down menu for the desired sub-level and the graphs for it will be displayed.

This is the concept that I would like to implement. But I have no idea how to create the drop down menue and link the sub-level from there to the sub-level of the graphs. Could you please help me with this Cynthia.

[Reeza]

You basically need a wrapper of some sort on top of your HTML page. If this is something you need to continuously do, it may make sense to use a different tool, such as SAS visual analytics or web report services to deliver dynamic reports.

I can see the usefulnes of being able to implement such a feature, but I feel it's not really a SAS related issue at this point. You can implement it so many ways, and many different languages that you would have to choose one first. Also, not all features will be supported across all browsers, so something to think about. 

[SASER]

Hi Reeza,

I have read some where that you can write all the html coding for the dropdown menu in a text file. Then create a sas "DATA SET" to read the html code. But I havent seen any example for it. According to you will this work ?. If so can you please give me some insight on it. 

Thanks 

Niran

[Reeza]

Post the link that mentioned this?

To me that would only bring the HTML/code into SAS, how would you place it into the ODS output such that it recognized it?

I'm also assuming, based on how your phrased your question, that you'd have to generate this TOC each time because the number of graphs under each groups isn't know ahead of time.

[Reeza · Accepted solution]

Heree someone has walked through it. Note they're using HTML and JavaScript and SAS ... three different languages to accomplish this.

http://www.lexjansen.com/wuss/2013/53_Paper.pdf

She walks through the process with sample code.

[SASER]

Thanks Reeza for the pdf link. I could not find a link for what you have asked for. I did find a long way to solve this.What I did is that I created seperate html  for each sub level. I was able to link the drop down menu sub-level item to  the sub-level html file. Its good for a small number of sub-levels. But for like 70 sub-levels, its not feasible. 

I am still working on how to link the drop down sub-level to the sub-level graphs in "one single"html file. By any chance if you or Cynthia come across the slightest idea of solving this , please to let me know. If this is possible just by using SAS and basic html coding 

, then I guess its going to make sas users create reports easily and well presentable.

Thanks,

Niran 

[Reeza]

The code in the paper doesn't work? It seemed to be exactly what you wanted. 

[SASER]

I apologize for the late reply. The code and the concept works. I had altered the concept and solved my problem. Thank you Reeza and Cinthia for the time.