I am new to d3js, trying to display a graph with X axis having time series, 00:00 to 23:59.
Trying to configure d3js to parse time as below
var parseTime = d3.time.format("%H%M").parse;
var mytime = "2045"; // I expect it to be 8 45 PM
mytime = parseTime(mytime);
alert(JSON.stringify(mytime));
But the alert shows "1900-01-01T15:15:00.000Z" instead of 20:45. I know something is terribly wrong, may be my understanding itself is wrong.
Any pointers to have timeseries data on x series would be helpful.
Try to add .tickFormat(d3.timeFormat("%H%M")) in your x-axis declaration.
For a more general explanation of tickformat you can read this post:
https://bl.ocks.org/mbostock/9764126
Related
I want to show up a schedule in a Gantt Chart based on Amcharts. It will contain an entire week, and different periods of hours on each day on this week.
It means, when I see entire week, on X axis it will show up the days:
1 Apr, 2 Apr, ... 7 Apr.
And when I'll zoom in for a special day, it will show up hours:
08:00, 08:30 ... 13:30, 14:00.
Looking for a solution, I found examples only with days or only with hours. But never a mixed axis how I need. Is it possible with Amcharts?
For now, my code looks like this:
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.dateFormatter.dateFormat = "yyyy-MM-dd HH:mm";
dateAxis.renderer.minGridDistance = 50;
dateAxis.baseInterval = { count: 10, timeUnit: "minute" };
dateAxis.max = new Date(2018, 0, 5, 24, 0, 0, 0).getTime();
dateAxis.strictMinMax = true;
dateAxis.renderer.tooltipLocation = 0;
But it show only hours, and it's hard for users to understand the chart.
You cannot plot multiple axis values directly (unless amcharts finds a use case and adds a wrapper) but you can listen to the click or zoom event and update the chart with new values for axes. Reset it back when they zoom out. You are re rendering the chart anyway on zoom since the plot scales has to be recalculated every time it is zoomed.
I will update the answer with code if this is an acceptable approach. You could also try on your own in the mean time with the logic mentioned.
I found the following solutions in Amcharts V3.
The first one is to put date as X axis, and time as Y axis: https://www.amcharts.com/docs/v3/tutorials/using-gantt-chart-display-multi-segmented-columnsbars/
The second one works actually as I wanted and explained in the question below: https://www.amcharts.com/docs/v3/tutorials/gantt-chart-legend/
Thank you, hope it will help somebody else onetime.
I am trying to create custom tick values on X axis.
Chart is generated from data.csv file. There are 144 data points. Each data value represent 10 minutes cycle, so first tick should appear on 6th tick representing 1 hour.
If I use .domain([new Date('2014-03-08T12:00:00'), new Date('2014-03-9T00:00:00')]) for example, I will get X axis right, but my chart would be gone.
I can't use tickValues([]) in this case either.
What I should see on X axis is something like this 00:00 AM...(6 tick values)...1:00 AM...(6 tick values)...2:00 AM etc. Or it could be 00:00 AM...(12 tick values)...2:00 AM...(12 tick values)...3:00 AM etc. Just to be able to customize it.
Not sure if this is even possible. I tried following this simple example http://bl.ocks.org/phoebebright/3059392, but again, I get X axis right, but my chart is gone.
This would be the code: https://plnkr.co/edit/kc4E43Bgo4bNMB9hKX2j?p=preview
Thank you in advance!
Since your data doesn't contain actual date values, this is my solution:
You want to show one tick out of 6, since each tick represents 10 minutes and you want to show only the "hourly" tick. So, define the tick values using your x scale domain:
.tickValues(d3.range(x.domain()[0], x.domain()[1]).filter(function(d) {
return d % 6 === 0;
}))
And then, format the ticks to add a :00 to each one:
.tickFormat(function(d) {
return d/6 + ":00";
});
Here is your updated plunker: https://plnkr.co/edit/8EOGt8UvYq1J8qpIdArN?p=preview
Edit: As discussed in the comments, here is the solution with "am" and "pm": https://plnkr.co/edit/OvtVlgT4I6Y19hgoMKIK?p=preview
During the development of a website showing data for various indicators using D3.js, I experience a strange bug which I am unable to explain.
How to recreate the issue
Please visit the page at http://green-horizons.eu/indicator/scientific-publications-bioeconomy
Below the two text boxes there is a map with four buttons above it, please click on "Line Chart".
The map will be replaced by a line chart, showing a green line for Belgium's data and a red line for EU/ERA average values.
Now, please focus on the x axis which shows the years.
The x axis should cover the year range 1990-2013. This is true for all tests I and my colleagues did when in Europe (tested countries are Belgium, Estonia and Germany), see following image.
However, for anyone in the USA (and possibly Canada), the x axis shows a range of 1989-2012, see screenshot below (please note, the red line is missing due to only been added as a new feature recently).
Internally, the data comes from uploaded CSV files which are parsed into JSON and then used in D3.js. For the date scale, all year values are expanded to make a full date by using sth like
dateValue = year + '-01-01';
The javascript object containing the data also shows the correct years for all users (even in the US) but the display is off by one year.
How is this possible? I thought about time zones but I am not working with times, just dates.
I even tried to set the date to first of June instead of January to be sure but still the same behaviour.
Can anyone point me into a direction what to look for, I am stuck and out of ideas of how to pinpoint the source of the error.
Update regarding Mark's comment about the function
// Determine year range.
var yearTicks = [];
for (var y = obj.chartYMin; y <= obj.chartYMax; y++) {
yearTicks.push(new Date(y + "-01-01"));
}
// Set x scale function
var x = d3.time.scale()
.domain([new Date((obj.chartYMin - 1) + "-01-01"),
d3.time.day.offset(new Date((obj.chartYMax + 1) + "-01-01"), 1)])
.rangeRound([0, obj.width]);
// Create x axis
var xAxis = d3.svg.axis().scale(x)
.tickSize(-obj.height)
.tickSubdivide(true)
.tickValues(yearTicks)
.tickFormat(d3.time.format("%Y"));
// Update x axis in graph.
d3.select("#scoreboard-" + obj.chartType + "-canvas .x.axis").call(xAxis);
obj.chartYMin and obj.chartYMax are the minimum and maximum year values in the data provided, yearTicks is an array of all years present in data.
Similar to: Not able to display Month names on Rickshaw Graph on Coffeescript
Although, this question is similar to the above, I have already tried the given answer on that question and I still am unable to change the numerical values along the 'X' axis into month names
Code that is relevant from RickshawGraph.coffee:
xAxisOptions = new Rickshaw.Fixtures.Time()
time = xAxisOptions.unit('month')
x_axis = new Rickshaw.Graph.Axis.Time(graph: graph, timeUnit: time, timeFixture: xAxisOptions)
y_axis = new Rickshaw.Graph.Axis.Y(graph: graph, tickFormat: Rickshaw.Fixtures.Number.format)
I'd like to be able to show month names instead of numbers... Can anyone suggest a solution?
Okay, here's how I got at least the dates to show, although another issue has cropped up because of it:
New Code
format = (d) ->
enddate = new Date()
startdate = new Date()
startdate.setMonth(startdate.getMonth() - 12)
d = d3.time.months(startdate,enddate)
x_axis = new Rickshaw.Graph.Axis.X(graph: graph, pixelsPerTick: 1000, tickFormat: format)
Here's the link to the other issue (Which is related to this, but different):
https://stackoverflow.com/questions/26141212/coffeescript-dashing-rickshaw-graph-range-of-dates-parse
Code
Example of my problem: http://jsfiddle.net/x46RQ/
Goal
I want the graph to be a bar graph like so: http://jsfiddle.net/Lbd85/ but obviously with dates as the x axis. If I add my data into that fiddle, it messes up like the one listed above as seen here: http://jsfiddle.net/73G7Z/
Questions
Why are all 3 days provided in the data variable not displaying?
Why are the bars not lined up with their appropriate x-axis ticks?
Why does changing the data and mode to time totally mess up what would otherwise be a functional and accurate bar graph?
Environment
jQuery 1.7.1
jQuery Mobile 1.0.1
Flot 0.7
Thanks
Let me know if any additional information is required.
Part #1, You specified a min y value of 0 in your flot options, and your data point #2 has a value of zero. So it's there but just very small, almost invisible.
Part #2, you have to offset your dates by the users timezone:
Something like this:
var tzOffset = new Date();
tzOffset = tzOffset.getTimezoneOffset()*60*1000;
data.push([(new Date("2012/02/20").getTime()-tzOffset), 1]);
Part #3, Your graph is a mess because you specified a width when in fact the option you were looking for is barWidth and you need to specify the width in terms of time, i.e. milliseconds. See here for how. Something like barWidth: 12*60*60*1000 looks OK.
So in summary, this is what it will look like: http://jsfiddle.net/ncTd3/