There are a few methods of data visualization with Intrinio. The widget marketplace is one convenient method to add beautiful graphics to a website or mobile application along with associated data. As an alternative for developers, our javascript SDK can be combined with the Highcharts Javascript tags and files to create an in-depth, customizable display.

Widgets

Our Widgets make ticker and data summary simple for website and mobile designers. We offer ticker summary options, partial and full charts as well as customizable options.  Chat with us if you have any questions and to find out more.

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, Browswerfy 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>

Conclusion

Our Widget Marketplace provides data rationalization and visualization as a prepackaged alternative. Developers using Highcharts may find this a welcome, customizable alternative to better suite their needs. With Intrinio's data, Highchart's display abilities and packaging software such as Browserfy, displaying market data can be beautiful.

Did this answer your question?