title: Preprocessing data from a database with highcharts
body: <p>I want to import some data from a database table, and draw a graph. I wrote here my php code and js. It doesn't show me anything an web browser, except "Back" button. When I am using firebug, in the console window I have the message "SyntaxError: syntax error data: [<br />". plot.php (line 47, col 16).At that line is this code "if($row[1] &lt; 50) {". Can anyone help me?  </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;Graph&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;style type="text/css"&gt;
  #container, #sliders {
      min-width: 310px; 
      max-width: 800px;
      margin: 0 auto;
  }
  #container {
      height: 400px; 
  }
          &lt;/style&gt;
          &lt;script type="text/javascript"&gt;
  &lt;?php 
          //header('Refresh: 10');
          // connect to MySQL
  
          $db_host = "localhost";
          $db_user = "root";
          $db_pass = "";
          $db_name = "testdb";
  
          //require_once 'phplot.php';
  
          $con = mysql_connect('localhost', 'root', '') or die("Cannot connect because ".mysql_error());
  
          $db_selected = mysql_select_db('testdb', $con);
          if (!$db_selected) {
              die ('Can\'t use testdb : ' . mysql_error());
          }
          $sql = "SELECT Doi, Trei FROM `tabela` ORDER BY `tabela`.`id` DESC LIMIT 10";
  
          $result = mysql_query($sql);
          if (!$result) {
              echo 'Could not run query: ' . mysql_error();
              exit;
          }
  
          $data = array();
          $valoare = 100;
           while($row = mysql_fetch_row($result)) {
              if($row[1] &lt; 50) {
                $data[] = array($row[0], $valoare, null);
              } else {
                  $data[] = array($row[0], null, $valoare);
              }
          }
  
  
  ?&gt;
  
  $(function () {
      // Set up the chart
      var chart = new Highcharts.Chart({
          chart: {
              renderTo: 'container',
              type: 'column',
              margin: 75,
              options3d: {
                  enabled: true,
                  alpha: 15,
                  beta: 15,
                  depth: 50,
                  viewDistance: 25
              }
          },
          title: {
              text: 'Graph view'
          },
          subtitle: {
              text: 'Time'
          },
          plotOptions: {
              column: {
                  depth: 25
              }
          },
          series:  [{
           data: [&lt;?php echo join($data, ',') ?&gt;]
  
        }]
  
      });
  
  
      // Activate the sliders
      $('#R0').on('change', function(){
          chart.options.chart.options3d.alpha = this.value;
          showValues();
          chart.redraw(false);
      });
      $('#R1').on('change', function(){
          chart.options.chart.options3d.beta = this.value;
          showValues();
          chart.redraw(false);
      });
  
      function showValues() {
          $('#R0-value').html(chart.options.chart.options3d.alpha);
          $('#R1-value').html(chart.options.chart.options3d.beta);
      }
      showValues();
  });
  
  
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
       &lt;form&gt;&lt;input type="button" value="Back" onClick="window.location.href='source/login-home.php'"&gt;&lt;/form&gt; 
  
  
  &lt;div id="container"&gt;&lt;/div&gt;
  &lt;div id="sliders"&gt;
  
  
  
  
  &lt;script src="http://localhost/graph/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="http://localhost/graph/highcharts-3d.js"&gt;&lt;/script&gt;
  &lt;script src="http://localhost/graph/exporting.js"&gt;&lt;/script&gt;
  
  
          &lt;tr&gt;&lt;td&gt;Alpha Angle&lt;/td&gt;&lt;td&gt;&lt;input id="R0" type="range" min="0" max="45" value="15"/&gt; &lt;span id="R0-value" class="value"&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Beta Angle&lt;/td&gt;&lt;td&gt;&lt;input id="R1" type="range" min="0" max="45" value="15"/&gt; &lt;span id="R1-value" class="value"&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
  
  
  
  &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>