The ticks in my xAxis in my current chart are in the correct format, but the wrong language. For example: "22 July 21:00"
I would like them to be localized like "22 Heinäkuuta 21:00", but the "locale property" doesn't seem to change anything. Am i doing it wrong?
var config = { // my chart config
type: 'line',
data: { datasets: [] },
options: {
parsing: false,
normalized: true,
animation: false,
locale: "fi-FI", // my locale
scales: {
xAxis: {
type: 'time',
time: {
source: 'auto',
minUnit: 'hour',
displayFormats: {
minute: "dd MMMM HH:mm",
hour: "dd MMMM HH:mm",
day: "dd MMMM",
week: "dd MMMM",
month: "MMMM",
quarter: 'MMMM yyyy',
year: "yyyy",
}
}
},
},
}
}
I've read all of the document's i could find. but i can't make sense of this locale documentation
I needed to give the locale to my date library which is Luxon for me:
luxon.Settings.defaultLocale = "fi";
Moment does it in a similar way but i haven't tested this:
moment.locale("fi");
here is some more information on it
Related
[{date: 21/6/2022, amount: 200, allocation: allocated, month: June, year: 2022, paymentcode: INVGT899, phone: 254704122812, docid: LJGPV5Lx2shyRmZsdf8L, name: Adam Jiwawa, userid: yuWufPcMu9VU6VTX2xrx33XOA323, paymentref: PAY77293}, {date: 20/6/2022, amount: 3000, allocation: allocated, month: June, paymentcode: PAY2002, phone: 254704122812, year: 2022, docid: TM6yPolBTKJNHA4AzTpg, name: Frank Lyn, userid: yuWufPcMu9VU6VTX2xrx33XOA323, paymentref: INV9000}, {date: 12/10/2022, amount: 20000, allocation: allocated, phone: 254704122812, paymentcode: INCV&88s, docid: joh64rHBqrJbV5WQX4lg, name: Ruth Wagoa, userid: 38G6mrsvzVNsdyHGDpmlFsDQz733, paymentref: PDY777888}, {date: 12/12/2023, allocation: unallocated, amount: 2000, phone: 254704122812, paymentcode: 203030cD, docid: kC7MEgRvnQhfwktAo2dI, name: James Ruponzo, userid: 38G6mrsvzVNsdyHGDpmlFsDQz733, paymentref: PAy6272},]
This is in the JSON format to access it you have to use its key. for example, if you want to access the amount value of the first item. First, as you can see it is in the List and want to access the first item to access it we have to use the list[0] and it is a map to access an item in the map we have to use the key i.e for the amount the key is "amount" so to access the amount of the first item the code will be
list[0]["amount"]
create a list for the items e.g inRageItems and access date of every product and compare it with the lower boundary of the range and with the upper boundary of the range and add that item to the list if it is in the range. To compare date flutter provide a method which is itemDate.compareTo(rangeBoundary) it will return a positive value if itemDate is after rangeBoundary Date and vice versa. create a list for the items e.g inRageItems and access date of every product and compare it with the lower boundary of the range and with the upper boundary of the range and add that item to the list if it is in the range. To compare date flutter provide a method which is itemDate.compareTo(rangeBoundary) it will return a positive value if itemDate is after rangeBoundary Date and vice versa. another method is itemDate.isAfter(lowerBoundary) and itemDate.isBefore(upperBoundary)
let your list is
List<Map<String, dynamic>> data = [
{
"date": "21/6/2022",
"amount": 200,
"allocation": true,
},
{
"date": "20/6/2022",
"amount": 3000,
"allocation": true,
},
{
"date": "12/10/2022",
"amount": 20000,
"allocation": true,
},
{
"date": "12/12/2023",
"allocation": false,
"amount": 2000,
},
];
DateTime lowerBoundary = DateTime(2022, 6, 21);
DateTime upperBoundary = DateTime(2022, 6, 29);
var filteredData = [];
data.forEach((element) {
var dateString = element["date"];
dateString = dateString.split("/");
DateTime formattedDate = DateTime(
int.parse(dateString[2]),
int.parse(dateString[1]),
int.parse(dateString[0]),
);
if (formattedDate.isAfter(lowerBoundary) &&
formattedDate.isBefore(upperBoundary)) {
filteredData.add(element);
}
});
if you have any problem with this then let me know I will try to answer you.
Maybe there will be an easy method but using this you can achieve your desired functionality.
I have the following Bubble chart generated in Chart.js. Note the xAxes labels are already date objects.
Here is the current configuration of the xAxes.
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'second',
}
}],
How can I display the xAxes labels in format YYYY-MM-DD HH:mm:ss?
You can use property displayFormats according to Display Formats from Chart.js documentation. See Moment.js for the allowable format strings.
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'second',
displayFormats: {
second: 'YYYY-MM-DD HH:mm:ss'
}
}
}]
}
I created a stockchart from amchart and saved it here: jsfiddle
Now I want to change (a) the date format of the chart cursor to "DD.MM.YYYY" and (b) the date format of the category axis to german format, e.g. "01. Mai 2018". I assume that (a) can somehow be solved with "categoryBalloonDateFormat", but I wasn't able to find the correct place to put it.
chart.ChartCursor.categoryBalloonDateFormat = "DD.MM.YYYY";
Unfortunately this doesn't work.
For (b) I have no clue at all.
For (a) you have to set it in the chartCursorSettings.categoryBalloonDateFormats array for the desired period(s) represented in your chart. If your data is daily, at least set the DD and WW periods (daily and weekly), but depending on the amount of data, you might want to set the MM (monthly) period as well. For example:
chart.chartCursorSettings.categoryBalloonDateFormats = [
{period:"YYYY", format:"YYYY"},
{period:"MM", format:"MMM, YYYY"},
{period:"WW", format:"DD.MM.YYYY"},
{period:"DD", format:"DD.MM.YYYY"},
{period:"hh", format:"JJ:NN"},
{period:"mm", format:"JJ:NN"},
{period:"ss", format:"JJ:NN:SS"},
{period:"fff", format:"JJ:NN:SS"}
]
Similarly for (b), you have to set the categoryAxesSettings.dateFormats array in the same manner as categoryBalloonDateFormats:
chart.categoryAxesSettings.dateFormats = [
{period:"YYYY", format:"YYYY"},
{period:"MM", format:"MMM, YYYY"},
{period:"WW", format:"DD.MM.YYYY"},
{period:"DD", format:"DD.MM.YYYY"},
{period:"hh", format:"JJ:NN"},
{period:"mm", format:"JJ:NN"},
{period:"ss", format:"JJ:NN:SS"},
{period:"fff", format:"JJ:NN:SS"}
]
Demo:
var chart = AmCharts.makeChart("chartdiv", {
"type": "stock",
"theme": "light",
"categoryAxesSettings": {
"dateFormats": [{
period: "YYYY",
format: "YYYY"
},
{
period: "MM",
format: "DD.MM.YYYY"
},
{
period: "WW",
format: "DD.MM.YYYY"
},
{
period: "DD",
format: "DD.MM.YYYY"
},
{
period: "hh",
format: "JJ:NN"
},
{
period: "mm",
format: "JJ:NN"
},
{
period: "ss",
format: "JJ:NN:SS"
},
{
period: "fff",
format: "JJ:NN:SS"
}
]
},
"chartCursorSettings": {
"categoryBalloonDateFormats": [{
period: "YYYY",
format: "YYYY"
},
{
period: "MM",
format: "DD.MM.YYYY"
},
{
period: "WW",
format: "DD.MM.YYYY"
},
{
period: "DD",
format: "DD.MM.YYYY"
},
{
period: "hh",
format: "JJ:NN"
},
{
period: "mm",
format: "JJ:NN"
},
{
period: "ss",
format: "JJ:NN:SS"
},
{
period: "fff",
format: "JJ:NN:SS"
}
],
"valueBalloonsEnabled": true
},
"dataSets": [{
"fieldMappings": [{
"fromField": "value",
"toField": "value"
}],
"dataProvider": generateChartData(),
"categoryField": "date"
}],
"panels": [{
"stockGraphs": [{
"valueField": "value",
"type": "smoothedLine"
}]
}]
});
function generateChartData() {
var chartData = [];
var firstDate = new Date(2012, 0, 1);
firstDate.setDate(firstDate.getDate() - 1000);
firstDate.setHours(0, 0, 0, 0);
for (var i = 0; i < 30; i++) {
var newDate = new Date(firstDate);
newDate.setDate(i);
var a = Math.round(Math.random() * (40 + i)) + 100 + i;
chartData.push({
date: newDate,
value: a
});
}
return chartData;
}
html,
body {
width: 100%;
height: 100%;
margin: 0px;
}
#chartdiv {
width: 100%;
height: 100%;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv"></div>
Thanks - that worked! In addition if someone wants to change the month names to another language:
AmCharts.monthNames = [
'Januar',
'Februar',
'März',
'April',
'Mai',
'Juni',
'Juli',
'August',
'September',
'Oktober',
'November',
'Dezember'];
AmCharts.shortMonthNames = [
'Jan.',
'Feb.',
'März',
'April',
'Mai',
'Juni',
'Juli',
'Aug.',
'Sept.',
'Okt.',
'Nov.',
'Dez.'];
I want to disable future years in bootstarp datepicker calender.
I tried following code,
$('.dpd3').datepicker({
format: " yyyy",
viewMode: "years",
endDate: now(),
minViewMode: "years"
});
Thanks
Try this....
$(function(){
$('.datepicker').datepicker({
format: 'mm-dd-yyyy',
endDate: '+0d',
autoclose: true
});
});
http://jsfiddle.net/tjnicolaides/cjp7y/
$(function () {
var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate() + 1, 0, 0, 0, 0) ;
$('#Inputstartdatepkr').datetimepicker({
language: 'en',
pick12HourFormat: true,
pickSeconds: false,
startDate: today
});
});
Server is returning a string with the date in this format "2/6/2013" after we bind to the formatter, it appears like this: "12/4/2007".
{
name: 'DueDate',
index: 'DueDate',
width: 110,
align: 'center',
resizable: false,
formatter:'date',
formatoptions: { newformat: 'm/d/Y' },
datefmt: 'm/d/Y'
}
Why?
Try specifying source format in the formatoptions.
ie;
formatoptions: { srcformat:'d/m/Y',newformat: 'm/d/Y' },
Or you can use a custom formatter as described here