title: Highcharts - How to populate date with Mysql and PHP?
body: <p>I'm new with highcharts and php. I tried to populate the highchart with the data from database. I tried to play the codes to get the result I want but I always failed. When I run, I always get blank page result.</p>
  
  <p>Please help me. I need it so badly. Thanks!</p>
  
  <p>Here's my full code of highchart</p>
  
  <pre><code>  &lt;!DOCTYPE HTML&gt;
    &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
      &lt;title&gt;POS RESULT&lt;/title&gt;
  
      &lt;script type="text/javascript"   src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="../../js/highcharts.js"&gt;&lt;/script&gt;
      &lt;script src="../../js/modules/exporting.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
          &lt;body&gt;
  
      &lt;?php
  include "config.php";
  
  $SQL1 =     "SELECT * FROM pos";
  
  $result1 = mysql_query($SQL1);
  $data1 = array();
  while ($row = mysql_fetch_array($result1)) {
     $data1[] = $row['name'];
     $data2[] = $row['Qty'];
  
  }
  ?&gt;
  
  &lt;script type="text/javascript"&gt;
  $(function () {
      $('#container').highcharts({
          chart: {
              type: 'column',
              margin: [ 50, 50, 100, 80]
          },
          title: {
              text: 'List of POS'
          },
      credits: {
      enabled: false
      },
          xAxis: {
              categories: [&lt;?php echo join($data1, "','"); ?&gt;],
              labels: {
                  rotation: -45,
                  align: 'right',
                  style: {
                      fontSize: '13px',
                      fontFamily: 'Verdana, sans-serif'
                  }
              }
          },
          yAxis: {
              min: 0,
              title: {
                  text: 'No. of Ticket'
              }
          },
          legend: {
              enabled: false,
      layout: 'vertical',
                          backgroundColor: '#FFFFFF',
                          align: 'left',
                          verticalAlign: 'top',
                          x: 50,
                          y: 35,
                          floating: true,
                          shadow: true
          },
          tooltip: {
              pointFormat: '&lt;b&gt;{point.y:.1f} tickets&lt;/b&gt;',
          },
       plotOptions: {
                              column: {
                                          pointPadding: 0.2,
                                          borderWidth: 0
                                      }
                          },
          series: [{
              name: 'Qty',
              data: ['&lt;?php echo join($data2, "','"); ?&gt;'],
      dataLabels: {
                  enabled: true,
                  rotation: -90,
                  color: '#FFFFFF',
                  align: 'right',
                  x: 4,
                  y: 10,
                  style: {
                      fontSize: '13px',
                      fontFamily: 'Verdana, sans-serif',
                      textShadow: '0 0 3px black',
  
                  }
              }
          }]
      });
  });
  
      &lt;/script&gt;
  
  &lt;div id="container" style="min-width: 500px; height: 400px; margin: 0 auto"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
     &lt;/html&gt;
  </code></pre>
  
  <p>And here's my db connection:</p>
  
  <pre><code>&lt;?php
  $mysql_hostname = "localhost";
  $mysql_user = "root";
  $mysql_password = "";
  $mysql_database = "pos";
  $prefix = "";
  $bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not  connect database");
  mysql_select_db($mysql_database, $bd) or die("Could not select database");
  
  ?&gt;
  </code></pre>