Home > database >  Use Ajax Json Data to Chart
Use Ajax Json Data to Chart

Time:02-15

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!

CodePudding user response:

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.

  • Related