How can I format the labels that appear on AG-Grid chart's axis? I have a lot of time-series data so I expect users frequently to produce charts where the horizontal axis is a date. Unfortunately, this produces unreadable chart labels because the dates are not formatted (see attached image) - The labels look like "Thu Jan 09 2020 00:00:00 GMT+0000 (Greenwich Mean Time)" when all I would like is simply "2020-01-09". My The dates in the grid look fine thanks to a valueFormatter for dates.
It is also very common for users to produce pivot tables using the date. This produces similarly terrible results for the labels, but I've found I can use "processSecondaryColGroupDef" to format dates that appear in the column headers. Is there a similar way to do this for charts?
Thankyou,
Troy.
From the docs -
For time axes, a format string can be provided, which will be used to
format the data for display as axis labels
You can either explicitly set the axis type to 'time', but you can also remove this and the chart will still use the time axis as it automatically detects the axis type from the data in the Date column.
You can implement processChartOptions callback and add your customizations -
processChartOptions(params) {
var options = params.options;
var dateFormatter = function(params) {
return params.value.value && para[enter link description here][1]ms.value.value.toLocaleDateString
? params.value.value.toLocaleDateString()
: params.value;
};
if (["line"].indexOf(params.type) < 0) {
if (options.xAxis && options.yAxis) {
options.xAxis.label.formatter = dateFormatter;
options.yAxis.label.formatter = dateFormatter;
}
} else {
options.xAxis.type = "time";
options.xAxis.label.format = "%d %B";
}
Example and details here
Related
I'm trying to display a week's worth of data in an area chart, and would like to use scaleTime() to populate my x axis. I've converted the date strings to date objects, and the domain appears to be correct, but I can't get the x axis to display the format I want. What I would like to see are 7 tick marks with the day, month, and year displayed. Instead, I'm seeing the day of the week and the date, and there are additional tick marks displaying '12 PM', as in the attached picture.
I've tried specifying the number of tick marks, but then it gets even weirder, especially on month transitions, and might display something like 'Mon 29, Tues 30, Wed 31, November, Fri 2'.
Bottom line, am I missing something in how I'm implementing the scale, and if not, how might I go about fine-tuning the tick marks to only show what I want to see? The examples I've been able to find don't seem to run into the same problems I'm experiencing.
Current format of my date objects: "2020-07-22T06:00:00.000Z"
The code:
let x = d3.scaleTime().range([0, width-margin.right-margin.left])
let y = d3.scaleLinear().range([height-margin.bottom, margin.top])
x.domain([d3.min(area_data, d => d.date), d3.max(area_data, d=>d.date)])
y.domain([0, max_cases])
let xAxis = d3.axisBottom(x);
let yAxis = d3.axisLeft(y);
Thanks in advance.
You can do something like
const xAxis = d3.axisBottom(x)
.ticks(d3.timeDay.every(1), '%-d %b %Y');
The first argument to ticks says that you want one tick for each day. The second argument is a format specifier that defines how to format the dates as strings. '%-d %b %Y' shows the day with no padding, the abbreviated month name, and the full year. For example, 22 Nov 2021. You can modify this as needed to get your desired format.
I'm pulling data from a csv where date(YYYYMMDD) and time (HHmm) are two of the columns. I already have a working parser that spits out array data points in [x, y] form. I just don't know how to parse my datetime (to use as the x-value) so Highcharts accepts it as a datetime. Just passing it in as one long number (YYYYMMDDHHmm) gives me a graph where all million points happen with a couple days in May...
You have two options depending on how is your data:
1) Set the correct data type as category
The documentation states:
The type of axis. Can be one of linear, logarithmic, datetime or category. In a datetime axis, the numbers are given in milliseconds, and tick marks are placed on appropriate values like full hours or days. In a category axis, the point names of the chart's series are used for categories, if not a categories array is defined.
To use it you would need your data in a millisecond format like:
[[1526688000000, 100], [1526774400000, 150], [1526860800000, 200]]
Fiddle: https://jsfiddle.net/y7kL4ccL/
Then to format your datetime, you can check here in the documentation.
2) Keeping the labels that way and provide a custom formatter
To do so you must set your xAxis.categories.type to category for Highcharts to use your point names as categories and then provide a custom xAxis.labels.formatter that transforms your string into whatever you want.
Example:
xAxis: {
type: 'category',
labels: {
formatter: function() {
var year = this.value.substring(0, 4);
var month = this.value.substring(4, 6);
var day = this.value.substring(6, 8);
return `${day}/${month}/${year}`;
}
}
},
Fiddle: https://jsfiddle.net/qpad3qh7/
I have an Excel 2016 Add-in and I would like to set the format on a couple of columns to Date (mm-dd-yyyy format) and center a couple of columns. How can I do this in Excel 2016 JavaScript model?
Also, I understand that the office model for 2016 does not allow you to change column width. Does anybody have a work around for this?
Thanks,
George
A function that sets a column width, date format and centers the values in Typescript:
columnFormatExampleFunction(ctx: Excel.RequestContext):void {
var sheet: Excel.Worksheet = ctx.workbook.worksheets.getActiveWorksheet();
var range: Excel.Range = sheet.getRange("B:B");
range.numberFormat = [["mm-dd-yyyy"]];
range.format.columnWidth = 150;
range.format.horizontalAlignment = "Center";
}
How do I parse an array of dates like this: "2013-07-11T00:00:00", into something useable for a line graph? The graph will stretch back a full year.
I'm trying to create a dynamic graph like the one in the "Plotting a chart" section on this page.
It would be great if I could have the tick marks like that as well (Apr '13).
I'm currently using the following function in JavaScript:
var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%SZ").parse;
But it doesn't work.
You have a trailing "Z" in your format specifier which makes your parser return null for the dates you give to it. Here's an example that works:
var parse = d3.time.format("%Y-%m-%dT%H:%M:%S").parse;
parse('2013-07-11T00:00:00'); // Thu Jul 11 2013 00:00:00 GMT+0200 (CEST)
You can use d3 time scales to display time-based axes with appropriate tick marks.
Edit:
I guess I misunderstood your question... here's another take which (hopefully) explains the usage of time scales and date formatting:
var scale = d3.time.scale(),
axis = d3.svg.axis(),
// Assuming you have your data as strings:
data = ['2013-07-11T00:00:00', '2013-08-11T00:00:00', ...],
range = [0, 500], // size of chart
domain = d3.extent(data, function (d) { // generate the data extent (min,max)
return new Date(d); // use Date instances for values
});
// Configure the scale with domain and range:
scale.domain(domain).range(range);
// Use the above scale for the axis:
axis.scale(scale)
// Print the dates in "Mmm dd" format:
.tickFormat(d3.time.format('%b %d'));
// Render the axis in your svg node:
svg.call(axis);
I'm working with a time-based scatterplot and am using data which only parses times by month, hour and day. On my axis labels, I'm getting "1901". D3 seems to be choosing a year and displaying it. How can I easily get rid of this? I don't want any year displayed:
1901 example http://lmnts.lmnarchitects.com/wp-content/uploads/2014/04/2014-04-01-09_31_30-127.0.0.1_8020_Climate3_seattle-winter-temps.html.jpg
you need to set the tickFormat of your axis to display only months and days. The tickFormat receives a function that takes a date and returns a string. You can use d3.time.format to set the tick format:
var axis = d3.svg.axis()
// ... set more attributes
.tickFormat(d3.time.format('%b %d')); // Abbreviated month and decimal day (Apr 01)
Regards,