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
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.
I am having issues creating a line chart for my website. Take a look at this link:
http://jsfiddle.net/asgallant/XdncE/
This works fine when I just have 12 arrays (1 entire year) in my inputData variable. However, when I try adding multiple years,
var inputData = [[1990,5335293],[1990,5309932],[1990,5327306],[1990,5354168],
[1990,5394006],[1990,5448990],[1990,5474112],[1990,5446876],[1990,5382558],
[1990,5410053], [1990,5399647],[1990,5386422],[1991,2780189],[1991,2785247],
[1991,2812202],[1991,2815125],[1991,2827592],[1991,2869426],[1991,2862056],
[1991,2822597],[1991,2806516],[1991,2815310],[1991,2806339],[1991,2792384]] ;
my graph completely messes up because the year intervals (haxis) become way off. Why is that? Do you guys know how to fix it?
You have to correct month calculation from
var d = new Date(inputData[i][0], i, 1);
to
var d = new Date(inputData[i][0], i%12, 1);
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 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