I am attempting to generate a chart displaying the value of Bitcoin in Euro. The data is fetched from JSON and converted into an array for the ApexChart series data (ApexData['xbtToEuro']) along with a list of dates.
Despite my console indicating that everything is working fine, I am only seeing the first value on the chart. What could be the issue?
Click here to view a screenshot showing the ApexChart not functioning as expected.
<HTML>
<HEAD>
<TITLE>test</TITLE>
</HEAD>
<BODY>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="myChart"></div>
<script type="text/javascript">
/* AJAX SECTION */
var dataApex = [];
var list_date = [];
var catalogue = [];
var series_forged = [];
loadData();
function loadData() {
if (catalogue.length === 0) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
catalogue = JSON.parse(xhr.responseText);
Object.keys(catalogue).forEach(function(date_day){
Object.keys(catalogue[date_day]).forEach(function(hours){
list_date.push(new Date(hours * 1000));
Object.keys(catalogue[date_day][hours]).forEach(function(monneys){
var value = catalogue[date_day][hours][monneys];
if (dataApex.indexOf(monneys) === -1) {
dataApex[monneys] = new Array();
}
})
})
});
processChart();
}
}
var d = new Date();
var $month = d.getMonth();
var $years = d.getFullYear();
xhr.open("GET", "../data/monney_market/" + $years + "_" + ($month + 1 * 1) + "_monney.json", true);
xhr.send();
} else {
Object.keys(catalogue).forEach(function(date_day){
Object.keys(catalogue[date_day]).forEach(function(hours){
list_date.push(new Date(hours * 1000));
Object.keys(catalogue[date_day][hours]).forEach(function(monneys){
var value = catalogue[date_day][hours][monneys];
if (dataApex.indexOf(monneys) === -1) {
dataApex[monneys] = new Array();
}
})
})
});
processChart();
}
}
function processChart () {
Object.keys(catalogue).forEach(function(date_day){
Object.keys(catalogue[date_day]).forEach(function(hours){
Object.keys(catalogue[date_day][hours]).forEach(function(monneys){
var value = catalogue[date_day][hours][monneys];
dataApex[monneys].push(value);
})
})
});
console.log(dataApex["xbtToEuro"]);
console.log(list_date);
series_forged = new Array;
series_forged.push({
name: "xbtToEuro",
data: dataApex["xbtToEuro"],
type: "line"
});
createChart("#myChart");
}
function createChart ($idCSS){
/* Additional Chart Configuration Here */
var options = {
/* Chart Options Here */
};
var chart = new ApexCharts(document.querySelector($idCSS), options);
chart.render();
}
</script>
</BODY>
</HTML>
Your assistance would be greatly appreciated. Thank you!