HighCharts Presentation Result

This post is based on SAS Global Forum 2016 presentation that can be dowloaded here.

If you use SAS, have you ever wondered if modern Web 2.0 technologies can be combined with SAS data sets? How to make dynamic graphs, so that users can explore the data in an intuitive way, without any prior SAS knowledge? In this demo, we will show how to transform a boring data set, such as sashelp.stocks into an attractive chart that allows the user to review any time period, zoom in and out and export the graph as an image. All of these features with only two DATA steps and one SORT procedure, or 57 lines of SAS code!


The visualisation is done by a JavaScript library called HighCharts. JavaScript library is a collection of code that is executed to modify HTML page in some way. To achieve the visualisation shown on previous slide, two stored processes must be defined with two data steps as their code content. We are using two stored processes in order to implement Model-View approach, where one stored process is responsible for providing data (Model) and the other stored process is providing visualisation (View). The elements are highly reusable because of separation of concerns, as the same model could be linked to a number of visualisations and same visualisation can be linked to a number of models. So let begin by reviewing the code for the first SAS stored process!

1st Stored Process (model)

First stored process (Model) provides the data in JSON format. JSON stands for JavaScript Object Notation. It is a lightweight data-interchange format. It is easy for humans to read and write and it is easy for machines to parse and generate. JSON is a subset of JavaScript. There are two main methods to generate JSON. If you are on SAS 9.4, then the simplest way is to use PROC JSON. Another way is to use put statements to direct SAS to output the data in JSON format.
Code lines 1-3 are filtering and sorting the data. You might have noticed a parameter or a macro variable called “stock”. This parameter is passed by the second stored process. We will come back to it later. Line 5 instructs SAS that we are not actually creating a data set, so we are using _null_ for the dataset name. Line 6 instructs SAS to read in the sorted data while setting a marker for end of file in a form of EOF Boolean which will get used later. Line 7 instructs SAS to output to a SAS reserved _webout fileref that then gets send to the web browser. Line 8 produces date in JavaScript format. JavaScript counts number of milliseconds from 1970. INTCK function is used to count the number of days between 01/01/1970 and stock trade date, then it gets multiplied by the number of milliseconds in one day. Lines 9 – 12 actually produce the JSON data where line 9 outputs the first name pair that is used by second stored process to identify which stock is described. Line 9 also opens an array of arrays which will get populated with name pairs described on line 10. These name pairs contain the date in milliseconds and the stock close price. Lines 11-12 either separate name pairs with comma or close the arrays if the end of file has been reached. End of file is marked by Boolean EOF which was defined earlier. The result looks a bit like this:

2nd Stored Process

Second stored process (View) visualises the data. In essence, it is sends an html file to the user’s browser that then downloads necessary JavaScript libraries and calls the first stored process using AJAX (Asynchronous JavaScript and XML) method.
Lines 1-2 instruct SAS, that we do not intend to create a data table, but we want to output to a reserved fileref _webout. Put statement on Line 3 instructs SAS to output anything that follows into the _webout. The rest of the lines are pure HTML and JavaScript that make up the functionality of the webpage and therefore of the visualisation. Line 4 opens the body and the head of the HTML document. Lines 5-7 load JavaScript libraries that provide the functionality for visualisation. The libraries are jQuery, HighCharts and HighChartsExport. jQuery simplifies JavaScript syntax by introducing shorthands. HIghCharts introduces visualisation functionality and HichChartsExport introduces file export functionality to the graphs generated by HighCharts. Lines 8-23 defines optional configuration, such as line colours, array names, comparison type. Lines 24-30 set out a do loop in JavaScript that instructs the browser to open the first stored procedure and request the data for each of the stock names provided. This allows for a large amounts of data loaded quickly. The requested stock name is the parameter “stock” used in the very beginning by the first stored process. Line 31 closes the custom script and the html head section. Line 32 sets out a div html element that will be modified by JavaSctipt to contain our visualisation. We passed the name of the element to JavaScript on line 13. Line 33 closes HTML elements and instructs SAS to run the code. Now if you open the location of the second stored process in your browser, you should see visualisation. The results could be seen on video below.

There are hundreds, if not thousands open source libraries out there. Many of them offer countless methods of
visualisations, tools and utilities. The same method and technique integration with SAS can be applied to any of them. It opens the door for a very cost effective and flexible data exploration, dashboards and tools that previously were either very laborious to build with SAS or outright impossible.

About author

Vasilij Nevlev
Senior SAS Consultant
Vasilij Nevlev is experienced Senior SAS Consultant with a proven track record of delivering end-to-end tailored SAS® business analytics solutions for a variety of companies in the UK and Europe.

Our services

Reliability is the key. We ask the right questions, at the right time in order to deliver a solution that is perfect for you.

Reducing exposure to fraud related losses, through the SAS platform, is easier than you may believe. It is an area we have focused on because of the major benefits that can be achieved simply by employing the correct defences.

We expect our personal data to be available to us wherever we go, to find a mobile application for whatever we need. Unfortunately this is not always possible for corporate data and applications.

It’s no secret that the internet is full of easily accessible free information so why not make more use of it in the corporate business sector?

Many organisations are drowning in a sea of disorganised data, seeing it as simply a bi-product of operations used for minimal MI reporting. In reality, fully optimised data management is the most powerful tool any business possesses.

SAS is one of the most advanced and sophisticated data analytics platforms on the market, but it is made up of dozens of major elements in multiple environments.

We pride ourselves on being a forward thinking, innovative company and as such we positively enjoy sharing our knowledge and expertise.


One response to “HighCharts Presentation Result”

  1. ledenev16 says:

    Thanks very interesting article.

Still have questions?

Ask our manager