0
255
ViewsHow to display specific time label in x-axis by Chart.js?
I am collecting the data of temperature and relative humidity everyday. I wanted to display these data with Chart.js and currently it is possible to show all my data. But I wonder how to display specific time label in x-axis by Chart.js?
As you can see, the x-axis is too "crowded" with the time label. I searched Chart.js documentation and tried to add autoskip and autoskippadding but it failed to show the targeted time label.
xAxes: [{
ticks: {
autoSkip: true,
autoSkipPadding: 60
}
}]
Hence, as these data were collected every minute and the size of data is so huge, how can I to display specific time label in x-axis only (00:00, 01:00, 02:00... and so on) so that to prevent too "crowded"? Any suggestions are highly appreciated, thank you!
1 answers
Answer question0
You can define the x-axis as a time cartesian axis as follows:
scales: {
x: {
type: 'time',
time: {
parser: 'HH:mm:ss',
unit: 'hour',
displayFormats: {
hour: 'HH:mm'
},
tooltipFormat: 'D MMM YYYY - HH:mm:ss'
}
}
}
Please take a look at your amended code below and see how it works. This code now uses the chartjs-adapter-moment together with moment. Feel free to use a different adapter.
$(function() {
getXlsxData();
});
function getXlsxData() {
var xlsxUrl =
"https://script.google.com/macros/s/AKfycbw9PQRojIml3x5gnMMiKihnTh9aLODd86ankhoz0ETIu0a8tcVh1ZIc4R08hlw8nHF8pA/exec?id=1Bvzqyu_NvPdL-zsOShbKF5me2bjtVVWQCK9MDA2KW58&sheet=Today"
var xlsxData = $.getJSON(xlsxUrl, function(data) {
$.each(data.Today, function(i, el) {
labels.push(el.Time);
TodayTemperature.push(el.CurrentTemp);
TodayRH.push(el.CurrentRH);
});
load_chart();
});
}
var labels = [],
TodayTemperature = [],
TodayRH = []
function load_chart() {
var myChart = new Chart('alldata', {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Temperature（°C）',
fill: false,
data: TodayTemperature,
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132, 0.8)',
borderWidth: 1,
radius: 0,
}, {
label: 'Relative Humidity （%）',
fill: false,
data: TodayRH,
backgroundColor: 'rgb(255, 159, 64)',
borderColor: 'rgb(255, 159, 64, 0.8)',
hidden: true,
borderWidth: 1,
radius: 0,
}, ]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
position: 'bottom',
},
layout: {
padding: {
top: 35,
right: 15,
}
},
scales: {
x: {
type: 'time',
time: {
parser: 'HH:mm:ss',
unit: 'hour',
displayFormats: {
hour: 'HH:mm'
},
tooltipFormat: 'D MMM YYYY - HH:mm:ss'
}
}
}
}
});
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0"></script>
<canvas id="alldata" height="200"></canvas>