Example of Javascript packaged in Browserfy to make it compatible as a script in HTML, to display data using Highcharts.
There are a few methods of data visualization with Intrinio. One is to use our Javascript SDK combined with the Highcharts Javascript tags and files to create an in-depth, customizable display.
Highcharts
Highcharts allows users to visualize the data in a number of different chart types. Highcharts provides users with API access to their charts which can be easily set as a javascript script in HTML. Intrinio's SDKs require certain dependencies which complicates data access in HTML. In the HTML example below, Browserfy is used to package all javascript node dependencies together into a single file to facilitate certain node functions in HTML.
Javascript
The Javascript file should define the chart parameters before being packaged by Browserfy. In the example below, the parameters are set in the MyChart variable inside the getData function, which is called when the page is loaded.
var intrinioSDK = require('intrinio-sdk');
async function GetData() {
responses = [];
xAxisValue = [];
yAxisValue = [];
var nextPage = null;
var moreData = true;
var maxNumberOfPagesReturned = 1000;
while(maxNumberOfPagesReturned > 0){
dataPage = await callApi(nextPage);
responses.push(dataPage);
nextPage = dataPage.next_page;
if (!nextPage || nextPage == '') {
break
};
maxNumberOfPagesReturned--;
};
for (const historicalData of responses) {
for (const marketcaps of historicalData.historical_data) {
xAxisValue.push(marketcaps.date);
yAxisValue.push(marketcaps.value);
};
};
var myChart = Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Intrinio Sample Graph for AAPL'
},
xAxis: {
categories: xAxisValue.reverse()
},
yAxis: {
title: {
text: 'Value'
}
},
series: [{
name: 'Apple',
data: yAxisValue.reverse()
}]
});
return;
};
async function callApi(nextPage = null) {
var intrinioSDK = require('intrinio-sdk');
intrinioSDK.ApiClient.instance.authentications['ApiKeyAuth'].apiKey = "OmZiMTUyN2M3YjNiZDU3NGU0MzA0NGMwNWU2NWM5OTdm";
var companyAPI = new intrinioSDK.CompanyApi();
var identifier = "AAPL"; // String | A Company identifier (Ticker, CIK, LEI, Intrinio ID)
var tag = "marketcap"; // String | An Intrinio data tag ID or code (<a href='https://data.intrinio.com/data-tags'>reference</a>)
var opts = {
'frequency': "daily", // String | Return historical data in the given frequency
'type': null, // String | Return historical data for given fiscal period type
'startDate': new Date("2018-01-01"), // Date | Return historical data on or after this date
'endDate': null, // Date | Return historical data on or before this date
'sortOrder': "desc", // String | Sort by date `asc` or `desc`
'pageSize': 100, // Number | The number of results to return
'nextPage': nextPage // String | Gets the next page of data from a previous API call
};
data = await companyAPI.getCompanyHistoricalData(identifier, tag, opts);
return data;
};
document.addEventListener('DOMContentLoaded', async function () {
GetData();
});
The HTML
When the webpage is launched, the Highcharts files are loaded before setting the container. The packaged file is the last script to load to ensure that all the required elements are in place before the data is retrieved.
<DOCTYPE! html>
<html>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width:100%; height:400px;"></div>
<script src="browserifyFile.js"></script>
</body>
</html>