title: d3.js not reading my JSON data from PHP file
body: <p>I am using a simple d3.js line graph to display data from a MySQL database. It was working fine when I was pulling data from a static CSV, but now that I'm trying to connect it to the database the graph is not displaying correctly.</p>
  
  <p>JS script:</p>
  
  <pre><code>// Set the dimensions of the canvas / graph
  var margin = {top: 30, right: 20, bottom: 30, left: 50},
  width = 600 - margin.left - margin.right,
  height = 270 - margin.top - margin.bottom;
  
  // Parse the date / time
  var parseDate = d3.time.format("%e-%b-%y %H:%M").parse;
  
  // Set the ranges
  var x = d3.time.scale().range([0, width]);
  var y = d3.scale.linear().range([height, 0]);
  
  // Define the axes
  var xAxis = d3.svg.axis().scale(x)
  .orient("bottom");
  
  var yAxis = d3.svg.axis().scale(y)
  .orient("left").ticks(5);
  
  // Define the line
  var valueline = d3.svg.line()
  .x(function(d) { return x(d.date); })
  .y(function(d) { return y(d.close); });
  
  // Adds the svg canvas
  var svg = d3.select("#air_temp_chart")
  .append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
  .append("g")
      .attr("transform", 
            "translate(" + margin.left + "," + margin.top + ")");
  
  // Get the data
  d3.csv("php/air_temperature_data.php", function(error, data) {
      data.forEach(function(d) {
          d.date = parseDate(d.date);
          d.close = +d.close;
      }
  
      var tickValues = data.map(function(d) { return d.date; });
  
      xAxis
      .tickValues(tickValues)
      .tickFormat(d3.time.format('%H:%M'));
  
      // Scale the range of the data
      x.domain(d3.extent(data, function(d) { return d.date; }));
      y.domain([0, d3.max(data, function(d) { return d.close; })]);
  
      // Add the valueline path.
      svg.append("path")
          .attr("class", "line")
          .attr("d", valueline(data));
  
      // Add the X Axis
      svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis);
  
      // Add the Y Axis
      svg.append("g")
          .attr("class", "y axis")
          .call(yAxis);
  
  );
  
  });
  </code></pre>
  
  <p>PHP data file:</p>
  
  <pre><code>$server = mysql_connect($host, $username, $password);
  $connection = mysql_select_db($database, $server);
  
  $myquery = "SELECT  `date`, `close` FROM  `readings_air_temperature`";
  $query = mysql_query($myquery);
  
  if ( ! $query ) {
      echo mysql_error();
      die;
  }
  
  $data = array();
  
  for ($x = 0; $x &lt; mysql_num_rows($query); $x++) {
      $data[] = mysql_fetch_assoc($query);
  }
  
  echo json_encode($data);     
  
  mysql_close($server);
  </code></pre>
  
  <p>?></p>
  
  <p>PHP output (JSON):</p>
  
  <pre><code>[{"date":"1-May-12 06:00","close":"58.13"},{"date":"1-May-12 06:30","close":"53.98"},{"date":"1-May-12 06:30","close":"88.00"},{"date":"1-May-12 06:30","close":"101.29"}]
  </code></pre>
  
  <p>The data file seems to be fine but the graph is not loading any data. Instead, the graph just shows the x and y axis without any labels or data.</p>
  
  <p>When I look at the SVG output in Inspector in my browser, this is what I get:</p>
  
  <pre><code>&lt;svg height="270" width="600"&gt;&lt;g transform="translate(50,30)"&gt;&lt;path class="line"&gt;&lt;/path&gt;&lt;g transform="translate(0,210)" class="x axis"&gt;&lt;path d="M0,6V0H530V6" class="domain"&gt;&lt;/path&gt;&lt;/g&gt;&lt;g class="y axis"&gt;&lt;path d="M-6,0H0V210H-6" class="domain"&gt;&lt;/path&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;
  </code></pre>
  
  <p>Can someone point me to what is wrong?</p>