以下が実装例です。jQueryとChart.jsを使用しています。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>株価グラフアプリ</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.min.js"></script>
</head>
<body>
<div>
<label for="symbol">企業のシンボル:</label>
<input type="text" id="symbol" placeholder="AAPL">
<button id="getGraph">グラフ取得</button>
</div>
<div>
<canvas id="chart"></canvas>
</div>
<script>
$(document).ready(function() {
$("#getGraph").click(function() {
// 入力されたシンボルを取得
var symbol = $("#symbol").val();
// Alpha Vantage APIを使用して株価情報を取得
$.getJSON("https://www.alphavantage.co/query?function=TIME_SERIES_MONTHLY_ADJUSTED&symbol=" + symbol + "&apikey=demo", function(result) {
if(result["Error Message"]) {
alert("エラーが発生しました。");
} else {
// 株価情報をグラフ化
var timeSeries = result["Monthly Adjusted Time Series"];
var data = [];
var labels = [];
for(var key in timeSeries) {
data.push(parseFloat(timeSeries[key]["5. adjusted close"]));
labels.push(key);
}
var ctx = document.getElementById('chart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: '株価',
data: data,
borderColor: 'rgb(255, 99, 132)',
fill: false
}]
},
options: {}
});
}
});
});
});
</script>
</body>
</html>
```
注意：上記のコードではAPIキーに"demo"を使用しているため、実際には正式なAPIキーを使用する必要があります。また、セキュリティ上の理由から、本アプリは単一のhtmlファイルとして作成されたものであり、サーバー上で動作する場合は、CORSの設定などに注意する必要があります。
