title: I'm trying to load on echarts data from my database. I tried this codes but it doesn't display anything. Is there something I missed or done wroing?
body: <p>I'm trying to display network data info's using shell then saving it to the database. Saving on the database works fine data is saved. Then I'm trying now to retrieve data from my database using ajax and displaying it on a pie chart, my script seems not giving me an output.</p>
  
  <p>My HTML File</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html style="height: 100%"&gt;
     &lt;head&gt;
         &lt;meta charset="utf-8"&gt;
     &lt;/head&gt;
     &lt;body style="height: 100%; margin: 0"&gt;
         &lt;div id="container" style="height: 100%"&gt;&lt;/div&gt;
         &lt;script src="js/jquery-2.1.4.js"&gt;&lt;/script&gt;
         &lt;script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"&gt;&lt;/script&gt;
         &lt;script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"&gt;&lt;/script&gt;
         &lt;script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"&gt;&lt;/script&gt;
         &lt;script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"&gt;&lt;/script&gt;
         &lt;script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"&gt;&lt;/script&gt;
         &lt;script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"&gt;&lt;/script&gt;
  
         &lt;script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"&gt;&lt;/script&gt;
         &lt;script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"&gt;&lt;/script&gt;
         &lt;script type="text/javascript"&gt;
  $(function() {
      $.ajax({
          url: 'http://localhost/eyenet2/chart_data.php',
          type: 'GET',
          success: function(data) {
          chartData = data;
              var dom = document.getElementById("container");
              var myChart = echarts.init(dom);
              var app = {};
              option = null;
              app.title = 'Popo';
  
              option = {
                  tooltip: {
                      trigger: 'item',
                      formatter: "{a} &lt;br/&gt;{b}: {c} ({d}%)"
                  },
                  legend: {
                      orient: 'vertical',
                      x: 'left',
                      data:['SSL','HTTP','FTP','UDP','ARP','TCPIP','SMTP','SDN']
                  },
                  series: [
                      {
                          name:'Sevices',
                          type:'pie',
                          radius: ['40%', '55%'],
                          dataFormat: 'json',
                          label: {
                              normal: {
                                  formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                                  backgroundColor: '#eee',
                                  borderColor: '#aaa',
                                  borderWidth: 1,
                                  borderRadius: 4,
                                  // shadowBlur:3,
                                  // shadowOffsetX: 2,
                                  // shadowOffsetY: 2,
                                  // shadowColor: '#999',
                                  // padding: [0, 7],
                                  rich: {
                                      a: {
                                          color: '#999',
                                          lineHeight: 22,
                                          align: 'center'
                                      },
                                      // abg: {
                                      //     backgroundColor: '#333',
                                      //     width: '100%',
                                      //     align: 'right',
                                      //     height: 22,
                                      //     borderRadius: [4, 4, 0, 0]
                                      // },
                                      hr: {
                                          borderColor: '#aaa',
                                          width: '100%',
                                          borderWidth: 0.5,
                                          height: 0
                                      },
                                      b: {
                                          fontSize: 16,
                                          lineHeight: 33
                                      },
                                      per: {
                                          color: '#eee',
                                          backgroundColor: '#334455',
                                          padding: [2, 4],
                                          borderRadius: 2
                                      }
                                  }
                              }
                          },
                          data: chartData
                      }
                  ]
              };;
              if (option &amp;&amp; typeof option === "object") {
                  myChart.setOption(option, true);
              }
          }
      });
  });
         &lt;/script&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>chart_data.php</p>
  
  <pre><code>&lt;?php
  
  $servername = "localhost";
  
  
  $username = "root";
  
  
  $password = "";
  
  
  $dbName = "packets";
  
  
  $conn = new mysqli($servername, $username, $password, $dbName);
  
  
  if ($conn-&gt;connect_error) {
    die("Connection failed: " . $conn-&gt;connect_error);
  }
  
  
  $query = "SELECT * FROM fakedata";
  
  
  $result = $conn-&gt;query($query);
  
  
  $jsonArray = array();
  
  
  if ($result-&gt;num_rows &gt; 0) {
    while($row = $result-&gt;fetch_assoc()) {
      $jsonArrayItem = array();
      $jsonArrayItem['value'] = $row['value'];
      $jsonArrayItem['name'] = $row['name'];
      array_push($jsonArray, $jsonArrayItem);
    }
  }
  
  
  $conn-&gt;close();
  
  header('Content-type: application/json');
  echo json_encode($jsonArray);
  ?&gt;
  </code></pre>
  
  <p>My DB Format</p>
  
  <pre><code>|value|name|
  |335  |SSA |
  |335  |SSB |
  |335  |SSC |
  |335  |SSD |
  |335  |SSE |
  |335  |SSF |
  |335  |SSG |
  |335  |SSH |
  </code></pre>
  
  <p>Output should be something like this:
  !<a href="https://ecomfe.github.io/echarts-examples/public/editor.html?c=pie-doughnut" rel="nofollow noreferrer">https://ecomfe.github.io/echarts-examples/public/editor.html?c=pie-doughnut</a></p>
  
  <p>I appreciate your comments and help. Thanks so much</p>