area-chart.vue

<template>
  <div id="chart">
    <apexchart
      ref="pricesRef"
      type="area"
      height="150"
      :options="options"
      :series="series"
    ></apexchart>

    <!-- <button @click="updateSeries">click</button> -->
  </div>
</template>

<script>
import { axios } from 'boot/axios';
// import { dates, prices } from 'src/services/area-chart';
import { date } from 'quasar';

function formatNumber2(number, tofix) {
  const val = (number / 1).toFixed(tofix).replace(',', ' ');
  return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

let sharePrice = [];
const dataSharePrice = [];

export default {
  name: 'AreaChart',
  data() {
    return {
      timeInterval: 0,
      dataSharePrice: [],
      series: [
        {
          name: 'Share Price',
          data: [
            // { x: dates[0], y: prices[1] },
            // { x: 1602392287529, y: 0.05 },
          ],
          date: [],
        },
      
      ],
      options: {
        chart: {
          type: 'area',
          zoom: {
            enabled: false,
          },
          toolbar: {
            show: false,
          },
          sparkline: {
            enabled: true,
          },
        },
        tooltip: {
          custom({ series, w, dataPointIndex }) {
            const unixTime = w.config.series[0].data[dataPointIndex].x;
            const timeStamp = new Date(unixTime * 1000);
            const hour = date.formatDate(timeStamp, 'DD MMMM');

            return (
              `
              <div class="arrow_box_tooltip q-pa-md">
                <span class="text-h6">
                Date: ${hour}</span>
                <br />
                <span class="text-h6">
                Share Price: $${formatNumber2(
                  series[0][dataPointIndex],
                  0,
                )} USD</span>
              </div>
              `
            );
          },
        },

        noData: {
          text: 'Loading...',
        },
        dataLabels: {
          enabled: false,
        },
        stroke: {
          curve: 'smooth',
          lineCap: 'butt',
          colors: undefined,
          width: 2,
        },
        title: {
          text: '',
          align: 'left',
        },
        grid: {
          show: false,
        },
        xaxis: {
          type: 'datetime',
        },
        yaxis: {
          opposite: true,
        },
        legend: {
          horizontalAlign: 'left',
        },
      },
    };
  },

  computed: {},

  methods: {
    getData() {
      axios
        .get(
          'apiurl',
        )
        .then((response) => {
          // console.log(response.data.prices);
          sharePrice = response.data.prices;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    updateSeriesData() {
      for (const price of sharePrice) {
        const unixTime = price[0];

        if (Object.keys(price).length > 0) {
          dataSharePrice.push({
            x: unixTime,
            y: price[1],
          });
        } else {
          dataSharePrice.push({});
          console.log('err');
        }

        // console.log(price[0], price[1]);
      }

      // console.log(dataSharePrice);

      this.series[0].data = dataSharePrice;
      this.$refs.pricesRef.updateSeries([
        {
          data: dataSharePrice,
        },
      ]);

      // console.log(this.$refs);
    },
    // timer() {},
  },

  mounted() {},

  async created() {
    await this.getData();
    setTimeout(() => {
      this.updateSeriesData();
      // console.log('done');
    }, 3000);
    /* ; */
    // this.timer();
  },

  beforeDestroy() {
    // clearInterval(this.timer);
  },
};
</script>

<style scoped>
/* #chart {
  background-color: #18212f;
  opacity: 1;
  background-size: 7px 7px;
  background-image: repeating-linear-gradient(
    45deg,
    #111726 0,
    #111726 0.7000000000000001px,
    #18212f 0,
    #18212f 50%
  );
} */
</style>