I trying to display date in this format: "YYYY-MM-DD HH:mm", But when I trying like this:
const formatDate = "YYYY-MM-DD HH:mm";
mikeFWLabelChart = moment(mikeFWLabelChart).format(formatDate);
const a = new Chart(canvasElement, {
data: {
labels: mikeFWLabelChart,
datasets: [{
type: 'line',
label: 'Метра',
data: mikeFWDataChart,
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
type: "time",
time: {
format: formatDate,
tooltipFormat: 'll'
},
scaleLabel: {
display: true,
labelString: 'Date'
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'value'
}
}]
}
}
})
};
I receive error on X axis INVALID DATE..
Also I trying to change format date without moment code:
mikeFWLabelChart = moment(mikeFWLabelChart).format(formatDate);
with options code -> format But they still look like this format: 2023-02-16T05:00:00.000Z
How to change date format in this YYYY-MM-DD HH:mm ?
With moment.js you do it like this:
const formatDate = "YYYY-MM-DD HH:mm";
const date = new Date("2023-02-16T05:00:00.000Z");
const formattedDate = moment.utc(date).format(formatDate);
console.log(formattedDate)
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
With .toISOString() you do it like this:
const date = new Date("2023-02-16T05:00:00.000Z").toISOString();
const formattedDate = date.slice(0, 16).replace("T", " ");
console.log(formattedDate);
Related
I have been reading about sheet formats. I am using fetch and tokens to write data.
rows: [{
values: [
{
userEnteredValue: { numberValue: Math.round(new Date().getTime() / 1000) },
userEnteredFormat: {
numberFormat: {
type: 'DATE', pattern: 'ddd dd hh:mm'
}
}
}],
fields: 'userEnteredValue, userEnteredFormat'
}]
After posting the data when I click on the cell a calender shows but the time shown in not in the correct format its in epoc
In this case, it is required to convert from the Unix time to the serial number. And, I think that type might be type: "DATE_TIME". When these points are reflected in your showing script, how about the following modification?
Modified script:
var unixTime = new Date().getTime();
var serialNumber = (unixTime / 1000 / 86400) + 25569; // Ref: https://stackoverflow.com/a/6154953
var requests = {
requests: [{
updateCells: {
rows: [{ values: [{ userEnteredValue: { numberValue: serialNumber }, userEnteredFormat: { numberFormat: { type: "DATE_TIME", pattern: "ddd dd hh:mm" } } }] }],
range: { sheetId: 0 },
fields: "userEnteredValue, userEnteredFormat",
}
}]
};
In this cacse, the value is put into the cell "A1" of the sheet ID 0.
References:
Method: spreadsheets.batchUpdate
NumberFormatType
have a look at my code here. I am getting the data from backend so I am not able to manipulate them any further.
I got Chart.js as Scatter chart working, but the provided dates are parsed wrong 2020 becomes 1996 and so on.
Any idea how I get the x-axis formatted the right way?
var config = {
type: 'scatter',
data: {
datasets: [
{
label: "US Dates",
data: [
{x:2020-01-23,y:25.55,date:[2020,1,23]},
{x:2020-01-24,y:21.53,date:[2020,1,24]},
{x:2020-01-25,y:21.11,date:[2020,1,25]}
],
fill: false,
borderColor: 'red'
}
]
},
options: {
responsive: true,
title: {
display: true,
text: "Chart.js Time Scale"
},
scales: {
xAxes: [{
time: {
parser: 'YYYY-MM-DD',
tooltipFormat: 'll',
unit: 'month',
unitStepSize: 1,
},
scaleLabel: {
display: true,
labelString: 'Date'
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'value'
}
}]
}
}
};
window.onload = function () {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<body>
<div style="width:75%;">
<canvas id="canvas"></canvas>
</div>
And please ignore the "date" values within the data. This is just coming from the backend.
Thanks!
You simply need to put quotes around the x values, and also set the x-axis type to 'time', that should resolve the issue!
I updated the display formats to show nicer x-axis labels
displayFormats: { 'day': 'DD-MMM'}
I've also separated the input data into its own variable, if this looks like what is coming from your backend all should be good:
const inputData = [
{x:'2020-01-23',y:25.55,date:[2020,1,23]},
{x:'2020-01-24',y:21.53,date:[2020,1,24]},
{x:'2020-01-25',y:21.11,date:[2020,1,25]}
];
var config = {
type: 'scatter',
data: {
datasets: [
{
label: "US Dates",
data: inputData,
fill: false,
borderColor: 'red'
}
]
},
options: {
responsive: true,
title: {
display: true,
text: "Chart.js Time Scale"
},
scales: {
xAxes: [{
type: 'time',
time: {
parser: 'YYYY-MM-DD',
tooltipFormat: 'll',
unit: 'day',
unitStepSize: 1,
displayFormats: {
'day': 'DD-MMM',
}
},
scaleLabel: {
display: true,
labelString: 'Date'
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'value'
}
}]
}
}
};
window.onload = function () {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<body>
<div style="width:75%;">
<canvas id="canvas"></canvas>
</div>
Preview:
I am using chart.js in Angular 7 application. I want to know, is it possible to have 2 data sets on single line chart.
Detail:
On my X-axis I have time related data and Y-axis contains numbers. Based on API response, (which returns time stamp and number) I can generate a line chart. But I want to have 2nd datasets on same line. 2nd data set related API response, gives me time stamp, so I want to use that time stamp to project point (maybe of different color) to show on single line.
this.chart = new Chart(ctx, {
type: 'line',
data: this.getChartAxisData(),
options: this.getChartOptions()
});
getChartAxisData() {
const first: any[] = this.listOne.map((data) => (new Date(data.date)));
const firstArray: any[] = this.listOne.map((data) => data.number);
const second: any[] = this.listTwo.map((data) => (new Date(data.date)));
return {
labels: first,
datasets: [
{
data: firstArray
}
]
};
}
getChartOptions() {
return {
scales: {
xAxes: [{
type: 'time',
time: {
max: this.endDate,
min: this.startDate,
displayFormats: {
'millisecond': 'hh:mm A',
'second': 'hh:mm A',
'minute': 'hh:mm A',
'hour': 'hh:mm A',
'day': 'DD-MMM',
'week': 'DD-MMM',
'month': 'DD-MMM'
}
}
}],
yAxes: [{
ticks: {
min: 0,
max: 800
}
}]
}
};
}
I am trying to display dateTime in day/weekly/month format on the x axis of high charts I have the data formatted as x utc date time format and y (magnitude). I was under the impression I only need to do this for it to work
Highcharts.chart('container', {
title: {
text: 'Chart with time'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: "%e. %b",
month: "%b '%y",
year: "%Y"
}
},
series: [{
data: [
[1493326164493, 100],
[1493326194018, 120]
]
}]
});
What am I doing wrong? I have posted a fiddle link below for my scenario
https://jsfiddle.net/dLfv2sbd/
axis.dateTimeLabelFormats works a little bit different. In the first place, Highcharts tries to guess what is 'the best unit' of your data and, e.g. if it is a day, it will format it according to day property from dateTimeLabelFormats.
If you want to just format axis labels, you can use axis.labels.format and specify a format like this:
xAxis: {
type: 'datetime',
labels: {
format: '{value:%Y-%b-%e}'
},
example: https://jsfiddle.net/dLfv2sbd/1/
You can try format date with
xAxis: {
labels: {
formatter: function(){
return moment(new Date(this.value)).format('DD'); // example for moment.js date library
//return this.value;
},
},
Also you can check documentation http://api.highcharts.com/highcharts/xAxis.labels.formatter
You can try this also -
{value:%Y-%b-%e %l:%M %p }
labels: {
format: '{value:%Y-%b-%e %l:%M %p }'
},
Output- 2017-Apr-27 8:49 PM
format: '{value:%Y-%b-%e %l:%M}'
labels: {
format: '{value:%Y-%b-%e %l:%M %p }'
},
Output- 2017-Apr-27 8:49
format: '{value:%Y-%b-%e}'
labels: {
format: '{value:%Y-%b-%e}'
},
Output - 2017-Apr-27
format: '{value:%Y-%b-%e %H:%M}'
labels: {
format: '{value:%Y-%b-%e %H:%M}'
},
output 2017-Apr-27 20:49
Simple year-month-day format:
format: '{value:%Y-%m-%e}'
highcharts by month no correct label, when is one month.
when is 2 month the label in xAxis is jan-2016 and feb-2016 but when is only one month the label is 04:59:59:999
normal: https://jsfiddle.net/rcondori/c3y1r7sn/
series: [{
data: [{
name: "January",
x: 1451624399999,
y: 52
}, {
name: "February",
x: 1454302799999,
y: 60
}]
}
]
bad: https://jsfiddle.net/rcondori/c3y1r7sn/1/
series: [{
data: [{
name: "January",
x: 1451624399999,
y: 52
}
]
help me please.
You can use the following options:
Option 1
Use Highcharts API (check example):
Highcharts.dateFormat allows you to set up the date format (for more details check this link)
labels: {
formatter: function() {
return Highcharts.dateFormat('%B-%Y', this.value);
}
}
Option 2:
Using JS method:
Check below
var temp = new Date(this.value);
locale = "en-ca",
month = temp.toLocaleString(locale, {
month: "long"
});
return month + '-' + temp.getFullYear();
By setting the variable temp as new Date (this.value), you have access to the x value (in this case the date).
month=a.toLocalString allows you to get the month on letters instead of numbers.
Here the example:
$(function() {
$('#container').highcharts({
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
var temp = new Date(this.value);
locale = "en-ca",
month = temp.toLocaleString(locale, {
month: "long"
});
return month + '-' + temp.getFullYear();
}
}
},
series: [{
data: [{
name: "January",
x: 1451624399999,
y: 52
}]
}
]
});
});