Stocks Visualization

A real time stock data visualization

by sparanja

HTML

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="index.js"></script>
<link rel="stylesheet" href="index.css">

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>

<body style="background-color:powderblue;">
    <h1 id="header1" align=left>Real Time Stock Quotes</h1>
    <div id="companySearch">
    <input id="para1" placeholder="search company name or symbol" />
    <!--<select id="para1" class="selectCompanies" data-live-search="true">
    </select> -->
    <!-- <input type="text" id="para1" value="Type company name" disabled></input> -->
    <button id="submitButton"  class="btn btn-primary" value="Add" disabled >Add</button>
    <button id="removeButton" class="btn btn-primary" value="Remove" disabled>Remove</button>
    </div>
    <div id="AddedCompanies">
    <p id="errorMessages"></p>
    <ul class="companiesRoaster"></ul>
    </div>
    <div id="chart_div"></div>
</body>

CSS

#header1{
 color: #073490; 
 font-size:20px;
 font-weight:"normal";
}

#para1{
 width:50px;
}

#submitButton{
    color:#3366cc;background-color:white;
}

#removeButton{
    color:#3366cc;background-color:white;
}

#errorMessages{
    color: red
}

.companiesRoaster{
    color: #073490
}

JavaScript

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);
var endPoint = "https://api.iextrading.com/1.0/";
var companiesList = [['Company','Stock Price']] 
var companyNameToSymbol={};
var dropdownValuesArray = [];
var iterator;

function setCompaniesToSymbolsMap(url){
    var dropDownValues = "";
    var companyTag = "";
    var splitIndex = 500;

    $.ajax({
        url: url,
        dataType: 'json',
        success: function(results){
            console.log("Got response from the API")
            for(iterator=0;iterator<results.length;iterator++){
                companyTag = results[iterator].name +" ("+ results[iterator].symbol + ")"
                dropdownValuesArray.push({"id":(iterator+1),"text":companyTag});
                companyNameToSymbol[results[iterator].name] = results[iterator].symbol
            }
            console.log("Dropdown array:"+JSON.stringify(dropdownValuesArray));
            $('#para1').attr('disabled', false);
            $('#submitButton').attr('disabled', false);
            $('#removeButton').attr('disabled', false);

        },error: function(){
            console.log("Error occured while fetching data!")
        }
    });
}

function fetchStockData(selectedCompany){
     var isPeriodicCall = arguments[1];
     var formatedCompany = selectedCompany;
     selectedCompany = selectedCompany.split("(")[0];
     symbol = companyNameToSymbol[selectedCompany.trim()]
    
     $.ajax({
        url: endPoint + 'stock/'+symbol+'/price',
        dataType: 'json',
        success: function(price){
            if(isPeriodicCall == undefined || isPeriodicCall == null){
                companiesList.push([selectedCompany.trim(),price])
                appendToDisplayList(formatedCompany,symbol);
            }else{
                companiesList[isPeriodicCall][1] = price;
            }
            drawBasic();
        },error: function(){
            console.log("Error occured while...