HighChart Visualisation
- Date September 16, 2019
- Written by Vasilij Nevlev
- Category JavaScript
This guide shows how to create HightChart using SAS9API.
Introduction
A large amount of data is difficult to perceive and understand. Well visualised data is easier to understand and find patterns.
Using SAS9API, you can visualize your data for analysis with help from any visualisation toolkit, such as HighCharts (https://www.highcharts.com/). Here is an example of sashelp.stocks visualised using HighCharts.
For this example you need:
- Access to SAS server and sashelp library.
- Access to a SAS9API instance that is configured to access SAS server.
- Somewhere to create a store a few text files.
- Chrome Browser.
Step 1 – Create HTML file.
Cope past below HTML code to a file, let’s call it index.html:
<head></head> <body> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.highcharts.com/stock/highstock.js"></script> <script src="http://code.highcharts.com/stock/modules/exporting.js"></script> <script src="main.js"></script> <div id="container" style="height: 400px; min-width: 310px;"></div> </body>
Step 2 – Create JavaScript file.
Create another file, let’s say main.js and add this code there:
$(function() {
var seriesOptions = [],
seriesCounter = 0,
names = ["IBM", "Microsoft", "Intel"],
createChart = function() {
$("#container").highcharts("StockChart", {
rangeSelector: {
selected: 4
},
yAxis: {
labels: {
formatter: function() {
return (this.value > 0 ? " + " : "") + this.value + "%";
}
},
plotLines: [{
value: 0,
width: 2,
color: "silver"
}]
},
plotOptions: {
series: {
compare: "percent"
}
},
series: seriesOptions
});
};
$.each(names, function(i, name) {
$.ajax({
type: "GET",
url: "http://{sas9apihostname:port}/sas/servers/SASApp/libraries/sashelp/datasets/stocks/data?repositoryName=Foundation&limit=100&offset=0&format=json&filter=%7B%22Stock%22%3A%22"+name+"%22%7D",
dataType: "JSON",
success: function(data) {
stub = {"name":name,"data":[]};
newarray = [];
old_i = 0;
tmparray = [];
for (z = 0; z < data.payload.length; z++) {
$.map(data.payload[z], function(val, prop) {
if (old_i < z) {
tmparray.reverse(tmparray);
newarray.push(tmparray);
old_i = z;
tmparray = [];
};
if (prop=="Date") {val=Date.parse(val); tmparray.push(val);};
if (prop=="Close") { tmparray.push(val);};
})
};
newarray = newarray.sort(function(a, b) {
if (a[0] < b[0]) return -1; if (a[0] > b[0]) return 1;
return 0;
});
stub.data = newarray;
console.log(stub);
seriesOptions[i] = stub;
console.log(seriesOptions);
seriesCounter += 1;
if (seriesCounter === names.length) {
createChart();
}
}
});
});
});
Please note that in main.js, you will need to replace “{sas9apihostname:port}” with your SAS9API address and port number.
Step 3 – Overcome CORS (if required).
The chances are, you are not able to call on your instance of SAS9API due to CORS (Cross-Origin Resource Sharing). This is a security mechanism implemented in most browsers and you can read more about it here:
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS.
To overcome the problem, simply create a Chrome shortcut and add the following settings. Please note that there must be a space before the first characters.
--user-data-dir="C:/Chrome dev session" --disable-web-security
Now you should have the following three files:
Launch the shortcut. An unsafe access warning is displayed immediately and must be skipped and you should have a visualisation of sashelp.stocks in your browser that should look like this:
Conclusion
Now you can quickly and easily navigate across the full time series using the timeline below, you can zoom in and out using the zoom buttons on the top left and you can export the graph in a variety of formats in the menu on the top right.
For this and other examples, see www.sas9api.io/examples.