title: Fetch data from database, store it in array, to plot charts in vuejs
body: <p>I'm trying to plot a graph in <strong>vue-chartjs</strong>.</p>
  
  <p>I want to get the required values from my <strong>MySQL</strong> database and store them into an array. And then use them to plot the charts. But I can't quite figure out the logic on how to get those records from the DB.</p>
  
  <p>This is the code I tried</p>
  
  <pre><code>&lt;?php
  $servername = "172.18.2.2";
  $username = "cs161050";
  $password = "aman";
  $dbname = "0187cs161050";
  
  $conn = new mysqli($servername, $username, $password, $dbname);
  
  if ($conn-&gt;connect_error) {
      die("Connection failed: " . $conn-&gt;connect_error);
  } 
  
  $sql = "SELECT progress FROM wf_progress";
  $result = $conn-&gt;query($sql);
  
  if ($result-&gt;num_rows) {
      // output data of each row
      while($row = $result-&gt;fetch_assoc()) {
          return $row;
      }
  }
  $conn-&gt;close();
  ?&gt;
  
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;title&gt;Circle Gauge Chart - Multiple&lt;/title&gt;
  
      &lt;style&gt;
          #chart {
              max-width: 650px;
              margin: 35px auto;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="chart"&gt;
  
      &lt;/div&gt;
  
  
      &lt;script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"&gt;&lt;/script&gt;
      &lt;script src="https://unpkg.com/axios/dist/axios.min.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
          var options = {
              chart: {
                  height: 250,
                  type: 'radialBar',
              },
              plotOptions: {
                  radialBar: {
                      dataLabels: {
                          name: {
                              fontSize: '22px',
                          },
                          value: {
                              fontSize: '16px',
                          },
                          total: {
                              show: true,
                              label: 'Total',
                              formatter: function (w) {
                                  return 249
                              }
                          }
                      }
                  }
              },
              series: []
  
          },
  
          methods: {
              concatArray: function() {
  
                  axios.get('script.php')
                  .then(function (response) {
                      this.series = this.series.concat(response.data);
                  })
                  .catch(function(error) {
                      console.log(error);
                  })
              }
          }
  
  
  
          var chart = new ApexCharts(
              document.querySelector("#chart"),
              options
              );
  
          chart.render();
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Can anyone tell what am I doing wrong here?</p>