title: Flot pie chart get data from database
body: <p>Hi i am trying to retrieve data from mysql database to create flot pie, i've data looks like this</p>
  
  <p>data in array</p>
  
  <blockquote>
    <p>$Array = array();</p>
    
    <p>$Array[0] = array();
       $Array[1] = array();
       $Array[2] = array();</p>
    
    <p>$Array[0]['label'] = 'Grade A';
       $Array[1]['label'] = 'Grade B';
       $Array[2]['label'] = 'Grade C';</p>
    
    <p>$Array[0]['color'] = '#89A54E';
       $Array[1]['color'] = '#AA4643';
       $Array[2]['color'] = '#4572A7';</p>
    
    <p>$Array[0]['data'][0] = array(1,700);
       $Array[1]['data'][0] = array(1,500);
       $Array[2]['data'][0] = array(1,600);</p>
    
    <p>echo json_encode($Array);</p>
  </blockquote>
  
  <p>and this mysql</p>
  
  <pre><code>$server = "localhost";
  $user="root";
  $password="";
  $database = "db_test";
  
  $connection = mysql_connect($server,$user,$password);
  $db = mysql_select_db($database,$connection);
  
  $query = "SELECT * FROM pie";
  $result = mysql_query($query);        
  
  while ($record = mysql_fetch_assoc($result)) {
      $event_array[] = array(
          'label' =&gt; $record['label'],
          'color' =&gt; $record['color'],
          'data' =&gt; $record['data']
      );
  }
  
  echo json_encode($event_array);
  </code></pre>
  
  <p>my flot js</p>
  
  <pre><code>    $.ajax
  ({
      type:'POST', 
      dataType: 'JSON', 
      url:'data.php',
      success: function(data) 
      {    
          $.plot($('#Pie'), data, 
          {
              series: 
              {
                  pie: 
                  {
                      show: true,
                      innerRadius: 0.4,
                      radius: 1,
                      label: {
                          show: true,
                          radius: 1,
                          formatter: function(label, series) 
                          {
                              return "&lt;div style='font-size:11px; text-align:center; padding:2px; color:white;'&gt;"+label+"&lt;br/&gt;"
                              +Math.round(series.percent)+"%&lt;/div&gt;";
                          },
  
                          background: 
                          {
                              opacity: 0.8
                          }
                      }
                  }
              },
  
              grid: 
              {
                  hoverable: true
              },
  
              legend: 
              {
                  show: false
              }
          });
      }
  });
  </code></pre>
  
  <p>it won't display anything, does anyone can help me.</p>