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)
              ]
            });

Hey guys,

JSON as a file format/database is widely established e.g. also when using VUEX.
One question: Do anyone know an editor for JSON files that shows data in a way that is readable? So I thought of presenting data in form of a table, for instance, or making it easy editing specific entries?

Background is: I am working on an Android App presenting articles (also via Firebase but also via some locally stores data). But I haven’t found a good tool that enables some authors to edit and write articles in a comfortable way.

Any ideas for me?

Thx a lot
Dirk

@beets So, contacting the remote server now works

Despite using

this.$axios
        .post("../db/api.php", {
...

for the proxy I had to use following:

devServer: {
      https: false,
      port: 8080,
      open: true, // opens browser window automatically,
      proxy: {
        // proxy all requests starting with /api to jsonplaceholder
        '/db/api.php': {
          target: 'https://subdomain.example.com/api.php',
          changeOrigin: true
...

Thx again so much

@beets Mhmm, okay, first of all thank you for this hint - I was not aware that there is an implemented functionality exactly adressing my issue.

Now I tried some combinations but so far it was not successful.

My Axios calls go to:

 this.$axios
        .post("../db/api.php", {
...

So it is a relative path and no own subdomain.

Ah okay, but I would have to adapt the API URLs in a lot of VUE files …

@beets Good question First, I thought of what you have described firstly. But in fact your second thought (so using the local quasar dev and contacting the live API) would also be an idea (especially if the first one is quite complicated to install).

For the second I could just replace the URLs in my Ajax api calls by the remote server and manage the CORS probs, right?

Hey guys,

I have developed a Quasar SPA. I run the application on an Apache webserver and my PHP api is adressed via Axios for getting data from MySQL.
This all works fine on the actual webserver.

But I have no clue how I can integrate Quasar, PHP and MySQL for my local development. So far I run “quasar build spa” and transfer the output on the webserver (hosted at my provider).

But how can I integrate all this when running “quasar dev”? Normally, I would use XAMPP for a local environment for PHP and MySQL.

Thx a lot in advance!
Dirk

@beets You are awesome

It works and in addition this also solved my second problem. Because when you use Apex inside tabs then the chart disappears (at least the part with the data, not the legend) in case you switch between the tabs. But no the chart is “refilled” with the data because the function is called again.

Is there a way to once call a function when as soon as a component is rendered - so to say a kind of @click but in the sense of @loaded?

I use Apexcharts and fetch data via Axios. I call the function to get the data inside mounted() and also use $nextTick.

mounted() {
    this.$nextTick(function() {
        this.getProjectAnalysis();  // this calls function with Axios getting the data
 });

But from time to time the Apex component seems not ready cause updating the data with updateOptions() runs into an error. Console says “Cannot read property ‘updateOptions’ of undefined”.

Maybe someone has an idea for a workaround?

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)
              ]
            });

@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.

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>