JSFiddle - React, Tailwind, and code Playground

by psharm57

HTML

<div id="container"></div>

<!-- javascript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>

CSS

#container {
  width: 100%;
  max-width: 100%;
}

JavaScript

$(function () {
 
  $.ajax({
    type: 'GET',
    dataType: 'jsonp',
    cache: true,
    jsonp: false,
    jsonpCallback: 'graph', // By default the chartapi returns finance_charts_json_callback, however we overridden it to graph in our URL.
    url: 'http://chartapi.finance.yahoo.com/instrument/1.1/goog/chartdata;type=close;range=6m/json/?callback=graph',
    processData: false
  }).success(function (data) {
 
    var chartData = [];
 
    // Preparing the data for chart.
    $.each(data.series, function (i, value) {
      // Highstock expects the date in Timestamp, so use Timestamp if chartapi.finance.yahoo.com provides date in Timestamp
      // or we need convert to timestamp if chartapi.finance.yahoo.com provides date in YYYYMMDD format.
      // var chartTime = data.series[i].Timestamp;
      // var chartClose = data.series[i].close;
      var date = data.series[i].Date.toString(),
        year = date.substring(0, 4),
        month = date.substring(4, 6),
        day = date.substring(6, 8),
        chartTime = new Date(year, month, day).getTime(),
        chartClose = data.series[i].close;
 
      chartData.push([chartTime, chartClose]);
    });
 
    // Create the chart.
    $('#container').highcharts('StockChart', {
      series: [{
        data: chartData,
        tooltip: {
          valueDecimals: 2
        }
      }]
    });
 
  });
 
});