append API data into an array

Question

I need to display apex chart (Brush Chart). I am trying to append data from API into Array. i have given code below and also API data.

I used console to check that the data is coming correctly from API but not appending to series array

<div id="app" style="background:white">
  <div id="chart1">
    <apexchart type=line height=230 :options="chartOptionsArea" :series="series" />
  </div>
  <div id="chart2">
    <apexchart type=area height=130 :options="chartOptionsBrush" :series="series" />
  </div>
</div>

below is my VUEjs code

data() {
  return {
    series: [{
      data: this.generateDayWiseTimeSeries(new Date('01 Jan 
        2014 ').getTime(),185, {
        min: 30,
        max: 90
      })
    }],
    chartOptionsArea: {
      chart: {
        id: 'chartArea',
        toolbar: {
          autoSelected: 'pan',
          show: false
        }
      },
      colors: ['#546E7A'],
      stroke: {
        width: 3
      },
      dataLabels: {
        enabled: false
      },
      fill: {
        opacity: 1,
      },
      markers: {
        size: 0
      },
      xaxis: {
        type: 'datetime'
      }
    },
    chartOptionsBrush: {
      chart: {
        id: 'chartBrush',
        brush: {
          target: 'chartArea',
          enabled: true
        },
        selection: {
          enabled: true,
          xaxis: {
            min: new Date('01 Jan 2014').getTime(),
            max: new Date('09 Jan 2014').getTime()
          }
        },
      },
      colors: ['#008FFB'],
      fill: {
        type: 'gradient',
        gradient: {
          opacityFrom: 0.91,
          opacityTo: 0.1,
        }
      },
      xaxis: {
        type: 'datetime',
        tooltip: {
          enabled: false
        }
      },
      yaxis: {
        tickAmount: 2
      }
    }
  }
}

below is Function

generateDayWiseTimeSeries: function() {
  var i = 0;
  var self = this;
  var series;

  axios
    .get("http://172.31.0.114:5000/api/eco/BNG-JAY-136-001")
    .then(function(res) {
      self.series = res.data; //not working 
    })

  return series;
}

API data

[
  [
    "2019-5-23",
    0
  ],
  [
    "2019-5-24",
    0
  ],
  [
    "2019-5-25",
    0
  ],
  [
    "2019-5-26",
    0
  ],
  [
    "2019-5-27",
    0
  ],
  [
    "2019-5-28",
    0
  ],
  [
    "2019-5-29",
    0
  ],
  [
    "2019-5-30",
    0
  ],
  [
    "2019-5-31",
    0
  ]
]

Take a look at how to display async data in vue template

barbsan
– barbsan

2019-08-21 12:43:50 +00:00
Commented Aug 21, 2019 at 12:43 — barbsan
– barbsan, Commented Aug 21, 2019 at 12:43

Narendra Jadhav · Accepted Answer · 2019-08-21 17:15:50Z

0

You can use updateSeries method or you can directly update the value of series. Please check below code

Code Snippet

generateDayWiseTimeSeries: function() {
    var me = this;
    axios.get("data.json")
        .then(function(res) {
            me.series[0].data = res.data;
            //OR you can use updateSeries method

            /* me.$children[0].updateSeries([{
               data: res.data
             }]);*/
        });

    return [];
}

You can check here with working fiddle.

answered Aug 21, 2019 at 17:15

Narendra Jadhav

10.3k15 gold badges35 silver badges45 bronze badges

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

1 Comment

Narendra Jadhav Over a year ago

glad to help you :) @pavan

rood · Accepted Answer · 2019-08-21 12:32:39Z

0

generateDayWiseTimeSeries function return undefined variable => series.

Assign returned data to series instead of self.series.

answered Aug 21, 2019 at 12:32

rood

13.1k3 gold badges21 silver badges18 bronze badges

Collectives™ on Stack Overflow

append API data into an array

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related