title: How to link mySQL with echarts?
body: <p>I am trying to link MySql with echarts to make my data to have a better visualisation. However, there is something wrong when I tried out this.</p>
  
  <p>My SQL table:</p>
  
  <p><a href="https://i.stack.imgur.com/1WC7m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1WC7m.png" alt="enter image description here"></a></p>
  
  <p>there is two php file, one is to connect to mySQL (process.php), the other is to display the charts(testing.php).</p>
  
  <p>The code for process.php is below:</p>
  
  <pre><code>&lt;?php
  header("Content-type=text/json;charset=UTF-8");
  
  $connect = mysqli_connect("localhost", "fypdb", "password123", "fyp");
  $query = "SELECT * FROM study";
  $result = mysqli_query($connect, $query);
  
  $data = array();
  
  class User{
      public $username;
      public $age;
  }
  
  while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
      $user = new User();
      $user-&gt;username = $row['name'];
      $user-&gt;age = $row['age'];
      $user-&gt;salary = $row['salary'];
      $data[] = $user;
  }
  mysqli_close($connect);
  
  echo json_encode($data);
  
  ?&gt;
  </code></pre>
  
  <p>The code for testing.php is below:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
  
          &lt;script src="js/echarts.js" type="text/javascript"&gt;&lt;/script&gt;
  
  
          &lt;script src="js/jquery-1.12.3.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;div id='container' style="width: 600px; height: 400px;"&gt;&lt;/div&gt;
          &lt;script&gt;
         var names = [], ages = [], salaries = [];
  
          function getusers() {
              $.ajax({
                  type: "post",
                  async: false,
                  url: "process.php",
                  data: {},
                  dataType: "json",
                  success: function (result) {
                      if (result) {
                          for (var i = 0; i &lt; result.length; i++) {
                              names.push(result[i].username);
                              ages.push(result[i].age);
                              salaries.push(result[i].salary);
                          }
                      }
                  },
                  error: function (errmsg) {
                      alert("Ajax data is wrong！" + errmsg);
                  }
              });
              return names, ages;
          }
  
          // getting data from process.php
          getusers();
  
              var myChart = echarts.init(document.getElementById("container"));
  
  
  
                      var option = {
                          tooltip: {
                              trigger: 'item',
                              formatter: "{a} &lt;br/&gt;{b}: {c} ({d}%)"
                          },
                          legend: {
                              orient: 'vertical',
                              x: 'left',
                              data: names
                          },
                          series: [
                              {
                                  name: 'name',
                                  type: 'pie',
                                  radius: ['50%', '70%'],
                                  avoidLabelOverlap: false,
                                  label: {
                                      normal: {
                                          show: false,
                                          position: 'center'
                                      },
                                      emphasis: {
                                          show: true,
                                          textStyle: {
                                              fontSize: '30',
                                              fontWeight: 'bold'
                                          }
                                      }
                                  },
                                  labelLine: {
                                      normal: {
                                          show: false
                                      }
                                  },
                                  data: [
  
                                      {value: ages,name:names}
  
  
                                  ]
                              }
                          ]
                      };
  
              myChart.setOption(option);
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The JS link is below (Full):</p>
  
  <p><a href="https://ecomfe.github.io/echarts-doc/public/en/download.html" rel="nofollow noreferrer">https://ecomfe.github.io/echarts-doc/public/en/download.html</a> </p>
  
  <p>The output here is below which it should be in different color:
  <a href="https://i.stack.imgur.com/cETni.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cETni.png" alt="enter image description here"></a></p>