1. INTEGRATE SAS REPORTS WITH GOOGLE MAPS Vineet Kaul

3. Dashboard - UI. View of United States showing commercial stores for Kroger Holdings, Inc. Options to select organizations for which revenue details are to be viewed. Click on “Dashboard” button displays result on map for selected organization Each overlay icon represents store location.

4. Click on each overlay icon would display an info message window with revenue details and the location of the store. Dashboard - UI.

6. Design. All modern web browsers impose a security restriction on network connections, which includes calls to XMLHttpRequest. This restriction prevents a script or application from making a connection to any web server other than the one the web page originally came from. This would prevent you from accessing data on the SAS server from your web application hosted on your domain (E.g. http://www.myserver.com) Instead of making your XMLHttpRequest calls directly to the web service, you make your calls to your web server proxy. The proxy then passes the call onto the web service and in return passes the data back to your client application. Because the connection is made to your server, and the data comes back from your server, the browser has nothing to complain about. In our case, proxy would be a perl script hosted on our web server. End user for our web application would invoke the perl script using Ajax. The script further accesses the SAS report on the SAS BI server and gets the XML output from the SAS report and passes it onto Ajax handler. SAS BI Server SAS BI server hosts stored process programs. SP render report data in XML stream that is used as input to Google map. Web application hosted on web server has dashboard pages. Dashboard displays Google maps with option to get data for various organizations. When user sends request, data for selected organization is accessed from SAS server and overlayed on map as icons. Requests are sent as Ajax XMLHttpRequest object. Ajax objects pings a proxy perl script which in turn invokes stored process on SAS BI server. Stored process responds by providing an XML data stream. The data stream is passed by perl script to the Ajax object. An XML parser handles the Ajax response and feeds Google map object which renders the map on the dashboard with SAS data mashed up with the map.

7. This is what the data looks like in SAS E Guide. The POC is implemented with two vendors – Kroger Holdings, Inc. and Safeway, inc. The SAS code calculates revenue for each of these vendor grouped by State. Revenue figures are arbitrary and could be any meaningful calculation. Our objective is to get the data from SAS E Guide report and mash it up with Google map to provide a powerful dashboard environment. This would leverage high end number crunching capability of SAS Analytics server with real-time maps. Other than using Google maps, similar technique could be used to leverage other web APIs like Google graphs, Google Visualization APIs etc. Data transfer is done using XML. So, any API or Web Service that can take XML data could be used to make distributed system that gives best of each individual component. SAS data – Report Structure.

8. This is how the data looks like in XML format. This format is the key to transfer data between various services over the NET. SAS data – XML Structure.

9. Create a Stored Process in SAS. A stored process is a SAS program that is stored on a server and can be executed as required by requesting applications. You can use stored processes for Web reporting, analytics, building Web applications, delivering packages to clients or to the middle tier, and publishing results to channels or repositories. Stored processes can also access any SAS data source or external file and create new data sets, files, or other data targets supported by SAS. Create stored process – General Information.

10. Refer to AOLDW library. Library accesses AOLDW schema on Oracle server. AOLDW schema is warehouse having vendor information. Select data from table and limit query on Vendor. This gives us flexibility to get data for vendor selected by user Transfer the data selected by query to _WEBOUT library. This would convert SAS dataset to XML data stream. The LIBNAME statement defines the output for the stored process as streaming output, or _WEBOUT. Uncheck the box for "Stored process macros". Refer SAS Usage Note 13599. Create stored process – SAS Code.

11. Provide the location of stored process on SAS Metadata server. This path would be referred when calling the report from URL. Create stored process – Metadata Location.

12. Set the execution server as Logical Stored Process Server. Create stored process – Execution Environment.

13. Define parameters for the stored process. We have defined parameter Vendor to dynamically get data for different vendors/organization based on user input. Create stored process - Parameters.

14. Select the Output Options to Streaming Output as we want to pass xml stream to Google maps. Create stored process – Output/Input.

15. Create stored process - Summary.

16. The Crypt::SSLeay package provides Net::SSL, which is loaded by LWP::Protocol::https for https requests and provides the necessary SSL glue. WWW::Mechanize, or Mech for short, helps you automate interaction with a website. It supports performing a sequence of page fetches including following links and submitting forms. CGI routines for writing to the HTTPD (or other) error log. Print XML output from SAS program back to calling browser. Provide the url to the Perl script. This would be the location of stored process on SAS Metadata Server. Observer that url has parameter “Vendor” attached to it after “&”. This provides the organization to stored process for which data is to be accessed. Provide SAS credentials and url to the Mech object. Mech object gets the output contents to the $page variable. Get contents back from the url using the Mech object. Proxy script design.

17. Explaining AJAX code – Create Map. Once we've created a map via the GMap2 constructor, we need to initialize it. This initialization is accomplished with use of the map's setCenter() method. The setCenter() method requires a GLatLng coordinate and a zoom level and this method must be sent before any other operations are performed on the map, including setting any other attributes of the map itself. When you create a new map instance, you specify a DOM node in the page (usually a div element) as a container for the map. We obtain a reference to this element via the document.getElementById() method. In this example, “SASReport” is the Id of the div element on the page. GMap2 - the Elementary Object URL points to the location of the JavaScript file that includes all of the symbols and definitions you need for using the Google Maps API. Your page must contain a script tag pointing to this URL, using the key you received when you signed up for the API.

18. Explaining AJAX code – Send request to proxy. The XMLHttpRequest object implements an interface exposed by a scripting engine that allows scripts to perform HTTP client functionality, such as submitting form data or loading data from a server. The XMLHttpRequest Object sends request to the proxy perl scrip on the server. Callback method assigned via this attribute. processChange() function is assigned to process response from XMLHttpRequest object.

19. Removes all overlay from the map. The old overlays are to be removed every time a new organization is loaded. The response from the proxy script is returned in responseText object. Use Microsoft XMLDOM to parse the XML data. Loop through the XML data and call showAddress() function. The function implements overlays on the map for each location and assigns Click() event to each overlay item to show revenue details when user click on it. The showAddress() is explained in detail in later slides. Explaining AJAX code – Handle response from proxy.

20. We create an icon using the G_DEFAULT_ICON type You can access the Google Maps API geocoder via the GClientGeocoder object. Use GClientGeocoder.getLatLng() to convert a string address into a GLatLng. This method takes as parameters a string address to convert, and a callback function to execute upon retrieval of the address. The markers parameter defines a set of one or more markers to attach to the map image. A GMarker marks a position on the map. It implements the GOverlay interface and thus is added to the map using the GMap2.addOverlay() method. A marker object has a latlng, which is the geographical position where the marker is anchored on the map, and an icon. Registers an event handler for a custom event on the source object. Click() even has been added to display revenue and address when user clicks on the icon. Explaining AJAX code – Add overlays to map.

22. Thank You Vineet Kaul Manager, Inforte – B&D GDC. [email_address]