title: Passing variable value from inline php to jquery function
body: <p>I have html file that load <a href="http://www.jqueryscript.net/demo/Simple-Chart-Plugin-with-jQuery-Gantt-Chart/" rel="nofollow">jQuery.Gantt</a>. Inside html i put nested php that grabs necessary data from database to populate grid. The data are formate to json according to spec. </p>
  
  <p>My question is how to pass array to $function() to property <strong>source</strong>?</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;html lang="en-au"&gt;
      &lt;head&gt;
          &lt;title&gt;jQuery.Gantt&lt;/title&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" &gt;
          &lt;link rel="stylesheet" href="css/style.css" /&gt;
          &lt;link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" /&gt;
          &lt;link rel="stylesheet" href="http://taitems.github.com/UX-Lab/core/css/prettify.css" /&gt;
          &lt;style type="text/css"&gt;
              body {
                  font-family: Helvetica, Arial, sans-serif;
                  font-size: 13px;
                  padding: 0 0 50px 0;
              }
              .contain {
                  width: 800px;
                  margin: 0 auto;
              }
              h1 {
                  margin: 40px 0 20px 0;
              }
              h2 {
                  font-size: 1.5em;
                  padding-bottom: 3px;
                  border-bottom: 1px solid #DDD;
                  margin-top: 50px;
                  margin-bottom: 25px;
              }
              table th:first-child {
                  width: 150px;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;div class="contain"&gt;
  
              &lt;h1&gt;
                  &lt;small&gt;Planning&lt;/small&gt;
              &lt;/h1&gt;
  
              &lt;div class="gantt"&gt;&lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;?php 
          include 'config.php';
          mysql_query('SET CHARACTER SET utf8');
  
          $sql_query = "SELECT Code, OrderNumber, DeliveryDate, QTY, Progress FROM production WHERE IDCustomer = 8 and Code = '5101452 SMD E PTH';";
  
          $r=mysql_query($sql_query, $con);
  
          $outp = "[";
          while($rs=mysql_fetch_array($r))
          {
              if ($outp != "[") {$outp .= ",";}
              $outp .= '{"name":"'  . $rs["Code"] . '",';
              $outp .= '"desc":"'   . $rs["OrderNumber"]        . '",';
              $outp .= '"values": ';
              $outp .= '[{"from": "' .$rs["DeliveryDate"] . '", ';
              $outp .= '"to": "' .$rs["DeliveryDate"] . '",';
              $outp .= '"label": "' .$rs["QTY"] . '",';   
              $outp .= '"customClass": "' .$rs["Progress"] .'"}]}';
          }
          $outp .="]";
  
          mysql_close($con);
  
          ?&gt;              
  
      &lt;/body&gt;
      &lt;script src="http://code.jquery.com/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.fn.gantt.js"&gt;&lt;/script&gt;
      &lt;script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"&gt;&lt;/script&gt;
      &lt;script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"&gt;&lt;/script&gt;
      &lt;script src="http://taitems.github.com/UX-Lab/core/js/prettify.js"&gt;&lt;/script&gt;
      &lt;script&gt;
  
          $(function() {
  
              "use strict";   
  
              $(".gantt").gantt({
  
                  source: "src/mydata1.json",
                  navigate: "scroll",
                  scale: "days",
                  maxScale: "months",
                  minScale: "days",
                  waitText: "Please wait...",
                  itemsPerPage: 50,
                  onItemClick: function(data) {
                      alert("Item clicked - show some details");
                  },
                  onAddClick: function(dt, rowId) {
                      alert("Empty space clicked - add an item!");
                  },
                  onRender: function() {
                      if (window.console &amp;&amp; typeof console.log === "function") {
                          console.log("chart rendered");
                      }
                  }
              });
  
              $(".gantt").popover({
                  selector: ".bar",
                  title: "I'm a popover",
                  content: "And I'm the content of said popover.",
                  trigger: "hover"
              });
          });
  
      &lt;/script&gt;   
  &lt;/html&gt;
  </code></pre>
  
  <p>Or there is better way to do it? Actually I'd like to split HTML and PHP code but I'm not nimble with web programming.</p>