Currently, my graph looks as below.
I am trying to change it to Sep 7, if the hour is 24 hours or 00:00.
I tried different formats like
format:'{value:%H:%M}',
or
format:'{value:%H:%M %e %b}',
But not getting the desired result. Could you suggest me what format I should use to make it work?
I was able to resolve this by using the following format.
xAxis: {
type: 'datetime',
opposite: true,
tickPosition: 'inside',
crosshair,
labels: {
y: -8,
},
dateTimeLabelFormats : {
day: '%b. %e',
hour: '%H:%M',
}
},
Now new graph looks like as below.
Related
I've data and chart options coming from Backend. I'm trying to set up charts based on the min/max values provided. Now these min/max values, at times, should match the same as that of the values for chart e.g.,
data : [{x: "Feb '21", y: 302}, {x: "Mar '21", y 123}]
and the options hold :
options: {
scales: {
x:{
max:"Jul '21",
min:"Feb '21",
time: {
unit: 'month',
displayFormats: {
month: MMM 'YY
}
}
}
}
So when it renders the chart, it generates the ticks on x-axis as Feb '01, Mar '01,...,'Jul '01
Can someone please help me understand, why does the default year falls back to 2001?
How can I modify that to accept 2021 by deafult?
This happens only in when the labelFormat is MMM 'YY. The other kind of formats understands that it is 2021.
I'm having trouble parsing Date Times from django in a way that would make chart.js display the data points (as bars) in uneven time intervals that match their distance from one another. Right now the bars are always equidistant from one another. Also I would like to display the time stamps in the format HH:mm.
I've tried 1)
new Date("{{ d.isoformat }}")
which outputs:
Thu May 20 2021 04:28:31 GMT+0300 (Eastern European Summer Time)
and 2)
new Date("{{ d.isoformat }}").toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit'})
which outputs
04:28 AM
So I'm probably parsing them incorrectly in charts.js with parser: 'HH:mm', and I don't know how to do it correctly in either case. Both options result in equidistant bars.
HTML/javascript:
var db_labels = [];
{% for d in x_val %}
db_labels.push(new Date("{{ d.isoformat }}").toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit'}));
{% endfor %}
var graphData = {
type: 'bar',
data: {
labels: db_labels,
datasets: [{
label: 'PM2.5',
data: db_y,
backgroundColor: [
'rgba(73, 198, 230, 0.5)',
],
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
parser: 'HH:mm',
format: 'HH:mm',
tooltipFormat: 'HH:mm',
unit: 'minute',
unitStepSize: 15,
displayFormats: {
'minute': 'HH:mm',
'hour': 'HH:mm'
},
}
}]
},
}
}
I get this kind of a graph currently with the above code:
equidistant bar graph
I have been trying to replicate an ADCP Graph using the Heatmap chart by Highcharts but I am finding difficulties in changing the x-axis format.
Example of an ADCP Graph
How do i replicate the x-axis as shown in the example above?
I am also hoping for the format to be date(dd/mm/yyyy), time(00:00), depth(m), velocity(m/s) in the small popup that appears as you hover around the graph.
Here's a link to my code:
https://jsfiddle.net/6hzq3o12/6/
xAxis: {
type: 'datetime',
min: Date.UTC(2017, 0, 1),
max: Date.UTC(2017, 11, 31, 23, 59, 59),
labels: {
align: 'left',
x: 5,
y: 14,
format: '{value:%B}' // long month
},
showLastLabel: false,
tickLength: 16
}
To achieve expected effect you need to define your own xAxis.labels.formatter function, which recognizes labels on first, middle and last position, and then set its value format to DD/MM/YY. Otherwise (for all other labels) return the HH:MM value:
xAxis: {
type: 'datetime',
min: Date.UTC(2017, 0, 1),
max: Date.UTC(2017, 11, 31, 23, 59, 59),
labels: {
formatter: function() {
var timestamp = this.value
var ticks = this.axis.tickPositions
var isMiddle = ticks.length % 2 && ticks.indexOf(this.value) === Math.floor(ticks.length / 2)
var labelFormat
labelFormat = this.isFirst || this.isLast || isMiddle ? '%d/%m/%y' : '%H:%M'
return Highcharts.dateFormat(labelFormat, timestamp)
}
},
tickLength: 16
}
However, in order to make it work correctly, you need to provide the chart with appropriate data (with hours), as #ewolden says in his comment below your main post.
Live example: https://jsfiddle.net/25cwrqen/
I am attempting to create a line chart whose x axis represents time. I am overriding ChartJS' displayFormats to ensure that the full timestamp is shown at each label, but also so that it is of the format I expect.
Here's my code:
var chart = new Chart($('#myChart'), {
type: 'line',
data: {
labels: ['2016-09-05T09:29:06', '2016-10-04T09:29:06'],
datasets: [{
label: 'foo',
data: [1, 4]
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
displayFormats: {
millisecond: 'DD/MM/YYYY HH:mm:ss',
second: 'DD/MM/YYYY HH:mm:ss',
minute: 'DD/MM/YYYY HH:mm:ss',
hour: 'DD/MM/YYYY HH:mm:ss',
day: 'DD/MM/YYYY HH:mm:ss',
week: 'DD/MM/YYYY HH:mm:ss',
month: 'DD/MM/YYYY HH:mm:ss',
quarter: 'DD/MM/YYYY HH:mm:ss',
year: 'DD/MM/YYYY HH:mm:ss'
},
tooltipFormat: 'DD/MM/YYYY HH:mm:ss'
}
}]
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js"></script>
<canvas id="myChart" width="400" height="400"</canvas>
Note that the error in the snippet appears to be introduced by SO and is unrelated to the issue at hand.
When interacting with the chart above, you'll note that the tooltip displays the properly formatted timestamp. So, I believe my suggested formatter is correct and the information is available within ChartJS.
Question:
The x-axis only displays the date of the label. The time portion of the label is dropped and is represented as zeros. Why? How can I show the full time?
I am an idiot.
When representing the x-axis as a time scale the labels go from attempting to 1:1 correspond with a datapoint to broad generalizations of what date/time it is. ChartJS has rounded to the nearest day and thus is at 00:00:00 for time.
We are trying to emulate a stepped area chart with Kendo UI to denote the direction/position in which an actuator travels over a period of time (+1 denoting clockwise, -1 denoting a counter-clockwise direction) during the course of a day. The period of time over which the actuator completes its transition is not constant.
The code is included below (alternatively please feel free to use the following jsfiddle at http://jsfiddle.net/pirahawk/XT6CZ/15/ to avoid any setup). We have used the Kendo Stockchart because it provides a complementary navigator component which allows the user to restrict the graph to a desired time period. However we are finding oddities in the chart api especially when the data set has large time lapses. As shown in the example below, we started off with receiving inputs that have 1 second intervals between them. Plotting these on the chart achieves the shape that we expect to see. However adding additional datapoints that are now apart by a few hours (please uncomment the data points shown), we are finding that the chart api seems to somehow incorrectly extrapolate the earlier data points.
When using the navigator to restrict the chart to the earlier period (between 2am - 2:30am), we do once again achieve the original shape. However we would like to have the same shape shown without having to do this (i.e. stop the api from extrapolating data points with large intervals between data points). Any help, advise on this issue would be greatly appreciated
var dataForSource = [{
date: new Date("December 16, 2013 02:06:00 AM"),
Count: 0
}, {
date: new Date("December 16, 2013 02:07:00 AM"),
Count: 1
},
{
date: new Date("December 16, 2013 02:09:00 AM"),
Count: 0
}, {
date: new Date("December 16, 2013 02:09:15 AM"),
Count: -1
},
{
date: new Date("December 16, 2013 02:09:45 AM"),
Count: 0
},
{
date: new Date("December 16, 2013 02:10:00 AM"),
Count: -1
}, {
date: new Date("December 16, 2013 02:15:00 AM"),
Count: 0
}
//Uncomment these out to see issue
/*
, {
date: new Date("December 16, 2013 04:10:01 PM"),
Count: -1
}
, {
date: new Date("December 16, 2013 11:55:00 PM"),
Count: 0
} */
];
var staticDataSource = new kendo.data.DataSource({
type: "line",
data: dataForSource
});
function createChart() {
$("#chart").kendoStockChart({
dataSource: staticDataSource,
dateField: "date",
series: [{
type: "line",
style: 'step',
//missingValues: "interpolate",
field: "Count",
categoryField: "date"
}],
xAxis: {
baseUnit: "seconds"
},
navigator: {
series: {
type: "line",
style: 'step',
field: "Count"
},
xAxis: {
baseUnit: "hours"
},
}
});
};
$(document).ready(createChart);
First of all, you're using wrong baseUnit in your example. It's property of categoryAxis not xAxis and seems to does not work in here.
You need to choose what do you wanna show in your chart, when you show long time period, by default data is aggregate to show in group which you define in baseUnit property. To "turn it off" you should set it for smallest available option: minutes. Now you gonna have all data points in your chart, but it's look even worse, just peek in JSFiddle what I prepared for you for see what i mean: http://jsfiddle.net/XT6CZ/18/
Regards