I am using Chart.js to draw a line graph which is based on dates. When it first loads it shows data for the current month.
var dayByDayChart = new Chart(ctx, {
type: 'line',
data: {
labels: <?php echo json_encode($arr_dates); ?>,
//labels: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],
datasets: [{
label: '<?php echo $thisYear; ?>',
data: [<?php echo $rev2017; ?>],
backgroundColor: "rgba(153,255,51,0.6)"
}, {
label: '<?php echo $lastYear;?>',
data: [<?php echo $rev2016; ?>],
backgroundColor: "rgba(255,153,0,0.6)"
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [{
type: 'time',
time: {
displayFormats: {
'millisecond': 'MMM DD',
'second': 'MMM DD',
'minute': 'MMM DD',
'hour': 'MMM DD',
'day': 'MMM DD',
'week': 'MMM DD',
'month': 'MMM DD',
'quarter': 'MMM DD',
'year': 'MMM DD'
}
}
}]
}
}
});
You can then update the chart by selecting a date range, where I build a new set of data and pass it through using the objects and running update().
dayByDayChart.data.datasets[0].data = json.this_year;
dayByDayChart.data.datasets[1].data = json.last_year;
dayByDayChart.data.labels = json.dates;
The only issue is, Chart.js updates the time period correctly but still has the same number of x-axis points for the dates. Which means they get duplicated over and over. Here's an example of the intial chart:
and then the Ajax updated one:
As you can see, the date range is meant to be 1st to the 9th but it spreads those dates over the previous 28 days that are in Feb.
How can I get it to update correctly?
After looking at the docs and a couple forums I have found a solution that works. Chartsjs with the time config will try and guess the right time unit and when updating the chart dynamically it looks like it keeps the previous "guess".
Passing through the actual time unit I wanted i.e by day now allows the chart to update just once per day rather than trying to push single days over multiple ticks. here's the config example.
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'day',
displayFormats: {
//'millisecond': 'MMM DD',
'second': 'MMM DD',
'minute': 'MMM DD',
'hour': 'MMM DD',
'day': 'MMM DD',
'week': 'MMM DD',
'month': 'MMM DD',
'quarter': 'MMM DD',
'year': 'MMM DD'
}
}
}]
}
}
The difference is the unit option under time.
Related
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'm using chart.js to generate a line chart. I want to visualise the data by month, seconds, minutes etc.(change the xAxis accordingly) When I change "month" to "second" the browser crashes.. Almost anything but month works correctly
xAxes: [{
fontColor: 'orange',
type: 'time',
distribution: 'linear',
time: {
unit: 'month',
displayFormats: {
second: 'h:mm:ss a'
}
},
CodePen:
https://codepen.io/anon/pen/oJmrpw
So I'm trying to create a simple chart using chart.js. The chart consists of price values for the y-axis and time values for the x-axis. The data is fetched from an API.
The y-axis value are displayed properly, but for the x-values they appear condensed. These are the options I'm passing into the chart:
options: {
title: {
display: false
},
legend: {
display: false
},
scales: {
xAxes: [{
type: 'time',
ticks: {
source: 'data',
autoSkip: true,
autoSkipPadding: 50
},
time: {
parser: 'HH:mm',
tooltipFormat: 'HH:mm',
unit: 'minute',
stepSize: 10,
displayFormats: {
'minute': 'HH:mm',
'hour': 'HH:mm'
}
}
}],
yAxes: [{
type: 'linear',
ticks: {
beginAtZero: false,
callback: function(value, index, values) {
return '$' + value;
}
}
}]
}
}
I've tried adjusting the step size, but it's not working. For some strange reason, the first label on the x-axis is 15:14 no matter how much I change the data. What could be the issue?
The full code can be found here.
Thanks in advance.
Seems parser doesn't really work well with. simply remove parser in the option, you can see the clear result.
time: {
//parser: 'HH:mm',
tooltipFormat: 'HH:mm',
unit: 'minute',
stepSize: 10,
displayFormats: {
'minute': 'HH:mm',
'hour': 'HH:mm'
}
}
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 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}'