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'
}
}
Related
I created a realtime chart that updates about every 10 seconds by adding a new value and removing an old one.
I'm a bit unhappy about the chosen ticks of the time axis. Every 10 Minutes is fine, but I'd prefer values like 15:50,16:00,16:10. I looked around the documentation time axis but did not find anything promising.
My definition of my xAxes looks like:
xAxes: [
{
gridLines: {
display: true
},
type: "time",
time: {
unit: "minute",
unitStepSize: 10,
displayFormats: {
minute: "HH:mm"
}
},
ticks: {
min: 0,
max: this.datapoints.length,
autoSkip: true,
maxTicksLimit: 10
}
}
]
I tried to loop over the dataset and find the 'first pretty time' object and set this object as my ticks.min object. But this did not work.
OK I found it. The property is in the time attribute:
time: {
unit: "minute",
unitStepSize: 10,
displayFormats: {
minute: "HH:mm"
},
min: firstprettyTime, // <- moment js object
},
All praise to this guy's answer.
How can I set a min and max on the xAxes? It works fine on the yAxes but on the xAxes it shows no behavior.
My xAxes is using the type: 'time'. My labels for the xAxis are using the moment object aswell. But it also does not work when I remove the type time and use normal digits. I am using the Chart.js version 2.2.2.
scales: {
yAxes: [{
ticks: {
beginAtZero:false,
}
}],
xAxes: [{
type: 'time',
ticks: {
min: moment(1471174953000),
max: moment(1473853353000)
}
}]
}
Here is the chart.js Time Scale documentation.
The properties you are looking for actually are in the time attribute :
options: {
scales: {
xAxes: [{
type: "time",
time: {
min: 1471174953000,
max: 1473853353000
}
}]
}
}
This was changed in 3.0
https://www.chartjs.org/docs/latest/getting-started/v3-migration.html#options
scales.[x/y]Axes.time.max was renamed to scales[id].max
scales.[x/y]Axes.time.min was renamed to scales[id].min
I have some trouble with HighCharts, i can't figure out how to use hours. For now i manage to use day hours (00 to 24) but it stop at 24 and restart at 0 because HighCharts consider that a day is pass. I just want to have an hour value like 1h30 or 55h10 for example.
Here is my chart :
$('#chart2').highcharts({
chart: {
type: 'column',
plotBackgroundColor: null,
plotBorderWidth: 0,
borderWidth: 2,
borderRadius: 7,
borderColor: '#D8D8D8',
width:dialogWidth/2,
height:dialogWidth/2+50
},
title: {
text: 'Time Worked per Day'
},
xAxis: {
type: 'category'
},
yAxis: {
type: 'datetime', //y-axis will be in milliseconds
dateTimeLabelFormats: { //force all formats to be hour:minute:second
second: '%H:%M',
minute: '%H:%M',
hour: '%H:%M',
day: '%d %H:%M',
week: '%H:%M',
month: '%H:%M',
year: '%H:%M'
},
title: {
text: 'Hours'
}
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
formatter: function() {
return Highcharts.dateFormat('%Hh%M',new Date(this.y));
}
}
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name +' : </b>' +
Highcharts.dateFormat('%Hh%M',new Date(this.y));
}
},
series: [{
name: 'Hours',
colorByPoint: true,
data: datas
}]
});
Hope you can help.
You don't need to use datetime for figuring this out. Since what you want to know is the number of hours per day, based on a value in milliseconds from your JSON data, you need to treat that value as a number, not a date.
Here's how I solved this problem:
First, I changed how you described the labels in your y-axis. I dropped the datetime type and used the formatter function to show the labels as whole hours. I also defined a tickInterval to show the labels one hour apart from one another.
yAxis: {
labels: {
formatter: function() {
// show the labels as whole hours (3600000 milliseconds = 1 hour)
return Highcharts.numberFormat(this.value/3600000,0);
}
},
title: {
text: 'Hours'
},
tickInterval: 3600000 // number of milliseconds in one hour
},
Next, I updated the code in your tooltip. We're taking your y values and making them whole hours. I set the second parameter in Highcharts.numberFormat to "2" so your toolip values show up with two decimal places (such as "2.50" for two-and-one-half hours).
tooltip: {
formatter: function() {
return '<b>' + this.series.name +' : </b>' +
Highcharts.numberFormat(this.y/3600000,2);
}
},
You can see a working fiddle, based off the sample data you provided, here: http://jsfiddle.net/brightmatrix/kk7odqez/
Here's a screenshot I took of the chart in this fiddle, showing how both the labels and tooltip now appear:
Thank you for the additional information you provided in your comments. That really helped me puzzle this out and get you what I hope is a useful solution.
I have large collection of data in the format [1421065200000, 1.72], where the first parameter is time in milliseconds and the second parameter is the value at that specific time. I have data array consisting of such data in large size. Now I want scrollable graph containing plot of such time and value data. Here is my javascript implementation to do so,
var dataArray; //This contains my data array i.e. ([[t1, v1],[t2, v2],...])
var minDate = dataArray[0][0];
var maxDate = dataArray[dataArray.length - 1][0];
var chartOption = {
chart: {
type: graphType,
renderTo: 'graph-container',
zoomType: 'x',
useUTC: false
},
title: {
text: 'Data from last 24 hours'
},
credits : {
enabled: false
},
xAxis: {
title: {
text: null
},
type: 'datetime',
dateTimeLabelFormats: {
second: '%Y-%m-%d<br/>%H:%M:%S',
minute: '%Y-%m-%d<br/>%H:%M',
hour: '%Y-%m-%d<br/>%H:%M',
day: '%Y<br/>%m-%d',
week: '%Y<br/>%m-%d',
month: '%Y-%m',
year: '%Y'
},
allowDecimals: false,
ordinal: false,
min: minDate,
max: maxDate
},
yAxis: {
title: {
text: null
}
},
plotOptions: {
series: {
pointStart: minDate,
pointInterval: 5 * 60 *1000
}
},
series: [{
name: parameterName,
data: dataArray
}],
exporting: {
enabled: false
}
};
parameterChart = new Highcharts.Chart(chartOption);
}
The chart shows incorrect data, the time value on x-axis doesn't match the value at y-axis. What is the most correct and efficient to show such time series. Should I use Highcharts or Highstock. Please guide me through this, with suggestion or maybe with solution.
What I did was, I used HighStock instead of HighCharts (since I needed scrollbar along x-axis for large collection of data). I was passing the date in my local time zone format, whereas the chart was using UTC. So, I disabled the use of UTC (alternative: I could have provided data in UTC and drawn the graph using the same, In my case I needed my local labels). I gave the minimum and maximum range to the x-axis through x-axis min and max configuration. Here is the sample of my code,
//dataArray contains the array of data [[x1, y1], [x2, y2], ...]
//x is Date, y is temperature value (say)
var minDate = dataArray[0][0];
var maxDate = dataArray[dataArray.length - 1][0];
//Disable use of UTC
Highcharts.setOptions({
global: {
useUTC: false
}
});
//Create graph options
var chartOption = {
chart: {
type: graphType, //line, bar, column, etc
renderTo: 'graph-container', //div where my graph will be drawn
zoomType: 'x' //Making x-axis zoomable/scrollable
},
title: {
text: 'Data from last 6 hours'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' :
'Pinch the chart to zoom in'
},
xAxis: {
title: {
text: null
},
type: 'datetime', //For time series, x-axis labels will be time
labels: {
//You can format the label according to your need
format: '{value:%H:%m}'
},
min: minDate,
max: maxDate,
minPadding: 0.05,
maxPadding: 0.05
},
yAxis: {
title: {
text: null
}
},
scrollbar: {
enabled: true
},
series: [{
name: "Temperature", //Name of the series
data: dataArray
}],
exporting: {
enabled: false
},
credits : {
enabled: false
}
};
//Finally create the graph
var myChart = new Highcharts.Chart(chartOption);
i'm trying to display a date field in flot:
Data:
var data = [
[parseInt(1309150800.0)*1000, 220],
[parseInt(1309064400.0)*1000, 230],
];
Flot creation:
$.plot($("#graph"), [ data ], {
grid: {
hoverable: true
},
xaxis: {
mode: "time",
timeformat: "%d.%m.%y"
},
yaxis: {
mode: "number",
tickSize: 2
},
series: {
lines: { show: true },
points: { show: true }
}
});
According to this site http://tools.semsym.com/index.php?tool=timestamp×tamp=1309150800 the timestamp is Jun 26, 2011 10:00:00 PM.
But the graph looks like: http://i.stack.imgur.com/NUayx.png
The dots are a bit off. The first one should be at 26, but is at 25,5. I played a bit with timestamp formatting but wasn't able to get it to the specific point.
What am i missing?
Also it shows "26.06.2011" about 6 times. What config is needed to keep it at 1?
Make sure you set a minTickSize. Here is an example at http://jsfiddle.net/hAXHq/ where I have set minTickSize to 1 day and set the min/max values explicitly. You should be able to set your own min/max programmatically depending on your data.
Here is the code:
var data = [
[parseInt(1309150800.0)*1000, 220],
[parseInt(1309064400.0)*1000, 230]
];
$.plot($("#placeholder"), [ data ], {
grid: {
hoverable: true
},
xaxis: {
mode: "time",
timeformat: "%d.%m.%y",
minTickSize: [1,"day"],
min: (new Date(2011,5,25)).getTime(),
max: (new Date(2011, 5, 28)).getTime()
},
yaxis: {
mode: "number",
tickSize: 2
},
series: {
lines: { show: true },
points: { show: true }
}
});