IEX Stock API and ChartJS

chart stock info

by Dan Shahin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<div id="banner-message">
  <img id="logo" src="#" />
  <p id="hello">Hello Stocks</p>

  <input type="text" id="symbol" placeholder="stock symbol" value="KO" />
  <select id="period">
    <option value="5y">5 years</option>
    <option value="2y">2 years</option>
    <option value="1y" selected>1 year</option>
    <option value="ytd">ytd</option>
    <option value="6m">6 months</option>
    <option value="3m">3 months</option>
    <option value="1m">1 month</option>
    <option value="1d">1 day</option>
</select>

  <canvas id="line-chart" width="1200" height="550"></canvas>
  <h2>news</h2>
  <div id="newsResponse"></div>
  <h2>key stats</h2>
  <pre id="response"></pre>
  <h2>dividends</h2>
  <pre id="dividendsResponse"></pre>
</div>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: left;
  transition: all 0.2s;
  margin: 0 auto;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

.thumb {
  max-height: 100px;
  max-width: 200px;
}

.ui-autocomplete {
  max-height: 200px;
  overflow-y: auto;
  /* prevent horizontal scrollbar */
  overflow-x: hidden;
  background-color: white;
}

/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/

* html .ui-autocomplete {
  height: 200px;
}

.ui-menu .ui-menu-item {
  list-style-type: none;
  /* height: 2vw; */
  font-size: 1.75vw;
}

.ui-state-hover,
.ui-state-active {
  color: #ffffff;
  text-decoration: none;
  background-color: #0088cc;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  background-image: none;
}

JavaScript

// handle click and add class
function stats() {
  var symbol = $('#symbol').val();
  fetch(`https://api.iextrading.com/1.0/stock/${symbol}/quote`)
    .then(function(response) {
      return response.json();
    })
    .then(function(myJson) {
      console.log(myJson);
      $('#response').text(JSON.stringify(myJson, null, 1));
      $('#hello').text(myJson.companyName);
      myChart.options.title.text = myJson.companyName + ' ' + $('#period').val();
    });
}

function dividends() {
  var symbol = $('#symbol').val(),
    period = $('#period').val();
  fetch(`https://api.iextrading.com/1.0/stock/${symbol}/dividends/${period}`)
    .then(function(response) {
      return response.json();
    })
    .then(function(myJson) {
      console.log(myJson);
      $('#dividendsResponse').text(JSON.stringify(myJson, null, 1));
    });
}


function chartIt() {
  var symbol = $('#symbol').val(),
    period = $('#period').val();
  fetch(`https://api.iextrading.com/1.0/stock/${symbol}/chart/${period}`)
    .then(function(response) {
      return response.json();
    })
    .then(function(myJson) {
      console.log(myJson);
      $('#response').text(JSON.stringify(myJson, null, 1));


      myChart.data.datasets[0].data = [];
      myChart.data.labels = [];

      myJson.forEach((chartEvent) => {
        myChart.data.labels.push(chartEvent.date);
        myChart.data.datasets[0].data.push(chartEvent.close);
        myChart.data.datasets[0].label = $('#symbol').val();
      });

      myChart.update();
      stats();
      dividends();
      news();
      getLogo();
    });
}

function news() {

  var symbol = $('#symbol').val(),
    period = $('#period').val();
  fetch(`https://api.iextrading.com/1.0/stock/${symbol}/news/${period}`)
    .then(function(response) {
      return response.json();
    })
    .then(function(news) {
      console.log(news);
      var allStories = '';
      news.forEach(story => {
        allStories += printStory(story);
      });
     ...