Greetings everyone! In my project, I am parsing a JSON file from an online API. However, I have encountered a roadblock while trying to split the data. Despite searching extensively on platforms like YouTube, I haven't been able to find a solution that fits my needs. As a newcomer to JavaScript, I am struggling with this task. The structure of the JSON file looks like this:
"timeline": {
"cases": {
"8/29/21": 1874435,
"8/30/21": 1881213,
"8/31/21": 1888150,
"9/1/21": 1895459,
"9/2/21": 1902407,
My goal is to visualize this data in a chart.
For creating charts, I am using ApexCharts. Here is a snippet of my code:
dayno = 30;
url = "https://disease.sh/v3/covid-19/historical/iraq?lastdays=" + dayno;
var requestOptions = {
method: 'GET',
redirect: 'follow'
};
// .then(result => console.log(result.timeline.cases)
const {cases}= timeline;
fetch(url, requestOptions)
.then(response => response.json())
.then(result => console.log(result.timeline.cases))
.then(result => console.log(result))
.catch(error => console.log('error', error));
var options = {
chart: {
height: 280,
type: "area"
},
dataLabels: {
enabled: false
},
series: [
{
name: "Series 1",
data: [45, 52, 38, 45, 19, 23, 2] // number of cases after split it
}
],
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.7,
opacityTo: 0.9,
stops: [0, 90, 100]
}
},
xaxis: {
categories: [
"01 Jan", // date here from split
"02 Jan",
"03 Jan",
"04 Jan",
"05 Jan",
"06 Jan",
"07 Jan"
]
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();