title: Adjust time scale in d3js
body: <pre><code>  var data;
        data = [
                  {"date":"1-May-12 11:00 AM","TPH":2},
                  {"date":"1-May-12 12:00 PM","TPH":3},
                  {"date":"1-May-12 1:00 PM","TPH":2},
                  {"date":"1-May-12 2:00 PM","TPH":4},
                  {"date":"1-May-12 3:00 PM","TPH":2},
                  {"date":"1-May-12 4:00 PM","TPH":3}
               ];
          //  var passedheight = this.getHeight();
          //var containerWidth = jQuery.sap.byId(this.oParent.sId).width() || 800; // gets super parent width
          var containerWidth = $("#"+this.getId()).parent().width(); // gets immediate parent width
          var containerheight = $("#"+this.getId()).parent().height();
          var margin = {top: 15, right: 30, bottom: 20, left: 30},
          width = containerWidth- margin.left - margin.right,
           height = containerheight - margin.top - margin.bottom;
          var parseDate = d3.time.format("%d-%b-%y %H:%M %p").parse;
          var maxDate = parseDate(d3.max(data, function(d) { return d.date; }));
          var minDate = d3.time.hour.offset(parseDate(d3.min(data, function(d) { return d.date; })),-2);
  
          var x = d3.time.scale()
          .domain([minDate, maxDate])
          .range([0, width]);
  
          var y = d3.scale.linear()
              .range([height, 0]);
  
          var color = d3.scale.category10();
  
          var xAxis = d3.svg.axis()
              .scale(x)
              .orient("bottom").ticks(4);
  
          var yAxis = d3.svg.axis()
              .scale(y)
              .orient("left").ticks(4).tickSize(-width, 0, 0);
  
          var line = d3.svg.line()
              .x(function(d) { return x(d.date); })
              .y(function(d) { return y(d.tonneValue); });
  
          var svg = d3.select("#"+this.getId()).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 + ")");
  
            color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
  
            data.forEach(function(d) {
              d.date = parseDate(d.date);
            });
  
            var wsfs = color.domain().map(function(name) {
              return {
                name: name,
                values: data.map(function(d) {
                  return {date: d.date, tonneValue: +d[name]};
                })
              };
            });
  
            x.domain(d3.extent(data, function(d) { return d.date; }));
  
            y.domain([
              //d3.min(wsfs, function(c) { return d3.min(c.values, function(v) { return v.tonneValue; }); }),
              0,
              d3.max(wsfs, function(c) { return d3.max(c.values, function(v) { return v.tonneValue; }); })
            ]);
  
            svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);
  
            svg.append("g")
                .attr("class", "y axis")
                .call(yAxis);
  
            var wsf = svg.selectAll(".wsf")
                .data(wsfs)
                .enter().append("g")
                .attr("class", "wsf");
  
            wsf.append("path")
                .attr("class", "line")
                .attr("d", function(d) { return line(d.values); })
                .style("stroke", function(d) { return color(d.name); });
  
            var legendNames = d3.keys(data[0]).filter(function(key) { return key !== "date" });
  
            data.forEach(function(d) {
              d.ages = legendNames.map(function(name) { return {name: name, value: +d[name]}; });
            });
           var legend = svg.selectAll(".legend")
                .data(legendNames.slice())
              .enter().append("g")
                .attr("class", "legend")
                .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
  
            legend.append("rect")
                .attr("x", width - 18)
                .attr("width", 18)
                .attr("height", 4)
                .style("fill", function(d) {return color(d); });
  
            legend.append("text")
                .attr("x", width - 24)
                .attr("y", 6)
                .attr("dy", ".35em")
                .style("text-anchor", "end")
                .text(function(d) {  return d; });
  </code></pre>
  
  <p>As per above code I get the data similar to the below image (data is not exact): 
  <a href="https://i.stack.imgur.com/6Zfma.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6Zfma.png" alt="enter image description here"></a></p>
  
  <p>But in my code I have tried to achieve extra range where the range should start at 10 AM and end at 4 PM i.e. the line should start at x: 11 AM and y: 2 and there should be some space before from 10 AM to 11 AM but in my case the line is starting from 2 straight away. And the ticks are also random.</p>
  
  <p>Added:  <a href="https://jsfiddle.net/y2n5uqe0/1/" rel="nofollow noreferrer">FIDDLE</a></p>