“How to plot the data on the Scatterplots using apexcharts”

Question

I am using apexchart library in Vue.js to plot the data on scatterplots. I am getting the data from the backend by using Python and Flask. I am able to get the data from the back end to the front end, but The scatterplot is not displaying anything and also there are no errors on the console. My expected result should be the scatterplot containing all the coordinate value which I get from the Backend, ie my .py file.

<template>
<div>
   <div id="chart">
      <apexchart type=scatter height=350 :options="chartOptions" :series="series" />
    </div>
    <div>
        <p> {{ df }} </p>
    </div>
</div>
</template>

<script>
import axios from 'axios';
import VueApexCharts from 'vue-apexcharts';
import Vue from 'vue';

Vue.use(VueApexCharts)
Vue.component('apexchart', VueApexCharts)


export default {
    data: function() {
      return {
        df: [],
        chartOptions: {
          chart: {
            zoom: {
              enabled: true,
              type: 'xy'
            }
          },


          xaxis: {
            tickAmount: 3,
          },
          yaxis: {
            tickAmount: 3,
          }
        },
        series: [{
          name: 'series-1',
          data: [[]]
      }],
      }
      },
    methods: {
        getPoints() {
            const path='http://localhost:5000/scatter';
            axios.get(path)
            .then((res) => {
                this.df=res.data;
                console.log(this.df)
            })
            .catch((error) => {
                console.error(error);
            });
        },

    },
    created(){
        this.getPoints();
    },
};

</script>


#Backeend (.py file)

from flask import Flask, jsonify, request
from flask_cors import CORS

app = Flask(__name__)
app.config.from_object(__name__)

@app.route('/scatter',methods=['GET'])
def get_points():
    return jsonify([[2, 3], [1, 5]])

Results which I am getting on the Browser

Answer 1

The df prop in which you are assigning your data is not used as the chart's series.data .

Initially, you are putting a blank array in series.data , but after getting data, it seems you are not updating this array. Hence, you might be seeing a blank chart.

Try updating your getPoints method to this

    getPoints() {
        const path='http://localhost:5000/scatter';
        axios.get(path)
        .then((res) => {
            this.series = [{
              data: res.data
            }]
        })
        .catch((error) => {
            console.error(error);
        });
    }