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.
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
Take this scenario from a graph I'm working on at the moment:
The problem I'm having is in the bottom left. My dataset's first coordinate is defined at approximately (60,5), yet the domain I'm looking to cover extends right down to 0. Is there any way I can get d3 to extrapolate this data to my origin? I've browsed the API but nothing clearly stands out.
I'm well aware I could just .push a new object with coordinates (0,0) onto my dataset array, but I would prefer not to as I may need to do manipulation with my data later, making this an undesirable option.
Since you have not provided a fiddle i chose to put up a small fiddle to explain this:
My Data set is like this:
data = [{
xval: 10,
yval: 100
}, {
xval: 40,
yval: 90
}, {
xval: 50,
yval: 12
}, {
xval: 90,
yval: 70
}]
You can see the values of x and y value varies from 0 to 100.
So you will define the range like:
x.domain([0, 100]);//this will show x axis start from 0
y.domain([0,100]);//this will show y axis start from 0
example here:
as per your requirement you want the y axis to start from 10 so you do
x.domain([0, 100]);//this will show x axis start from 0
y.domain([10,100]);//this will show y axis start from 10
example here
Hope this solves your problem. ..:)
You can also adjust your data domain to the maximum and the minimum using the extent function that d3 provides.
var x_domain = d3.extent(data,function(d){return d.xval});
var y_domain = d3.extent(data,function(d){return d.yval});
x.domain(x_domain);
y.domain(y_domain);
That way the graph will always be adjusted to the data domain in both coordinates whatever data comes.
Watch this working.
Well, I found an answer to my own question here.
d3 will never extend a line beyond the final data point.
The solution is the following:
If your really must have the line start and end at the very end of your range, then you have two options:
Create a custom interpolation function; or,
Add an "end-value" data point when you pass your data array to d3.svg.line.
For me, it looks like I'm going to have to include a "start value" datapoint. Disappointing.
I've searched in the official d3.js documentation, as well as, here in stackoverflow to find a way to add custom tickValues to a time scale axis; However, i haven't stumble across any documentation that confirms that something like that is possible.
So in essence, i have a time scale axis and i would like to show specific hours
e.g. i'd like to do something like this :
xHourAxis
.ticks(d3.time.hours, 2)
.tickFormat(d3.time.format('%I %p'))
.tickValues(2, 4, 6, 8, 10, 12) ;
So i want to display tick values every 2 hours, but not including the first (12 am) and the last (12 pm).
Does anyone know if there is any workaround for that?
Nearly there, but your code has two problems: First the tick values must be specified in an array, and second those values should be Javascript date objects. i.e. you just provide an array of dates to tickValues so your code would looks something like this:
xHourAxis
.tickFormat(d3.time.format('%I %p'))
.tickValues([new Date(2000,10,5), new Date(2005,2,7), new Date(2007,11,11)]);
Also, note that you needn't call the ticks() if you are going to later specify custom values.
I have a project that uses the flot plotting package and I have everything working except that my x-axis (which is time) displays the time in my localized time but I want it to display unlocalized.
For example: The data being fed to flot has the time 7:45AM (from the server as milliseconds from the Unix Epoch) but the x-axis displays 12:45AM (which makes sense since I'm in MST-700).
I know the data being sent down is correct as I stepped through that code and make sure it was correct. I know that the JavaScript has the correct time as I told it to output the date that it was given and it was correct (correct being it display 7:45AM and not 12:45AM). I'm very confident that my issue has to do with time zones as I set my time zone to -1200 and the data at 7:45AM would show as 20:45PM. Here is my plot configuration:
var plotOptions = {
series: { shadowSize: 0 }, // drawing is faster without shadows
yaxis: { ticks: 5 },
xaxis: { position: "bottom", mix: minX, max: maxX, mode: "time", timeformat: "%y/%m/%d %H:%M:%S"},
yaxes: yAxes
};
Where maxX is the most current time reading from the server in milliseconds since the unix epoch and minX is some number of minutes less than maxX in milliseconds.
I have tried setting timezone to null and that seemed to have no effect as well as timeZoneOffset. The date and times must stay as they are, as in I can't add/subtract some specified timezone to them.
TL;DR How can I get flot to show time without any localization (no timezone)?
Any help would be greatly appreciated :)
Edit 1:
Upon doing some testing dealing with the time library (jquery.flot.time.js) I found that the tickGenerator and tickFormatter functions aren't being called. I put an alert inside both functions that would display the date that it calculated but I never get the alerts.
Have you looked at the API docs?
https://github.com/flot/flot/blob/master/API.md#customizing-the-axes
It seems you should be able to pass in timezone:"MST-700" or similar, depending which library you chose to include for time formatting. A search through the same page for "timezone" should yield even more information.
Not too sure of exactly why this worked but I managed to fix the issue my self. I took out the jquery.flot.time.js file and now the x-axis is displaying correctly.
I have a feeling that the library was disregarding my timezone options.