get data from json and send it to chart after split it-CodePudding

hallo everyone in my project I parse JSON file from API online and I stop in a split because I don't know to split it and search more and more on youtube but not find what I need it to try to function and not work "I'm new in javascript" the JSON file like this

"timeline": {
"cases": {
"8/29/21": 1874435,
"8/30/21": 1881213,
"8/31/21": 1888150,
"9/1/21": 1895459,
"9/2/21": 1902407,

and I need to send to chart

https://apexcharts.com/ this is chart what I use it

 
    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 her form split 
        "02 Jan",
        "03 Jan",
        "04 Jan",
        "05 Jan",
        "06 Jan",
        "07 Jan"
      ]
    }
  };
  
  var chart = new ApexCharts(document.querySelector("#chart"), options);
  
  chart.render();

CodePudding user response：

Because it's simple date chart you shouldn't use categories in your xaxis. In this case it is preffered to use type: "datetime".

xaxis : { type: 'datetime' }

In fetch you have to format data that you've got.

fetch(url, requestOptions)
  .then(response => response.json())
  .then(result => {
  let tempSerie = {name: 'cases', data: []}
  for (const [key, value] of Object.entries(result.cases)) {
  tempSerie.data.push([key, value]);
  }
  chart.updateSeries([tempSerie]);
  })
  .catch(error => console.log('error', error));

You create temporary series variable in which you save object with name cases and empty data array.

Next you iterate through properties of object you've got and push a data array with new [key, value] array.

At the end you update chartSeries.

CodePudding user response：

I updated your code as below. Please check if this helps. You can use javascript Object.keys to get the key of objects and Object.values to get the values of the json object.

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));

const series1 = Object.values(cases);
const dates = Object.keys(cases);

  var options = {
    chart: {
      height: 280,
      type: "area"
    },
    dataLabels: {
      enabled: false
    },
    series: [
      {
        name: "Series 1",
        data: series1 // number of cases after split it
      }
    ],
    fill: {
      type: "gradient",
      gradient: {
        shadeIntensity: 1,
        opacityFrom: 0.7,
        opacityTo: 0.9,
        stops: [0, 90, 100]
      }
    },
    xaxis: {  
      categories: dates // date her form split
    }
  };
  
  var chart = new ApexCharts(document.querySelector("#chart"), options);
  
  chart.render();