Use Ajax Json Data to Chart

Question

I have ajax response like this

{
  "status": "success",
  "data": [
    {
      "DAY": "11",
      "SIGNUPS": 0,
      "VISITS": "0"
    },
    {
      "DAY": "12",
      "SIGNUPS": 3,
      "VISITS": "13"
    }
  ]
}

I want use this data to my chart which have static data like this

var chartDom1 = document.getElementById('traffic_chart');
            var myChart1 = echarts.init(chartDom1);
            var option1;
            
            option1 = {
              title: {
                text: 'Stacked Line',
                show: false
              },
              tooltip: {
                trigger: 'axis'
              },
              legend: {
                data: ['Visits', 'Signups'],
                show:false
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              toolbox: {
                feature: {
                  saveAsImage: {}
                }
              },
              xAxis: {
                type: 'Day',
                boundaryGap: false,
                data: [1,2]
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  name: 'Visits',
                  type: 'line',
                  stack: 'Total',
                  data: [150, 232]
                },
                {
                  name: 'Signups',
                  type: 'line',
                  stack: 'Total',
                  data: [150, 232]
                }
              ]
            };
            
            option1 && myChart1.setOption(option1);

I want use DAY Column in xAxis data and SIGNUPS and VISITS Column in Series, I have tried lot but not able to find proper way to do it. Sorry I am beginner and have not proper knowledge of JavaScript.

Thanks!

this option1 object exists allready....?

Dimitris Papageorgiou
– Dimitris Papageorgiou

2022-02-13 08:12:45 +00:00
Commented Feb 13, 2022 at 8:12 — Dimitris Papageorgiou
– Dimitris Papageorgiou, Commented Feb 13, 2022 at 8:12

MohammadHossein Shafiei · Accepted Answer · 2022-02-13 09:14:49Z

1

If you want to pass the Day data as an array to xAxis data you should make an array like this:

let array = [];
for (const i in response.data) {
   array.push(response.data[i].DAY);
}

after this your array is like this:

[11, 12]

and now you can pass it to your xAxis object ...

and also you can use this method for SIGNUPS and VISITS too.

answered Feb 13, 2022 at 9:14

MohammadHossein Shafiei

4492 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hina Patel Over a year ago

Thanks! It have solved my issue, Accepted answer as well up voted it. Thanks!

Collectives™ on Stack Overflow

Use Ajax Json Data to Chart

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related