JSFiddle - React, Tailwind, and code Playground

by Ryan J

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>


<div id="container" style="height: 400px; min-width: 310px"></div>

JavaScript

var seriesOptions = [],
  seriesCounter = 0,
  names = ['MSFT', 'AAPL', 'GOOG'];

var dataMaster = {
  // "startDate": 1201755600000,
  "startDate": Date.UTC(2010, (12 - 1), 15),
  "endDate": Date.UTC(2017, (8 - 1), 15),
  "distributions": true,
  "funds": [{
    "fundCode": "269",
    "initVal": 10000,
    "contrAmount": 500,
    "contrInterval": 1, // 1 = month, 6 = semster, 12 = annual
    "withdAmount": 0,
    "withdInterval": 1
  }, {
    "fundCode": "268",
    "initVal": 10000,
    "contrAmount": 0,
    "contrInterval": 1,
    "withdAmount": 0,
    "withdInterval": 1
  }, {
    "fundCode": "658",
    "initVal": 10000,
    "contrAmount": 500,
    "contrInterval": 6,
    "withdAmount": 0,
    "withdInterval": 1
  }]
};

/**
 * Create the chart when all data is loaded
 * @returns {undefined}
 */
function createChart() {

  Highcharts.stockChart('container', {

    rangeSelector: {
      selected: 4
    },

    yAxis: {
      labels: {
        formatter: function() {
          return (this.value > 0 ? ' + ' : '') + this.value + '%';
        }
      },
      plotLines: [{
        value: 0,
        width: 2,
        color: 'silver'
      }]
    },

    plotOptions: {
      series: {
        compare: 'percent',
        showInNavigator: true
      }
    },

    tooltip: {
      pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
      valueDecimals: 2,
      split: true
    },

    series: seriesOptions
  });
}

$.each(dataMaster.funds, function(i, fund) {
  $.getJSON('https://content1.rbcgam.com/funds/growth-of-10k?rbcFundCode=' + fund.fundCode, function(data) {
    console.log("Here is the data");
    //console.log(data.growthOf10K);
    var growthOf10KArr = data.growthOf10K;
    var formattedGrowthArr = [];
    growthOf10KArr.map((val, key) => {
      //console.log(val);
      var tmpArr = [getUnixTimestamp(val.key), val.value];
      formattedGrowthArr.push(tmpArr);
    });

   ...