JSFiddle - React, Tailwind, and code Playground

by Norlihazmey Ghazali

HTML

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<center>
  <div id="chart3"></div>
</center>

JavaScript

localhost = {};
localhost.currencyHTML = '';
localhost.chg_percent = [];
localhost.currency = [];
localhost.chart1 = {
  yAxisMin: null,
  yAxisMax: null
};

var url = 'https://finance.yahoo.com/webservice/v1/symbols/allcurrencies/quote?format=json&view=basic';

window.myCallback = function(data) {
  alert(JSON.stringify(data));
};


$.ajax({
  url: url,
  cache: false,
  dataType: 'jsonp',
  jsonp: 'callback',
  jsonpCallback: 'myCallback',
  context: localhost,
  beforeSend: function(request, setting) {
    setting.url = url + '&callback=myCallback';
  },
  success: function(data) {
    console.log(data);
    alert('test1');
    for (i = 0; i < data.list.resources.length; i++) {
        this.currencyObj = data.list.resources[i].resource.fields;
        this.currencyHTML += '<br/><strong>' + this.currencyObj.name + '</strong><br/>';

        for (prop in this.currencyObj) {
          this.currencyHTML += prop + ':' + this.currencyObj[prop] + '<br/>';
        };
        this.chg_percent.push(parseFloat(data.list.resources[i].resource.fields.chg_percent));
        this.currency.push(data.list.resources[i].resource.fields.name);
      }

      this.chart1.yAxisMax = (function(array) { // get the biggest number in currency array
        var number_array = [];

        for (var i = 0; i < array.length; i++) {
          if (array[i] != null) {
            number_array.push(array[i]);
          }
        }
        return Math.max.apply(Math, number_array);
      })(this.chg_percent);

      this.chart1.yAxisMin = (function(array) { // get the smallest number in currency array
        var number_array = [];

        for (var i = 0; i < array.length; i++) {
          if (array[i] != null) {
            number_array.push(array[i]);
          }
        }
        return Math.min.apply(Math, number_array);
      })(this.chg_percent);

      this.chart1.data.series[0].data = this.chg_percent;
      this.chart1.data.xAxis.categories = this.currency;
      
     ...