JSFiddle - React, Tailwind, and code Playground

by slandmann

HTML

<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<link rel="stylesheet" href="https://rawgit.com/masayuki0812/c3/master/c3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
https://jsfiddle.net/x3vjf4zw/43/#fork<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="chartBody">
    <div id="chartTitle"></div>
    <div id="chartFundamentals">
        <div>
            <span class="fundamentalLabel">Last Price</span>
            <span class="fundamentalValue">xxx</span>
        </div>
    </div>
    <div id="chart"></div>
</div>
<div id="news"></div>
<div id="footer"></div>
<!-- colors: {
            stockprice: '#808080',
            profitloss: '#3CB371',
            netincomeloss: '#2E8B57',
            salesrevenuenet: '#6495ED',
            revenue: '#4169E1',
            expenses: '#DC143C',
            costofgoodsandservicessold: '#B22222',
            cash: '#008000',
            debt: '#FF0000',
            epsbasic: '#808080'
        } -->

CSS

body{
    padding: 0px;
    margin: 0px;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    background-color: ghostwhite;
}
#header{
    background-color: #006633;
    border-bottom: 1px solid gainsboro;
    color: white;
    font-size: 19px;
    padding: 8px;
}
#header .fa{
    margin-right:10px;
}
#chartBody, #news{
    margin: 25px;
}
#chartTitle{
    font-size: 24px;
    margin: 0px 0px 15px 0px;
}
.newsItem{
    margin-bottom: 15px;
    font-size: 12px;
}
.newsItemLink{
    font-size: 16px;
}

a:link {
    color: #006633;
    text-decoration: none;
}
a:visited {
    color: #006633;
}
a:hover {
    color: #000000;
}
a:active {
    color: #006633;
}

JavaScript

var info = {};
var stock = "aa";
var stockdisplayname = "";
var exchangesuccess = false;

function runStockData(dataset, field){
    jQuery.ajax({
        url:    "https://www.quandl.com/api/v3/datasets/SEC/" + stock + "_" + dataset + "_Q.json?api_key=Z8MEbU2td4su_GnXvxaB",
        success: function(data) {
           $.each(data.dataset.data, function(){
               if(!info[this[0]]){
                   info[this[0]] = {};
               }
               info[this[0]].date = this[0];
               info[this[0]][field] = this[1];
           });
        },
        async:   false
    });   
};

runStockData("profitloss", "profitloss");
runStockData("netincomeloss", "netincomeloss");   
runStockData("CashAndCashEquivalentsAtCarryingValue", "cash");  
runStockData("longtermdebt", "debt");   
runStockData("Revenues", "revenue");   
runStockData("salesrevenuenet", "salesrevenuenet");   
runStockData("COSTSANDEXPENSES", "expenses");   
runStockData("CostOfGoodsAndServicesSold", "costofgoodsandservicessold");   
runStockData("EarningsPerShareBasic", "epsbasic");    

var formattedInfo = [];
$.each(info, function(){
    this.dateid = parseInt(this.date.split('-').join(''), 10);
    formattedInfo.push(this);
});

var stockdata = [];
var min = formattedInfo[formattedInfo.length - 1].date;

function runExchange(exchange){
    jQuery.ajax({
        url:    "https://www.quandl.com/api/v3/datasets/GOOG/" + exchange + "_" + stock + ".json?api_key=Z8MEbU2td4su_GnXvxaB",
        success: function(data) {
           exchangesuccess = true;
           stockdisplayname = data.dataset.name;
           $.each(data.dataset.data, function(index){
               if(this[0] >= min && index % 7 === 0){
                   stockdata.push({
                       'date': this[0],
                       'dateid': parseInt(this[0].split('-').join(''), 10),
                       'stockprice': this[1]
                   });
               }
           });
        },
        async:   false
  ...