Stock historical prices chart integration with Javascript
Stock historical prices chart integration with Javascript
by Financial Modeling Prep
HTML
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
CSS
#chart_div {
min-height: 850px;
}
JavaScript
google.charts.load('current', {
packages: ['corechart', 'line']
});
google.charts.setOnLoadCallback(drawLogScales);
function drawLogScales() {
// https://financialmodelingprep.com/developer/docs
getRequest(
'https://financialmodelingprep.com/api/v3/technical/company/historical-price/AAPL?serietype=line&serieformat=array&apikey=demo',
drawOutput
);
}
function drawOutput(responseText) {
var graphData = JSON.parse(responseText).historical;
console.log(graphData);
draw(graphData);
}
function draw(graphData) {
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
},
},
height: 800,
backgroundColor: {
fill: '#FFFFFF'
},
chartArea: {
height: '95%',
width: "90%",
},
legend: 'none',
vAxes: {
0: {
textStyle: {
fontSize: 10,
color: 'black'
},
gridlines: {
color: '#dcd7da'
},
},
1: {
textStyle: {
fontSize: 10,
color: 'black'
},
gridlines: {
color: '#dcd7da'
},
}
},
}
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
function getRequest(url, success) {
var req = false;
try {
req = new XMLHttpRequest();
} catch (e) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
req = new...