Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. dirkhd
    D
    • Profile
    • Following 0
    • Followers 0
    • Topics 15
    • Posts 30
    • Best 2
    • Groups 0

    dirkhd

    @dirkhd

    2
    Reputation
    12
    Profile views
    30
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    dirkhd Follow

    Best posts made by dirkhd

    • RE: Problem with Apex charts and data via api.

      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)
                    ]
                  });
      
      posted in Help
      D
      dirkhd
    • Human-readable editor for JSON files?

      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

      posted in Help
      D
      dirkhd

    Latest posts made by dirkhd

    • RE: Setup for Quasar with PHP api for MySQL

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

      posted in CLI
      D
      dirkhd
    • RE: Setup for Quasar with PHP api for MySQL

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

      posted in CLI
      D
      dirkhd
    • RE: Setup for Quasar with PHP api for MySQL

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

      posted in CLI
      D
      dirkhd
    • RE: Setup for Quasar with PHP api for MySQL

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

      posted in CLI
      D
      dirkhd
    • Setup for Quasar with PHP api for MySQL

      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

      posted in CLI
      D
      dirkhd
    • RE: Trigger/call function when component is rendered?

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

      posted in Help
      D
      dirkhd
    • Trigger/call function when component is rendered?

      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?

      posted in Help
      D
      dirkhd
    • RE: Problem with Apex charts and data via api.

      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)
                    ]
                  });
      
      posted in Help
      D
      dirkhd
    • RE: Problem with Apex charts and data via api.

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

      posted in Help
      D
      dirkhd
    • 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>
      
      posted in Help
      D
      dirkhd