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.
Related
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.
I'm making a timechart in d3 with a zoomable timescale.
The ticks change when zooming in or out.
This is my code, which works perfectly.
var x = d3.time.scale().domain([ new Date(minDate), new Date(maxDate) ]).range([ 0, width ]);
var xAxis = d3.svg.axis().scale(x).orient("top").ticks(5);
However the months and days are displayed in English. My website can be viewed in different languages. So I would like to translate the timeformat to a different language, depending on the language of the user.
How can I do this?
I'm using the d3 library to create a gantt chart. So far i have done something similar to this image:
However, as you can notice, on the hour axis the far left and far right 12AM labels are running out of the box. So, i'd like to know if there is a way to start the time ticks from 2AM and end in 10PM?
I define the hour axis like that:
x1HourAxis
.ticks(d3.time.hours, 2)
.tickFormat(d3.time.format('%I %p'));
i want to keep this configuration, but as i said, i'd like to start the time from 2AM then 4AM... until 10AM, so that i don't have this bad visual effect on the chart
do you have more code? it's hard to tell what is going on but you can try:
x1HourAxis
.ticks(d3.time.hours, 2)
.tickFormat(d3.time.format('%I %p'))
.tickSize(some value here for major tick size, some value here for minor tick size, 0);
setting the last parameter in axis.tickSize() to 0 will suppress the end ticks.
see: https://github.com/mbostock/d3/wiki/SVG-Axes
One option is to explicitly set the tick values that you want to display. You can do this with axis.tickValues([values])
Your axis, in your particular case, would be x1HourAxis, and I believe that values would be [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22], but you might need to either give them as time values (e.g. 2:00 PM) or else in ms values. I haven't tried explicitly setting values for time scales, so I'm not entirely sure what the convention is.
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/