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
}
}
}
Related
How can I change the format of the "upper" xAxis Label as shown in the picture?
I have already figured out how to change the weekday labels below (T, W, T, etc.) with the following snippet (for weeks, code placed within the xAxis):
dateTimeLabelFormats: {
week: {
list: ['Kalenderwoche %W', 'KW%W']
}
},
Existing example to play around:
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/gantt/demo/resource-management
You have 2 xAxis. So you should provide dateTimeLabelFormats array.
axis with the lower index will be placed lower.
So, your xAxis should be
xAxis: [{
currentDateIndicator: true,
dateTimeLabelFormats: {
day: {
list: ['%A, %e. %B', '%a, %e. %b', '%E']
}
}
},
{
dateTimeLabelFormats: {
week: {
list: ['Kalenderwoche %W', 'KW%W']
},
month: {
list: ['Monat%W', 'KW%W']
}
}
}
],
According to this page, the way to do it is to set the x-axis to be an array of objects, with each representing a level of the x-axis (day, week, month, etc.). In this case: https://jsfiddle.net/vm5t78j3/
xAxis: [{
currentDateIndicator: true,
}, {
labels: {
format: '{value:%W}'
},
}],
I am upgrading fullcalendar-scheduler 1.9.4 to v5 beta2.
I found that the behaviour of slotLabelInterval has been changed from v3 to v4.
My objective : I want to totally remove the slot label row. My setting in V1.9.4 is like below (It works) :
...
weekNumbers: true,
views: {
timelineThreeDays: {
type: 'timeline',
duration: { days: 3 },
slotLabelInterval: '24:00:00'
}
},
...
But the setting "slotLabelInterval: '24:00:00'" don't do the same thing in resourceTimeline type with Fullcalendar-Scheduler 5 beta2 (same as v4)
...
weekNumbers: true,
views: {
timelineThreeDays: {
type: 'resourceTimeline',
duration: { days: 3 },
slotLabelInterval: '24:00:00'
}
},
...
The screenshot for the above code :
What I have tried :
set slotDuration to 24 at the same time than slotLabelInterval (It didn't works)
set slotLabelFormat: { weekday: 'short', month: 'short' } (It didn't works, it always display slot time label )
Question: How to make the same effet like the first screenshot with V5
In v4 (or the v5 beta) you can set the same time period like this:
slotLabelInterval: { days: 1 },
Demo: https://codepen.io/ADyson82/pen/abvqBrN
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 think I've found a defect with the way Handsontable formats numeric inputs as percentages (or alternatively accepts invalid input depending on your position on what a valid number is).
If you use a leading decimal point decimal point - the percentage formatting will not work - but the input is accepted as a valid string. This is not consistent with numeral.js where the following input is correctly converted (doc suggests numeral formatting should work):
var string = numeral(.001).format('0,0.00000%');
// outputs 0.1000%
The only way I have found to fix this is to add a beforeChanged event so that it calls parseFloat on the value before any further events are fired. I have a feeling this will slow things down when copy large amounts of data. Can anyone confirm this is a defect or I am configuring things incorrectly?
JS Fiddle is below taken from the Handsontable page - remove the commented out beforeChange to see the fix with a beforeChange event. Simply type in any number number starting with a decimal point.
http://jsfiddle.net/deenairn/kwfkLqn4/4/
document.addEventListener("DOMContentLoaded", function () {
function getCarData() {
return [{
car: "Mercedes A 160",
year: 2011,
price_usd: 7000,
price_eur: 7000
}, {
car: "Citroen C4 Coupe",
year: 2012,
price_usd: 8330,
price_eur: 8330
}, {
car: "Audi A4 Avant",
year: 2013,
price_usd: 33900,
price_eur: 33900
}, {
car: "Opel Astra",
year: 2014,
price_usd: 5000,
price_eur: 5000
}, {
car: "BMW 320i Coupe",
year: 2015,
price_usd: 30500,
price_eur: 30500
}];
}
var
container = document.getElementById('example1'),
hot;
hot = new Handsontable(container, {
data: getCarData(),
colHeaders: ['Car', 'Year', 'Price ($)', 'Price (€)'],
columns: [{
data: 'car'
// 1nd column is simple text, no special options here
}, {
data: 'year',
type: 'numeric'
}, {
data: 'price_usd',
type: 'numeric',
format: '$0,0.00',
language: 'en' // this is the default locale, set up for USD
}, {
data: 'price_eur',
type: 'numeric',
format: '0,0.00 $',
language: 'de' // i18n: use this for EUR (German)
// more locales available on numeraljs.com
}],
beforeChange:
function(changes, source) {
alert(changes);
}
});
function bindDumpButton() {
if (typeof Handsontable === "undefined") {
return;
}
Handsontable.Dom.addEvent(document.body, 'click', function (e) {
var element = e.target || e.srcElement;
if (element.nodeName == "BUTTON" && element.name == 'dump') {
var name = element.getAttribute('data-dump');
var instance = element.getAttribute('data-instance');
var hot = window[instance];
console.log('data of ' + name, hot.getData());
}
});
}
bindDumpButton();
});
Posted here: https://github.com/handsontable/handsontable/issues/2430, but might as well post here as well:
I believe the problem is in the numericRenderer [in handsontable.full.js] where it checks if (helper.isNumeric(value)) before applying the formatting. This statement evaluates to false if value contains a leading decimal (".3" for instance). So, you can solve this issue by adding a leading zero:
(helper.isNumeric('0' + value)) evaluates to true for leading decimals but will still evaluate to false for non-numerals ("0.abaca").
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.