How to spcify ticks on x axis for time scale in d3js?

Question

It is a qustion which i got on basis of my previouse question which can be found here : link

In the link there is a fiddle, now i realized that if i have 3 dates :

12.12.12 12:12:12 //12th of december 2012

12.12.12 11:12:12

12.12.12 10:12:12

which is the same date but the difference is just by 1 hour, then this difference is not shown on the graph.

I want only to show those dates and hours on x axis, which actualy are a part of data, and make something so it is actually possible to see on the graph the 1 hour difference if something happend the same date, so plots wouldnt end on top of each other.

Can it be done in any way?

Answer 1

When you create the x axis, you can indicate the tick interval using

.ticks(d3.time.hour, 1)

which will place a tick every 1 hour. See the documentation of scale.ticks() for more info.

Here's the working code

exp1();

function exp1(){
  
  
  var data = [
     {
        "CurrentQuantity": "50",
        "LastUpdated": "/Date(1420793427983)/"
    },
     {
        "CurrentQuantity": "76",
        "LastUpdated": "/Date(1420721731353)/"
    },
    {
        "CurrentQuantity": "20",
        "LastUpdated": "/Date(1420714881920)/"
    },
      {
        "CurrentQuantity": "24",
        "LastUpdated": "/Date(1420713917820)/"
    }//,
     // {
//        "CurrentQuantity": "25",
 //       "LastUpdated": "/Date(1418907098197)/"
 //   }
    
];

var margin = {top: 20, right: 20, bottom: 85, left: 50},
        width = 1500 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
    var formatDate = d3.time.format("%Y-%m-%d %H:%M:%S");

    var x = d3.time.scale().range([0, width]);
    x.tickFormat("%Y-%m-%d %I:%M:%S")
    var y = d3.scale.linear().range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .tickFormat(function(d) { 
            return formatDate(d);
        })
        .ticks(d3.time.hour, 1)
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

    data.forEach(function(d) {
        var date = new Date(parseInt(d.LastUpdated.substr(6)));
        console.log(date)
        d.LastUpdated = date;
    });


    var line = d3.svg.line()
        .x(function(d) {
            return x( d.LastUpdated); 
        })
        .y(function(d) {
            return y(d.CurrentQuantity); 
        });

    var svg = d3.select("#chart1").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 + ")");

 
    x.domain(d3.extent(data, function(d) {
        return d.LastUpdated; 
    }));
    y.domain(d3.extent(data, function(d) {
        return d.CurrentQuantity; 
    }));

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
      .selectAll("text")  
            .style("text-anchor", "end")
            .attr("dx", "-.8em")
            .attr("dy", ".15em")
            .attr("transform", function(d) {
                return "rotate(-45)" 
            });

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
      .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text('@Resource.Amount');

    svg.append("path")
        .datum(data)
        .attr("class", "line")
        .attr("d", line);
  
}








exp2();


function exp2(){
  
  
  var data = [
     {
        "CurrentQuantity": "50",
        "LastUpdated": "/Date(1420793427983)/"
    },
     {
        "CurrentQuantity": "76",
        "LastUpdated": "/Date(1420721731353)/"
    },
    {
        "CurrentQuantity": "20",
        "LastUpdated": "/Date(1420714881920)/"
    },
      {
        "CurrentQuantity": "24",
        "LastUpdated": "/Date(1420713917820)/"
    },
      {
        "CurrentQuantity": "25",
       "LastUpdated": "/Date(1418907098197)/"
    }
    
];

var margin = {top: 20, right: 20, bottom: 85, left: 50},
        width = 1500 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
    var formatDate = d3.time.format("%Y-%m-%d %H:%M:%S");

    var x = d3.time.scale().range([0, width]);
    x.tickFormat("%Y-%m-%d %I:%M:%S")
    var y = d3.scale.linear().range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .tickFormat(function(d) { 
            return formatDate(d);
        })
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

    data.forEach(function(d) {
        var date = new Date(parseInt(d.LastUpdated.substr(6)));
        console.log(date)
        d.LastUpdated = date;
    });


    var line = d3.svg.line()
        .x(function(d) {
            return x( d.LastUpdated); 
        })
        .y(function(d) {
            return y(d.CurrentQuantity); 
        });

    var svg = d3.select("#chart2").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 + ")");

 
    x.domain(d3.extent(data, function(d) {
        return d.LastUpdated; 
    }));
    y.domain(d3.extent(data, function(d) {
        return d.CurrentQuantity; 
    }));

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
      .selectAll("text")  
            .style("text-anchor", "end")
            .attr("dx", "-.8em")
            .attr("dy", ".15em")
            .attr("transform", function(d) {
                return "rotate(-45)" 
            });

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
      .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text('@Resource.Amount');

    svg.append("path")
        .datum(data)
        .attr("class", "line")
        .attr("d", line);
  
}

    chart {
        font: 10px sans-serif;
    }

    .axis path,
    .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }

    .x.axis path {
        /*display: none;*/
    }

    .line {
        stroke: rgb(142, 188, 0);
        stroke-width: 2px;
        stroke-linecap: square;
        stroke-linejoin: round;
        fill-opacity: 1;
        stroke-opacity: 1;
        fill: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<strong>Chart1</strong>
<div id="chart1"></div>
<br>
<strong>Chart2</strong>
<div id="chart2"></div>