Chart.js x axis date-time formatting fails
Question
I am using Python and Flask to get data from a service and Chart.js to chart values over time. I cannot get the xAxes time formatting to work in Chart.js. I'm new to JavaScript so maybe its something simple like a missing comma but I do not think so.
My python was passing a datetime object to the JavaScript. I thought maybe chart.js needed a string so I created a static python function to provide a few string dates but it produced the same result.
Chart.js script with Jinja2 templating:
<head>
<meta charset="utf-8" />
<title>Chart.js Example</title>
<!-- import plugin script -->
<script src={{ url_for('static', filename="vendor/chart.min.js") }}></script>
<script src={{ url_for('static', filename="vendor/moment.min.js") }}></script>
<!--<script src='static/vendor/chart.min.js'></script>
<link rel="stylesheet" href={{ url_for('static', filename="chartStyle.css") }}> -->
</head>
<body>
<h1>Simple Line Chart</h1>
<div class="container" style="position: relative; height:40vh; width:80vw">
<canvas id="myChart"></canvas>
</div>
<div>
<table>
<tr>
<th>DateTime</th>
</tr>
{% for itme in labels %}
<tr><td>{{itme}}</td></tr>
{% endfor %}
</table>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
// define the chart data
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line', //types: bar, horizontalBar, pie, line, doughnut, radar, polarArea
// The data for our dataset
data: {
labels: [
{% for item in labels %}
new Date('{{item}}'), //I've tried inserting a string instead of date object
//'{{item}}',
{% endfor %}],
datasets: [{
label: '{{ legend }}',
backgroundColor: 'rgba(255, 99, 132, 0)',
borderColor: 'rgb(117, 4, 28)',
borderWidth:1,
hoverBorderWidth:3,
hoverBorderColor:'#000',
data: [{% for item in values %}
{{item}},
{% endfor %}],
}]
},
options:{
title:{
display:true,
text:'test string date time',
fontSize:25,
},
legend:{
//display:false //to hide legend
position:'right',
labels:{
fontColor:'#000'
}
},
tooltips:{
//enabled:false,
},
scales:{
yAxes:[{
scaleLabel:{
display: true,
labelString: 'mg/m3',
fontColor: '#000',
fontWeight: 'bold',
fontSize:25
}
}],
xAxes:[{
Type: 'time',
time: {
parser: 'HH:mm:ss a', //these formatting values do nothing, I've tried a few different ones
unit: 'second', //I have tried minutes and hours too, same result
displayFormats: {
'millisecond': 'HH:mm:ss a', //I have tried without the 'a' too, same result
'second': 'HH:mm:ss a',
'minute': 'HH:mm:ss a',
'hour': 'HH:mm:ss a',
'day': 'HH:mm:ss a',
'week': 'HH:mm:ss a',
'month': 'HH:mm:ss a',
'quarter': 'HH:mm:ss a',
'year': 'HH:mm:ss a',
}
},
ticks: {
source: 'auto'
},
scaleLabel:{
display: true,
labelString: 'Recording Time',
fontColor: '#000',
fontWeight: 'bold',
fontSize:25
}
}]
},
responsive: true,
maintainAspectRatio: false,
elements: {
point:{
radius: 0
},
line: {
tension: 0
}
},
}
});
</script>
</body>
</html>
Python function with testing data:
from flask import Flask, Blueprint, render_template, request
stringDate_bp5 = Blueprint('stringDate_bp5', __name__,
template_folder='../templates',
static_folder='../stringDate/static/vendor/', static_url_path='/stringDate/static/vendor/')
@stringDate_bp5.route("")
def stringDate():
#reading1 = datetime.datetime(2019, 12, 19, 13, 36, 29, tzinfo=<DstTzInfo 'US/Pacific' PST-1 day, 16:00:00 STD>)
labels = ['2019-12-19T13:36:29-08:00', '2019-12-19T13:36:59-08:00', '2019-12-19T13:37:29-08:00', '2019-12-19T13:37:59-08:00', '2019-12-19T13:38:29-08:00']
values = [0.05, 0.07, 0.15, 0.08, 0.05]
legend = 'Test String Dates'
return render_template('chart2.html', values=values, labels=labels, legend=legend)
output:
Chart output with Day, Month, date, year, time, UTC offset, timezone. The X axes labels should just be time but no matter what I try the labels stay in the default format shown above.
1 answers
solution1
0 ACCPTED 2020-06-17 16:19:22
Your chart config looks just fine after change Type: 'time' to type: 'time' . You can run the version below, which substitutes your Python template variables.
Here are some other things to check
- After correcting the
typetypo, look for console errors. - Make sure moment.js is loading correctly.
- Check the versions of moment.js and Chart.js (example below uses 2.26.0 and 2.9.3 respectively).
- Provide the actual HTML source (instead of the template), because if it's still broken it implies something wrong with the templating/passing values.
const config = { // The type of chart we want to create type: 'line', //types: bar, horizontalBar, pie, line, doughnut, radar, polarArea // The data for our dataset data: { labels: [new Date('2019-12-19T13:36:29-08:00'), new Date('2019-12-19T13:36:59-08:00'), new Date('2019-12-19T13:37:29-08:00'), new Date('2019-12-19T13:37:59-08:00'), new Date('2019-12-19T13:38:29-08:00')], datasets: [{ label: 'Test String Dates', backgroundColor: 'rgba(255, 99, 132, 0)', borderColor: 'rgb(117, 4, 28)', borderWidth: 1, hoverBorderWidth: 3, hoverBorderColor: '#000', data: [0.05, 0.07, 0.15, 0.08, 0.05], }] }, options: { title: { display: true, text: 'test string date time', fontSize: 25, }, legend: { //display:false //to hide legend position: 'right', labels: { fontColor: '#000' } }, tooltips: { //enabled:false, }, scales: { yAxes: [{ scaleLabel: { display: true, labelString: 'mg/m3', fontColor: '#000', fontWeight: 'bold', fontSize: 25 } }], xAxes: [{ type: 'time', time: { parser: 'HH:mm:ss a', //these formatting values do nothing, I've tried a few different ones unit: 'second', //I have tried minutes and hours too, same result displayFormats: { 'millisecond': 'HH:mm:ss a', //I have tried without the 'a' too, same result 'second': 'HH:mm:ss a', 'minute': 'HH:mm:ss a', 'hour': 'HH:mm:ss a', 'day': 'HH:mm:ss a', 'week': 'HH:mm:ss a', 'month': 'HH:mm:ss a', 'quarter': 'HH:mm:ss a', 'year': 'HH:mm:ss a', } }, ticks: { source: 'auto' }, scaleLabel: { display: true, labelString: 'Recording Time', fontColor: '#000', fontWeight: 'bold', fontSize: 25 } }] }, responsive: true, maintainAspectRatio: false, elements: { point: { radius: 0 }, line: { tension: 0 } }, } }; const ctx = document.getElementById('canvas').getContext('2d'); new Chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script> <body> <canvas id="canvas" width="600" height="400"></canvas> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Formatting x-axis labels as time values in Chart.js
Time format on the x axis in Chart.js
Chart.js Dynamically Updating Chart with X Axis Time
Chart.js Time series - x axis that change depending on timestamp
X-axis of Chart.js not taking type : 'time'
Wrong order in Chart.js graph with time on the X-Axis
Chart.js Formatting dual axis and labels
Chart.js date formatting use for
Scrollable x axis with chart.js 2.1.4
Limit chart.js X axis ticks
Related Tags