Stock historical prices chart integration with VueJS

Stock historical prices chart integration with VueJS

by Financial Modeling Prep

HTML

<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
<script src="https://unpkg.com/v-data-table/dist/v-data-table.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="app"></div>

CSS

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

#chart_div {
  min-height: 850px;
}

JavaScript

// https://financialmodelingprep.com/developer/docs
var app = new Vue({
  el: "#app",
  data: {
    url: 'https://financialmodelingprep.com/api/v3/technical/company/historical-price/AAPL?serietype=line&serieformat=array&apikey=demo',
    financials: [],
    loaded: false,
    searchQuery: '',
  },
  created() {
    setTimeout(() => {
      google.charts.load('current', {
        packages: ['corechart', 'line']
      });
      google.charts.setOnLoadCallback(this.drawChart());

    }, 100)

  },

  methods: {
    drawChart() {

      var self = this
      axios
        .get(this.url)
        .then((response) => {


          var graphData = response.data.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: '#41b883'
              },
            },
            height: 800,
            backgroundColor: {
              fill: '#FFFFFF'
            },
            chartArea: {
              height: '95%',
              width: "90%",
            },
            legend: 'none',
            vAxes: {
              0: {
                textStyle: {
                  fontSize: 10,
                  color: 'black'
                },
                gridlines: {
                  color: '#dcd7da'
                },
              },
              1: {
            ...