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?
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.
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
I asked a question before about d3, and they suggested me to use an ordinal scale, this would solve my problems. Indeed it solved my problems, but know I'm stuck with another issue...
It draws perfectly, but my X-axis is full of text.
As an example, I want:
1900 1904 1908 1912 ...
but I got:
190119021903190419051906. As you can see this is not clear. (this is just an example, if there were only dates I could use another scale).
Everywhere I looked they talk about axis.ticks(number). But this doesn't work. Nothing happens and I still get the same result.
I hacked a result to get less results on the x-axis:
var str = [];
var i = 0;
while(i < data.length) {
str.push(data[i].age);
i=i+8;
}
x.domain(str);
But if I do this it creates a random line and doesn't draw it perfectly anymore. Don't know how to solve this.. It's a simple line chart, nothing difficult, the only difficulty (for me) is the ordinal scale...
Hope someone can help me out.
this is how my x and x-axis is defined:
var x = d3.scale.ordinal()
.rangeRoundBands([0, width-150],1);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
without the while-loop (the nasty hack), I just had the following line defining the x.domain:
x.domain(data.map(function(d) { return d.age; }));
Have a look at the documentation for axes, in particular the ticks() function. You can use it (or tickValues()) to control how many (and what) values you want to show.
If you're working with dates, you might want to use a time scale instead of the ordinal one. In particular it will allow you to control the ticks in a more meaningful way, e.g. specify that you want ticks every five years.
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/