Tooltip behavior on line chart with Date as the x-axis
up vote
0
down vote
favorite
I'm trying to create a line chart with a tooltip where the x-axis is a date.
I would like the line and tooltip to change after it is halfway (or similar) to the next tick on the x-axis.
Mainly I would like the behavior to be the same as this bl.ock: http://bl.ocks.org/wdickerson/64535aff478e8a9fd9d9facccfef8929
You can view the behavior I currently have on my bl.ock: https://bl.ocks.org/JulienAssouline/574a52ee2034bcdc1e56ed926f36dd52
It mostly works but the data only changes after it passes to the September month and it never reaches the October month.
I have tried to adapt my code to the bl.ock. The problem is the bl.ock displayed is using years and I am using a date format which seems to be my main problem.
Here is the main part of the code:
var tipBox = svg.append("rect")
.attr("width", width)
.attr("height", height)
.attr("opacity", 0)
.on("mousemove", drawTooltip)
.on("mouseout", removeTooltip)
function removeTooltip() {
if (tooltip) tooltip.style('display', 'none');
if (tooltipLine) tooltipLine.attr('stroke', 'none');
}
function drawTooltip(){
const line_hover = xScale.invert(d3.mouse(this)[0]);
// console.log(d3.mouse(this)[0])
console.log(xScale.invert(d3.mouse(this)[0]).getMonth())
console.log(Math.floor(xScale.invert(d3.mouse(this)[0])))
const date_hover = xScale.invert(d3.mouse(this)[0]).getMonth()
// yScale.invert(pos.y)
tooltipLine.attr("stroke", "grey")
.attr("x1", xScale(line_hover))
.attr("x2", xScale(line_hover))
.attr("y1", 0)
.attr("y2", height)
.attr("class", "line_hover")
.style('stroke-width', 1)
tooltip.html(date_hover)
.style("position", "absolute")
.style("background-color", "lightgrey")
.style('display', 'block')
.style('left', d3.event.pageX - 100+ "px")
.style('top', d3.event.pageY - 20+"px")
.selectAll()
.data(dataNest).enter()
.append('div')
.style('color', "black")
.html(function(e){ return e.key + ': ' + e.values.find(function(h){ return (h.Date.getMonth() + 0.5) == (date_hover + 0.5) }).randNumCol})
}
You can again view all of the code on my bl.ock: https://bl.ocks.org/JulienAssouline/574a52ee2034bcdc1e56ed926f36dd52
javascript d3.js
add a comment |
up vote
0
down vote
favorite
I'm trying to create a line chart with a tooltip where the x-axis is a date.
I would like the line and tooltip to change after it is halfway (or similar) to the next tick on the x-axis.
Mainly I would like the behavior to be the same as this bl.ock: http://bl.ocks.org/wdickerson/64535aff478e8a9fd9d9facccfef8929
You can view the behavior I currently have on my bl.ock: https://bl.ocks.org/JulienAssouline/574a52ee2034bcdc1e56ed926f36dd52
It mostly works but the data only changes after it passes to the September month and it never reaches the October month.
I have tried to adapt my code to the bl.ock. The problem is the bl.ock displayed is using years and I am using a date format which seems to be my main problem.
Here is the main part of the code:
var tipBox = svg.append("rect")
.attr("width", width)
.attr("height", height)
.attr("opacity", 0)
.on("mousemove", drawTooltip)
.on("mouseout", removeTooltip)
function removeTooltip() {
if (tooltip) tooltip.style('display', 'none');
if (tooltipLine) tooltipLine.attr('stroke', 'none');
}
function drawTooltip(){
const line_hover = xScale.invert(d3.mouse(this)[0]);
// console.log(d3.mouse(this)[0])
console.log(xScale.invert(d3.mouse(this)[0]).getMonth())
console.log(Math.floor(xScale.invert(d3.mouse(this)[0])))
const date_hover = xScale.invert(d3.mouse(this)[0]).getMonth()
// yScale.invert(pos.y)
tooltipLine.attr("stroke", "grey")
.attr("x1", xScale(line_hover))
.attr("x2", xScale(line_hover))
.attr("y1", 0)
.attr("y2", height)
.attr("class", "line_hover")
.style('stroke-width', 1)
tooltip.html(date_hover)
.style("position", "absolute")
.style("background-color", "lightgrey")
.style('display', 'block')
.style('left', d3.event.pageX - 100+ "px")
.style('top', d3.event.pageY - 20+"px")
.selectAll()
.data(dataNest).enter()
.append('div')
.style('color', "black")
.html(function(e){ return e.key + ': ' + e.values.find(function(h){ return (h.Date.getMonth() + 0.5) == (date_hover + 0.5) }).randNumCol})
}
You can again view all of the code on my bl.ock: https://bl.ocks.org/JulienAssouline/574a52ee2034bcdc1e56ed926f36dd52
javascript d3.js
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I'm trying to create a line chart with a tooltip where the x-axis is a date.
I would like the line and tooltip to change after it is halfway (or similar) to the next tick on the x-axis.
Mainly I would like the behavior to be the same as this bl.ock: http://bl.ocks.org/wdickerson/64535aff478e8a9fd9d9facccfef8929
You can view the behavior I currently have on my bl.ock: https://bl.ocks.org/JulienAssouline/574a52ee2034bcdc1e56ed926f36dd52
It mostly works but the data only changes after it passes to the September month and it never reaches the October month.
I have tried to adapt my code to the bl.ock. The problem is the bl.ock displayed is using years and I am using a date format which seems to be my main problem.
Here is the main part of the code:
var tipBox = svg.append("rect")
.attr("width", width)
.attr("height", height)
.attr("opacity", 0)
.on("mousemove", drawTooltip)
.on("mouseout", removeTooltip)
function removeTooltip() {
if (tooltip) tooltip.style('display', 'none');
if (tooltipLine) tooltipLine.attr('stroke', 'none');
}
function drawTooltip(){
const line_hover = xScale.invert(d3.mouse(this)[0]);
// console.log(d3.mouse(this)[0])
console.log(xScale.invert(d3.mouse(this)[0]).getMonth())
console.log(Math.floor(xScale.invert(d3.mouse(this)[0])))
const date_hover = xScale.invert(d3.mouse(this)[0]).getMonth()
// yScale.invert(pos.y)
tooltipLine.attr("stroke", "grey")
.attr("x1", xScale(line_hover))
.attr("x2", xScale(line_hover))
.attr("y1", 0)
.attr("y2", height)
.attr("class", "line_hover")
.style('stroke-width', 1)
tooltip.html(date_hover)
.style("position", "absolute")
.style("background-color", "lightgrey")
.style('display', 'block')
.style('left', d3.event.pageX - 100+ "px")
.style('top', d3.event.pageY - 20+"px")
.selectAll()
.data(dataNest).enter()
.append('div')
.style('color', "black")
.html(function(e){ return e.key + ': ' + e.values.find(function(h){ return (h.Date.getMonth() + 0.5) == (date_hover + 0.5) }).randNumCol})
}
You can again view all of the code on my bl.ock: https://bl.ocks.org/JulienAssouline/574a52ee2034bcdc1e56ed926f36dd52
javascript d3.js
I'm trying to create a line chart with a tooltip where the x-axis is a date.
I would like the line and tooltip to change after it is halfway (or similar) to the next tick on the x-axis.
Mainly I would like the behavior to be the same as this bl.ock: http://bl.ocks.org/wdickerson/64535aff478e8a9fd9d9facccfef8929
You can view the behavior I currently have on my bl.ock: https://bl.ocks.org/JulienAssouline/574a52ee2034bcdc1e56ed926f36dd52
It mostly works but the data only changes after it passes to the September month and it never reaches the October month.
I have tried to adapt my code to the bl.ock. The problem is the bl.ock displayed is using years and I am using a date format which seems to be my main problem.
Here is the main part of the code:
var tipBox = svg.append("rect")
.attr("width", width)
.attr("height", height)
.attr("opacity", 0)
.on("mousemove", drawTooltip)
.on("mouseout", removeTooltip)
function removeTooltip() {
if (tooltip) tooltip.style('display', 'none');
if (tooltipLine) tooltipLine.attr('stroke', 'none');
}
function drawTooltip(){
const line_hover = xScale.invert(d3.mouse(this)[0]);
// console.log(d3.mouse(this)[0])
console.log(xScale.invert(d3.mouse(this)[0]).getMonth())
console.log(Math.floor(xScale.invert(d3.mouse(this)[0])))
const date_hover = xScale.invert(d3.mouse(this)[0]).getMonth()
// yScale.invert(pos.y)
tooltipLine.attr("stroke", "grey")
.attr("x1", xScale(line_hover))
.attr("x2", xScale(line_hover))
.attr("y1", 0)
.attr("y2", height)
.attr("class", "line_hover")
.style('stroke-width', 1)
tooltip.html(date_hover)
.style("position", "absolute")
.style("background-color", "lightgrey")
.style('display', 'block')
.style('left', d3.event.pageX - 100+ "px")
.style('top', d3.event.pageY - 20+"px")
.selectAll()
.data(dataNest).enter()
.append('div')
.style('color', "black")
.html(function(e){ return e.key + ': ' + e.values.find(function(h){ return (h.Date.getMonth() + 0.5) == (date_hover + 0.5) }).randNumCol})
}
You can again view all of the code on my bl.ock: https://bl.ocks.org/JulienAssouline/574a52ee2034bcdc1e56ed926f36dd52
javascript d3.js
javascript d3.js
asked Nov 12 at 1:07
Julien
325416
325416
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
GetMonth will always give the month. Get the date and display based on the date. Not ideal, but works.
Example here
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
GetMonth will always give the month. Get the date and display based on the date. Not ideal, but works.
Example here
add a comment |
up vote
1
down vote
accepted
GetMonth will always give the month. Get the date and display based on the date. Not ideal, but works.
Example here
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
GetMonth will always give the month. Get the date and display based on the date. Not ideal, but works.
Example here
GetMonth will always give the month. Get the date and display based on the date. Not ideal, but works.
Example here
answered Nov 12 at 6:05
Umesh Maharshi
1,040410
1,040410
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53254824%2ftooltip-behavior-on-line-chart-with-date-as-the-x-axis%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown