score:2
i found that this wasn't possible for chart.js so i moved to highcharts.js instead, which supports this functionality.
here below is my code for the solution:
function tripspeedslinegraph() {
var gpsdata = @html.raw(json.serialize(model.gpsdata));
chartdata = []
var reqdata = $.map(gpsdata, function (value, index) {
chartdata.push([new date(value.timestamp), value.sp]);
});
var chart = highcharts.chart('tripspeedslinechart', {
chart: {
type: 'spline',
zoomtype: 'x',
panning: true,
pankey: 'shift'
},
title: {
text: "speed during trip"
},
subtitle: {
text: 'click and drag to zoom in. hold down shift key to pan.'
},
xaxis: {
type: 'datetime',
datetimelabelformats: {
day: '%b %h:%m:%s'
},
title: {
text: 'time of day'
}
},
yaxis: {
title: {
text: 'speed'
},
min: 0
},
tooltip: {
crosshairs: [true],
formatter: function () {
return "datetime: " + moment.utc(moment.unix(this.x/1000)).format("dd/mm-yyyy hh:mm:ss") + "<br> speed: " + this.y;
}
},
series: [{
name: 'speed data',
data: chartdata
}]
});
}
and the final result looks like this:
score:2
try this:
scales: {
xaxes: [{
type: 'time',
time: {
unit: 'minute',
unitstepsize: 30,
displayformats: {
'minute': this.person.use24h ? 'hh:mm' : 'hh:mm a'
}
}
}]
}
score:4
using chart.js v2.9.4, for me this worked:
scales: {
xaxes: [{
type: 'time',
time: {
displayformats: {hour: 'hh:mm'}
}
}]
}
score:10
actually this is supported (at least in recent versions of chartjs).
it seems like you have to specify the format for all the different formats that chartjs can display.
check: https://www.chartjs.org/docs/latest/axes/cartesian/time.html#display-formats
in my project the following works for me:
xaxes: [{
type: 'time',
time: {
parser: timeformat,
// round: 'day'
tooltipformat: 'yyyy-mm-dd hh:mm',
displayformats: {
millisecond: 'hh:mm:ss.sss',
second: 'hh:mm:ss',
minute: 'hh:mm',
hour: 'hh'
}
},
display: true,
scalelabel: {
display: true,
labelstring: 'time'
}
}],
Source: stackoverflow.com
Related Query
- Chart.js showing time (HH:MM:SS - 24 hour clock) on xAxis
- Stacked line chart not displaying correctly when Xaxis is time
- ChartJS not showing data for time series bar chart
- Showing a duration of time within a Chart.js chart
- How to start the chart from specific time and offest hour and then show the data on chart from target datetime in chartjs
- ChartJS with React: Only one value showing on time chart
- Chart.js; Chart is not showing time and imported data.
- Chartjs Bar Chart showing old data when hovering
- How to prevent first/last bars from being cut off in a chart with time scale
- Chart JS - Use time for xAxes
- Chart JS - set start of week for x axis time series
- time series stream, removing am/pm on x axis and 24 hour format
- Chart.js ng2-charts colors in pie chart not showing
- Chart.JS Mixed Chart - Bars Not Showing
- Chart.js Dynamically Updating Chart with X Axis Time
- Chartjs time plot xAxis shows year 1970
- Category scale on Y-axis and time on x-axis in bubble chart in Chartjs
- Line chart is showing under bar in combochart in chartjs
- Showing Percentage and Total In stacked Bar Chart of chart.js
- Series Details Not Showing in Angular Chart with Charts.js
- Chart.js pie chart not showing in Google Chrome canvas
- Time series line chart is not displayed
- Chart JS custom tooltip not showing
- Time Series Line chart js in react not working
- Dynamically created Chart.js chart overpopulating time based x-axis?
- Chart JS not showing On hover with small data
- Chart.js time scale not showing data
- showing tooltips all the time in chartjs 2.4 not working
- Chart.js xaxis formatter changes the value shown in the chart
- Chart js logarithmic line chart showing NaN values instead of null
More Query from same tag
- Chart.js How to align x-ticks?
- Doughnut Chart not displaying data with Chart Js and Backbone js
- Django + Chart.js Am I Doing This Right? Nothing is being rendered
- Chart.js Chart Formatting - Legend & Y Axis & Title
- How to set custom Y Axis Values (Chart.js v2.8.0) in Chart Bar JS
- Take image of a chart.js from canvas and display it as an image
- ChartJS change monthly labels as time/date
- Remove y and x axis lines and change axis font style in Chartjs
- How to get rid of large left and right margins in chart.js donut chart?
- How I connect chart.js to database in ASP.NET web form?
- ChartJS Email HTTP Request API
- ChartJS: Limit Y Axis to cut outlimit values
- Chart js show levels on top. (Bar chart with Stacked group)
- Initialize a Chart.js chart with data from an api
- set scroll on bar chart in chartjs
- remove undefined label in the upper part of a chart
- Chart.js xAxes Date Labels are altered based on screen width
- Chart.JS multiple plugins do not operate
- Echars can not render a smooth line when it process alot of data
- Chartjs is not rendering
- JSX element type 'Line' is not a constructor function for JSX elements
- generate color from number
- Show chart.js animation only when user scroll on the specific DIV
- ChartJS creating var takes each character and outputs undefined
- Tooltip flickering when hovered on chart
- chart.js and asynchronous loading
- ChartJS only show me data when I zoom-in or zoom-out
- ChartJS set styling on the last point only
- Chartisan/Laravel - > "Call to undefined method" error
- Add padding between two y-axis scales using chart.js