title: How to improve chart generated from D3noob's tutorial using ds.js
body: <p>I have been able to create a chart using D3noob's tutorial (<a href="http://www.d3noob.org/2013/02/using-mysql-database-as-source-of-data.html" rel="nofollow">http://www.d3noob.org/2013/02/using-mysql-database-as-source-of-data.html</a>) but chart generated is not as it is in the tutorial. </p>
  
  <p>Below are the graphical representation of both the sample and the one I generated.</p>
  
  <p>I am now going to add all the source codes (data2.php and simple-graph.html), which are used below:</p>
  
  <p>data2.php</p>
  
  <pre><code>&lt;?php
      $username = "homedbuser"; 
      $password = "homedb";   
      $host = "localhost";
      $database="homedb";
  
      $server = mysql_connect($host, $username, $password);
      $connection = mysql_select_db($database, $server);
  
      $myquery = "SELECT  `date`, `close` FROM  `data2`";
      $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);
  ?&gt;
  </code></pre>
  
  <p>simple-graph.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;style&gt;
  
  &lt;/style&gt;
  &lt;body&gt;
      &lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
  var margin = {top: 30, right: 20, bottom: 30, left: 50}, //{top: 30, right: 20, bottom: 30, left: 50},
      width = 1000 - margin.left - margin.right, //width = 600 - margin.left - margin.right,
      height = 470 - margin.top - margin.bottom; //height = 270 - margin.top - margin.bottom;
  
  var parseDate = d3.time.format("%d-%b-%y").parse;
  
  var x = d3.time.scale().range([0, width]);
  var y = d3.scale.linear().range([height, 0]);
  
  var xAxis = d3.svg.axis().scale(x)
      .orient("bottom").ticks(5);
  
  var yAxis = d3.svg.axis().scale(y)
      .orient("left").ticks(5);
  
  var valueline = d3.svg.line()
      .x(function(d) { return x(d.date); })
      .y(function(d) { return y(d.close); });
  
  var svg = d3.select("body")
      .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.json("data2.php", function(error, data) {
      data.forEach(function(d) {
          d.date = parseDate(d.date);
          d.close = +d.close;
      });
      // 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; })]);
  
      svg.append("path")      // Add the valueline path.
          .attr("class", "line")
          .attr("d", valueline(data));
  
      svg.append("g")         // Add the X Axis
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis);
  
      svg.append("g")         // Add the Y Axis
          .attr("class", "y axis")
          .call(yAxis);
  
  });
      &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>Problem: All I want to do is generate graph similar to the one in the tutorial. I'm able to generate a graph but instead of showing April April 08 April 15 April 22 April 29 (as shown in <a href="http://www.d3noob.org/2013/02/using-mysql-database-as-source-of-data.html" rel="nofollow">http://www.d3noob.org/2013/02/using-mysql-database-as-source-of-data.html</a>) along the x-axis, it's showing April July October 2013 April and that made the graph looked different.</p>
  
  <p>Thanks.
  Ruth.</p>