CODEWITHSUNDEEP
datetimed3.js
MukkuP
MukkuP

Reputation: 103

Show date on x-axis and datetime when the user hovers on d3 chart

I am trying to create a simple line chart with datetime at interval of 5 minutes on the X-axis and some data on the Y-axis, the data is getting displayed as intended when the chart is displayed, however it shows the date and time both on the X-axis. I just want to show the dates on the X-axis at one day interval and the both (date & time) inside the chart when user hovers on the data points.

I have put the following code for the "XAxis" attribute inside options section:

        xAxis: {
                    axisLabel: 'Date',
                    tickFormat: function (d) {                           
                        return d3.time.format('%a %b %e %H:%M:%S %Y')(new Date(d))
                    }

Please suggest on how this can be done.

Upvotes: 0

Views: 515

Answers (1)

anka976
anka976

Reputation: 111

Usually you can stay with default formatting, it is quite intelligent for almost every case. But for force formatting use in your case use "%a %d".

To show tooltip you do not have to add format to axis, you have to do smth like:

    someD3Elements.on("mouseover", function(d) {
    return tooltipElement.style("visibility", "visible")
      .text(function() {
        return d3.time.format('%a %b %e %H:%M:%S %Y')(new Date(d));
      });
  })
  .on("mousemove", function() {
    var event = d3.event;
    return tooltipElement.style("top", (event.pageY) + "px").style("left", event.pageX + 10 + "px");
  })
  .on("mouseout", function() {
    return tooltipElement.style("visibility", "hidden");
  })

where someD3Elements could be e.g. circles, and tooltipElement could be defined smth like:

tooltip = d3.select("#viewPort")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text("");
}

Upvotes: 0

Related Questions