ApexCharts seems to modify/remove some data, I’m not quite sure if this is a skill issue of mine, or something else.
I’m getting data from an API from my server, the APIs data is intact and seems to appear fine, the format of it is
[
[
...
{
fileName": "The Dawns Awakening.json",
"data": {
...
"2024-06-10": 2206772
}
}
]
I’m using the variable
const JsonExample = [];
to format the data in a usable format for ApexCharts
the part of the code causing issues is below:
async function drawChart(labels, chartData, guildNames, yAxisMax) {
const JsonExample = [];
for (let i = 0; i < guildNames.length; i++) {
const chartDataDict = {};
chartDataDict.name = guildNames[i]; // Add the name field
const reversedLabels = labels.slice().reverse();
const data = [];
for (let j = 0; j < reversedLabels.length; j++) {
const date = reversedLabels[j];
const gexp = chartData[i][chartData[i].length - j];
data.push([date, gexp]);
}
chartDataDict.data = data;
JsonExample.push(chartDataDict);
}
// Print the JSON object
console.log(JsonExample);
//now to string
console.log(JSON.stringify(JsonExample));
const jsonData = JSON.stringify(JsonExample);
const seriesData = JSON.parse(jsonData).map(guild => {
let color
if (guild.name === "Puffy") {
color = "#BF40BF"; // Bright Purple
} else if (guild.name === "Lucid") {
color = "#FFFF00"; // Piss Yellow
} else if (guild.name === "Rebel") {
color = "#0000FF"; // Blue
} else if (guild.name === "Miscellaneous") {
color = "#008000"; // Green
} else if (guild.name === "Sailor Moon") {
color = "#6699CC"; // Bluegrey
} else if (guild.name === "The Abyss") {
color = "#808080"; // Grey
} else if (guild.name === "The Dawns Awakening") {
color = "#FF0000"; // Red
} else if (guild.name === "Leman") {
color = "#FFA500"; // Orange
} else if (guild.name === "The Blood Lust"){
color = "#FF2301";
} else if (guild.name === "Miscellaneous"){
color = "#587246";
} else {
console.log(guild.name)
color = "#447b40"; // default color
}
return {
...guild,
color: color
};
});
const options = {
series: seriesData,
chart: {
height: 750,
width: '100%',
type: 'line',
zoom: {
enabled: true,
type: 'x'
},
foreColor: 'white',
animations: {
enabled: false,
easing: 'easeinout',
speed: 800,
animateGradually: {
enabled: true,
delay: 50
},
dynamicAnimation: {
enabled: true,
speed: 350
},
}
},
colors: seriesData.map(series => series.color),
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
width: 2
},
title: {
text: 'Top Guilds',
align: 'center',
},
xaxis: {
type: 'datetime'
},
yaxis: {
title: {
text: 'Daily GEXP'
},
labels: {
formatter: (val) => {
return val.toLocaleString();
}
}
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
}
I’ve tried changing the way json is processing the data, this however just caused the guild names, and the data, to mix, causing the last guild to have the first’s data and so on.