Stock historical prices chart integration with JQUERY.

Stock historical prices chart integration with JQUERY.

by Financial Modeling Prep

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="chart_div"></div>

CSS

body {
  font-family: Helvetica Neue, Arial, sans-serif;
  font-size: 14px;
  color: #444;
}

#chart_div {
  min-height: 850px;
}

JavaScript

$(document).ready(function() {
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);
    // https://financialmodelingprep.com/developer/docs
    var url = "https://financialmodelingprep.com/api/v3/technical/company/historical-price/AAPL?serietype=line&serieformat=array&apikey=demo";
 
  function drawChart () {
  
  $.ajax({
      url: url,
      type: "GET",
      crossDomain: true,
      success: function(response) {
      
         var graphData = response.historical;

     	graphData.forEach((item) => {
                        if(typeof item[0] === "string"){
                            var split = (item[0]).split(" ");
                            item[0] = new Date(split[3]+'/'+split[1]+'/'+split[2]);
                        }
                        });
             		console.log(graphData) ;        
				graphData.unshift(['Date', 'Close', 'Close'])
        var data = google.visualization.arrayToDataTable(graphData);

        var options =  {
                    crosshair: { trigger: 'both',orientation: 'both' },
                    seriesType: "line",
                    colors:['#3365cc'],
                    series: {
                        0: {targetAxisIndex:1 },
                        1:{targetAxisIndex:0, color: '#f1efb8'},
                    },
                    height: 800,
                    backgroundColor: {fill: '#FFFFFF'},
                     chartArea: {
                        height:'95%',
                        width: "90%",
                    },
                    legend: 'none',
                    vAxes: {
                        0: {
                            textStyle: {
                                fontSize: 10,
                                color: 'black'
                            },
                            gridlines: {
                                color: '#dcd7da'
                            },
                        },
                        1: {
  ...