Problem with Apex charts and data via api.



  • Hey guys,

    I use Apex charts (www.apexcharts.com) for a web application. In addition, I retrieve data via Axios after the page has loaded and update for the apex chart.

    Basically, that works but when I now resize the browser window, the former data that I used as dummy data are restored.
    I can’t figure out where exactly the problem is so I hope for some help here.

    Apex is provided as a component:

    import VueApexCharts from 'vue-apexcharts'
    
    // leave the export, even if you don't use it
    export default async ({ Vue }) => {
    
        Vue.component('apexchart', VueApexCharts)
    
    }
    

    Within the vue page the chart is called so:

    <apexchart type="pie" :series="series" :options="chartOptions" />
    

    Dummy data for series are defined and options are provided. The hook mounted starts api request and adapt the data.
    It works but as I mentioned before when resizing the window dummy data are restored.

    <script>
    export default {
      data() {
        return {
          projectAnalysis: {},
          series: [100, 400],
          chartOptions: {
            chart: {
              id: "samplesGender",
              fontFamily: "Raleway"
            },
            responsive: [
              {
                breakpoint: 480,
                options: {
                  chart: {
                    width: 250
                  },
                  legend: {
                    position: "bottom"
                  }
                }
              }
            ],
          }
        };
      },
    methods: {
        getProjectAnalysis() {
          this.$axios
            .post("../db/api.php", {
              request: "getProjectAnalysis",
            })
            .then(response => {
              if (response.data["isSuccess"] == false) {
                this.$router.push("/Second/Login");
              }
              if (response.data["isSuccess"] == true) {
                this.projectAnalysis = response.data["projectAnalysis"];
    
                this.series = [
                  parseInt(this.projectAnalysis.sampleMale),
                  parseInt(this.projectAnalysis.sampleFemale)
                ];
    
    /*Following I tried as an alternative but that does not work at all. */
                /*ApexCharts.exec(
                  "samplesGender",
                  "updateSeries",
                  [
                    {
                      data: [
                        parseInt(this.projectAnalysis.sampleMale),
                        parseInt(this.projectAnalysis.sampleFemale)
                      ]
                    }
                  ],
                  true
                );*/
                //alert(response.data["message"]);
              }
            })
            .catch(error => {
              console.log(error);
            });
        },
        }
      },
      mounted() {
        this.getProjectAnalysis();
      }
    };
    </script>
    




  • @dobbel Thank you for your hint. Unfortunately, this example does not use dynamic data. So I get no ideas what to try in a different way.



  • @dirkhd

    Try to debug it with the vue dev tools for chrome. If possible create a codepen.io so people here can help you better.

    Btw setting dummy data should not be necessary.



  • Okay, after I have trief a lot of more combination I got the problem “fixed”. Or at least a solution that works.

    Wanted to share this here in case other users facing the same issues.

    Just use a “ref” attribute for the apexchart element and then refer to this for updating in the following way:

    <apexchart
                  ref="sampleGender"
                  type="pie"
                  :series="series"
                  :options="chartOptions"
                />
    

    So I use as ref “sampleGender”.

    Than after api call via Axios I update the data series as follows:

    this.$refs.sampleGender.updateOptions({
                  series: [
                    parseInt(this.projectAnalysis.sampleMale),
                    parseInt(this.projectAnalysis.sampleFemale)
                  ]
                });
    

Log in to reply