baseddata.io/static/js/bitcoin-price.js

85 lines
2.0 KiB
JavaScript
Raw Normal View History

2024-08-01 14:06:16 +01:00
let dataArr = [];
const myChart = echarts.init(document.getElementById("chart"));
2024-08-14 19:48:58 +01:00
const filename = "final__price.json";
2024-08-01 14:06:16 +01:00
2024-08-14 19:48:58 +01:00
const periods = [
"all time",
"last 7 days",
"last 28 days",
"last 365 days",
"last 2 years",
];
async function fetchDataForChart(selectedValue) {
2024-08-06 12:03:42 +01:00
try {
2024-08-14 19:48:58 +01:00
const apiEndpoint = `${apiURL}/get_json/${filename}?period=${selectedValue}`;
2024-08-06 12:03:42 +01:00
const response = await fetch(apiEndpoint);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const dataArr = await response.json();
initEchart(dataArr);
} catch (error) {
console.error("Fetching data failed:", error);
}
}
2024-08-01 14:06:16 +01:00
2024-08-06 12:03:42 +01:00
function initEchart(dataArr) {
2024-08-01 14:06:16 +01:00
const option = {
backgroundColor: backgroundColor,
2024-08-08 11:53:39 +01:00
tooltip: tooltip,
2024-08-01 14:06:16 +01:00
toolbox: toolboxParams,
xAxis: {
data: dataArr.map((row) => row.date),
axisTick: axisTick,
axisLabel: axisLabel,
axisLine: axisLine,
},
grid: grid,
2024-08-14 19:48:58 +01:00
dataZoom: dataZoom(0),
2024-08-01 14:06:16 +01:00
yAxis: [
{
type: "value",
name: "Price (USD)",
2024-08-08 11:53:39 +01:00
nameGap: 30,
2024-08-01 14:06:16 +01:00
nameLocation: "middle",
2024-08-08 11:53:39 +01:00
nameTextStyle: textStyleMain,
2024-08-01 14:06:16 +01:00
position: "left",
alignTicks: true,
axisTick: axisTick,
axisLine: axisLine,
splitLine: {
show: false,
},
2024-08-08 11:53:39 +01:00
axisLabel: {
...axisLabel,
formatter(value, index) {
return nFormatter(value, 0);
},
},
2024-08-01 14:06:16 +01:00
},
],
series: [
{
type: "line",
name: "Price (USD)",
data: dataArr.map((row) => row.price),
},
],
};
myChart.setOption(option);
}
2024-08-06 12:03:42 +01:00
2024-08-14 19:48:58 +01:00
document.addEventListener("DOMContentLoaded", function () {
let periodIndex = 2;
periodDropdown(periods, periodIndex);
fetchDataForChart(periods[periodIndex]);
const selectElement = document.getElementById("select-period-dropdown");
selectElement.addEventListener("change", function (event) {
const selectedValue = event.target.value;
fetchDataForChart(selectedValue);
});
});