So far I have a candlestick graph but the user cannot customise the date range to do this I would need to change the api url this is the documentation for my api.
I want it to be done through buttons to have the option of 1 day, 5 days, 1 month, 6 months, 1 year, 5 years, and all time. But I don’t know how to make pressing the buttons update the api url to display the new graph. Is there a way to do this?
this is the code:
`<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Candlestick Chart Example</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv"></div>
<script>
var symbol = 'AAPL';
var interval = '1day';
var apikey = 'apikeyiset';
var url = 'https://api.twelvedata.com/time_series?symbol=' + symbol + '&interval=' + interval + '&apikey=' + apikey;
Plotly.d3.json(url, function(data) {
var trace = {
x: data.values.map(function(d) { return d.datetime; }),
open: data.values.map(function(d) { return d.open; }),
high: data.values.map(function(d) { return d.high; }),
low: data.values.map(function(d) { return d.low; }),
close: data.values.map(function(d) { return d.close; }),
type: 'candlestick',
};
var layout = {
title: symbol + ' Candlestick Chart',
};
Plotly.newPlot('myDiv', [trace], layout);
});
</script>
</body>
</html>`
I know how to add buttons in html but not sure how to make them change the api url.