I would like to customize the date aggregate(axis labels) for amCharts, but I couldn't find a provision to do this in amCharts docs. Googling the same just pointed me to the dateFormats documentation.
amCharts provides an option for aggregating date by setting parseDates to true and adding dateFormats as shown below. This option aggregates date by doing some calculation by amCharts itself, let's say 25 days for week aggregation(Jan 5), 65 days for month aggregation(Jan) and so on, but I would like to customize the default date aggregation level.
parseDates: true,
dateFormats: [{
fff: 'period',
format: 'JJ:NN:SS'
}, {
period: 'ss',
format: 'JJ:NN:SS'
}, {
period: 'mm',
format: 'JJ:NN'
}, {
period: 'hh',
format: 'JJ:NN'
}, {
period: 'DD', // day level
format: 'MM/DD/YYYY'
}, {
period: 'WW', // week level
format: 'MM/W/YYYY'
}, {
period: 'MM', // month level
format: 'MMM YYYY'
}, {
period: 'YYYY',
format: 'YYYY'
}]
I would like to change the default day, week, month levels in the following manner.
DAY LEVEL: <= 14 days
WEEK LEVEL: 14 < x <= 91
MONTH LEVEL: 91 < x <= 731
I would like to customize the date aggregation levels in amCharts. How could I do this? Any help would be appreciated. Thanks in advance.
You can't set this so precisely. The next period is chosen when there are too many items in the selected period. You can try adjusting minHorizontalGap value of CategoryAxis: http://docs.amcharts.com/3/javascriptcharts/CategoryAxis#minHorizontalGap (default is 75). If you make it smaller, more items will fit and you'll have more labels.
Related
How can I display full thick label? It always gets cut off and replaced by 3 dots.
I've been trying various options from https://www.chartjs.org/docs/master/axes/index with padding and similar, but I can't find this. Full date data is there.
You are using a previous version of Charts.js. With Charts.js >2.0 axis label should grow as much as needed to display the full date unless you override the label function like done here.
Demo: https://codepen.io/adelriosantiago/pen/wvooQRR?editors=1010
Date format can be changed in options.scales:
xAxes: [{
type: "time",
time: {
unit: 'hour',
unitStepSize: 0.5,
round: 'hour',
tooltipFormat: "h:mm:ss a",
displayFormats: {
hour: 'Y MMMM D, H:M:S A'
}
}
}]
I've been messing around with chart.js time options (displayFormat and tooltipFormat):
type: 'time',
unit: 'day',
unitStepSize: 1,
time: {
displayFormats: {
'day': 'dd',
},
tooltipFormat: 'll'
},
Which works as expected - on a 17inch laptop screen.
This shows dates as Mo, Tu, We, Th, Fr, Sa, Su.
However on a 24inch monitor chart.js automatically alters the dates and they become:
Aug 18 12AM - Aug 18 12PM, Aug 19 12AM - Aug 19 12PM, etc
How can I stop this from happening?
You need to set the hour property of displayFormats to dd as well, like so :
...
time: {
displayFormats: {
'day': 'dd',
'hour': 'dd' //<-- set this
},
tooltipFormat: 'll'
},
...
I was tasked to do a basic timeline using the components of vis.js, the question is that I'm from Brazil, and the timeline os vis.js displays months in English and I need them to be in Portuguese, studying the docs I found something about locale that allows the change in language, but as much as I tried, I couldn't change it.
It would be of great help if you could help me do it, here is my code regarding the change in language:
var options = {
width: "100%",
height: "381px",
timeAxis: {scale: 'year', step: 1},
zoomable: false,
maxMinorChars: 1,
locales: {
mylocale: {
current: 'atual',
time: 'tempo'
}
},
locale: 'mylocale',
format: {
minorLabels: {
day: 'DD',
month: 'MMMM',
year: 'YYYY'
},
majorLabels: {
day: 'DD',
month: 'MMMM',
year: 'YYYY'
}
}
};
Code was based on this links:
(http://visjs.org/docs/timeline/)
(http://momentjs.com/)
I know this question is old and I don't know if the version of vis.js supported this when you asked the question, but...
the minorLabels and majorLabels can be functions instead of an object and you can return whatever string you want. The functions take 3 arguments (date, scale, step).
options: {
format: {
minorLabels: function (date, scale, step) {
// return minor label with date in your locale
},
majorLabels: function (date, scale, step) {
// return major label with date in your locale
}
}
}
I have a problem formatting the horizontal axis in my google timeline chart. The problem is that I have different data sets where the time range can be days or hours or maybe minutes. The timeline chart formats its hAxis on its own but it uses american date format. I want to have the ISO date format (e.g. 22/07/2015) and time like hh:mm. I saw an formating example for the google corechart on the docs: https://developers.google.com/chart/interactive/docs/datesandtimes (last one on page)
I tried to apply it to my problem:
https://jsfiddle.net/ezcxd61m/2/
var options = {
width: 900,
height: 500,
legend: {position: 'none'},
enableInteractivity: false,
chartArea: {
width: '85%'
},
hAxis: {
viewWindow: {
min: new Date(2013, 9, 13),
max: new Date(2015, 0, 3, 1)
},
gridlines: {
count: -1,
units: {
days: {format: ['dd.MM.yyyy']},
hours: {format: ['HH:mm', 'hh']},
minutes: {format: ['HH:mm', ':mm']}
}
},
minorGridlines: {
units: {
days: {format: ['dd.MM.yyyy']},
hours: {format: ['hh:mm:ss', 'hh']},
minutes: {format: ['HH:mm', ':mm']}
}
}
}
};
But it seems that it doesn't work for the timeline chart. Can anyone help me?
Thanks,
Rob
I had a similar issue, starting from your first attempt I guess I managed to get what you were asking for. Just change the hAxis in the options var as follows:
hAxis: {
format: 'dd.MM.yyyy HH:MM'
}
I've applied the changes in the url you provided
https://jsfiddle.net/ezcxd61m/2/
You will need to set the hAxis.format() depending on the thresholds you set.
If this threshold is minutes, set the hAxis one way.
If this threshold is hours, set it another, and if its days, or weeks, or months or years set it a different way.
Just check the threshold condition before writing the chart, and apply it to the options object.
I use Highstock to display a graph showing the number of visitors in column and I need the zoom to display the number of visitors per day, per month and per year
In my graph I can display a number of visitor per day, but I would like display a number of visitor per month and per year too.
But when I look my graph (per month) I don't have a graph with 12 column, I have a graph with 365 column (one per day).
I use the type datetime for xAxis, but it doesn't work...
x rangeSelector: {
inputDateFormat:'%d.%m.%Y',
inputEditDateFormat:'%d.%m.%Y',
buttonTheme: {
width: 80
},
buttons: [{
type: 'day',
count: 7,
text: 'day'
}, {
type: 'month',
count: 12,
text: 'month'
}, {
type: 'year',
count: 1,
text: 'years'
}],
selected: 0
},
Axis: {
minTickInterval: 24 * 3600 * 1000,
type: 'datetime',
title: {
text: 'Time'
},
dateTimeLabelFormats: {
day: '%d.%m<br/>%Y'
}
}
How can I have a graph with "a addition of the visitors per column" ?
Below is what I get now. The first graph is OK, but the second, it's not OK. I would 12 columns and not 365.
Per Days:
Per Years:
Range selector buttons affecting to the time span which should be displayed on a chart. If you want to display specific unit on a chart, you need to use forced dataGrouping, see:
http://api.highcharts.com/highstock#plotOptions.series.dataGrouping.units
http://api.highcharts.com/highstock#plotOptions.series.dataGrouping.forced
Example could be found here: http://www.highcharts.com/stock/demo/candlestick-and-volume