diff --git a/code/chris/javascript/minicapstone/index.html b/code/chris/javascript/minicapstone/index.html new file mode 100644 index 00000000..1276166e --- /dev/null +++ b/code/chris/javascript/minicapstone/index.html @@ -0,0 +1,98 @@ + + + + + + + JavaScript MiniCapstone + + + + + + + + + +
+ + + +
+ +
+
+ + + +
+
+ + + + + + + + + + + + + +
Name:{{ companyName }}
Overview:{{ companyOverview }}
+ + + + + + + + + + + + + + + + + + + + + +
Date/Time StampOpenHighLowCloseVolume
{{ key }}{{ item['1. open'] }}{{ item['2. high'] }}{{ item['3. low'] }}{{ item['4. close'] }}{{ item['5. volume'] }}
+
+
+ + + + + + \ No newline at end of file diff --git a/code/chris/javascript/minicapstone/json.html b/code/chris/javascript/minicapstone/json.html new file mode 100644 index 00000000..6684ecc4 --- /dev/null +++ b/code/chris/javascript/minicapstone/json.html @@ -0,0 +1,54 @@ + + + + + + + JavaScript MiniCapstone + + + + + + + + + +
+ + + + 
{{ jsonFormatted }}
+ + +
+ + + + + + \ No newline at end of file diff --git a/code/chris/javascript/minicapstone/script.js b/code/chris/javascript/minicapstone/script.js new file mode 100644 index 00000000..7c94d38d --- /dev/null +++ b/code/chris/javascript/minicapstone/script.js @@ -0,0 +1,107 @@ +// Alpha Vantage API Key: ZXNGDI9TXSC9K8AL + +const url = 'https://www.alphavantage.co/query' +const apikey = 'ZXNGDI9TXSC9K8AL' + +function buildUrl(symbol, userTimeSeries) { + return url + "?function=" + userTimeSeries + "&symbol=" + symbol + "&apikey=" + apikey; +} + +const App = { + data () { + return { + ticker: '', + rawJSON: {}, + timeSeriesData: {}, + jsonFormatted: {}, + userTimeSeries: 'TIME_SERIES_DAILY', // 'TIME_SERIES_INTRADAY' + // intervalInput: '15min', for intraday + xLabels: [], + closingPrices: [], + companyName: '', + companyOverview: '', + + } + }, + methods: { + searchTicker () { + this.ticker = this.ticker.toUpperCase(); + // get company stock price info + axios({ + url: buildUrl(this.ticker, this.userTimeSeries), + method: 'get', + }).then (res => { + // this.mostRecentClose = res.data["Meta Data"]["3. Last Refreshed"] + console.log('RES.DATA:', res.data) + this.rawJSON = res.data + console.log('rawJSON [index]', this.rawJSON['Time Series (Daily)']) + this.createAxesData(this.rawJSON['Time Series (Daily)']) + this.timeSeriesData = res.data['Time Series (Daily)'] + this.jsonFormatted = JSON.stringify(res.data, null, "\t") + this.buildChart() + }), + // get company general info + axios({ + url: buildUrl(this.ticker, 'OVERVIEW'), + method: 'get', + }).then (res => { + this.companyName = res.data['Name'] + this.companyOverview = res.data['Description'] + }) + message = 'stock data incoming...' + // this.createData(this.rawJSON) + + }, + createAxesData (jsonData) { + console.log('BEGIN CREATING AXIS DATA...') + this.xLabels = [] + this.closingPrices = [] + for (item in jsonData) { + this.xLabels.push(item) + this.closingPrices.push(parseFloat(jsonData[item]["4. close"])) + } + this.xLabels.reverse() + this.closingPrices.reverse() + }, + // chart.JS + buildChart () { + console.log('BUILDING CHART...') + var chartExists = Chart.getChart('myChart') // check to make sure chart DNE + + if (chartExists != undefined) { + chartExists.destroy() + console.log('CHART DESTROYED.') + } + + const ctx = document.getElementById('myChart'); + const myChart = new Chart(ctx, { + type: 'line', + data: { + labels: this.xLabels, + datasets: [{ + label: 'Stock Price at Close', + data: this.closingPrices, + fill: false, + borderColor: [ + 'rgba(0, 127, 255, 1)', + ], + borderWidth: 2 + }] + }, + options: { + scales: { + y: { + beginAtZero: false + } + }, + responsive: true, + maintainAspectRatio: false + } + }); + }, + } + +} + +const app = Vue.createApp(App) +app.mount('#app') diff --git a/code/chris/javascript/minicapstone/style.css b/code/chris/javascript/minicapstone/style.css new file mode 100644 index 00000000..def27574 --- /dev/null +++ b/code/chris/javascript/minicapstone/style.css @@ -0,0 +1,4 @@ +body { + margin-top: 3rem; + +} \ No newline at end of file