I have a chart with two yAxis. And I want both to be grouped by date. But in my chart the last value of both series are ending up in differnt xAxis line. I assume this is because of the time differences. I need to group these points based on the date so that the last points of both series will align in the same line of xAxis. This is my javascript code.
Highcharts.stockChart('container', {
yAxis: [{
title: {
text: 'y axis 1',
},
opposite: false,
showEmpty: false,
},
{
title: {
text: 'y axis 2',
},
opposite: true,
showEmpty: false,
},
],
series: [{
yAxis: 0,
data: series1,
},
{
yAxis: 1,
data: series2,
},
],
});
And this is my jsfiddle. Can anyone please help me?
You can loop through your data and round timestamps to the nearest date:
function roundDate(timeStamp) {
timeStamp -= timeStamp % (24 * 60 * 60 * 1000); //subtract amount of time since midnight
return new Date(timeStamp).getTime();
}
function loopThroughData(data) {
data.forEach(function(el) {
el[0] = roundDate(el[0])
});
}
loopThroughData(series1);
loopThroughData(series2);
Live demo: https://jsfiddle.net/BlackLabel/zhbt4gmw/
Useful thread: Round a timestamp to the nearest date
Related
I am using highcharts/highstock and I send some data to the client.
I tried various sets of settings, but I cannot force x axis to stop on a certain date.
For example, I create a chart that has data from 20/3/2019 to 25/3/2019. The interval must always be 5 minutes.
The starting point is correct, it starts in 20/3/2019.
But the last point is always a day more. Its about 35 more points of 26/3/2019, instead of stopping at 25/3/2019.
*if this changes anything, the starting point should be 20/3/2019 00:00 , but it actually starts at 20/3/2019 03:00 in highcharts.
My data are
{
time:{
useUTC:false
},
boost: {
enabled: true,
allowForce:true,
usePreallocated:true,
useGPUTranslations: true
},
chart: {
type: "line",
zoomType: 'x'
},
title: {
text: item.title
},
xAxis: {
type: 'datetime',
tickInterval: 5 * 60 * 1000 , /*5 min */
max: pointStop,
labels: {
format:'{value:%H:%M:%S}'
},
dateTimeLabelFormats: {
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%b. %e',
week: '%b. %e',
month: '%b. %y',
year: '%Y'
}
},
yAxis: {
title: {
text: item.title
},
alignTicks:'left',
textAlign:'left',
align:'middle',
opposite:false
},
series: [
{
boostThreshold: 150,
name: item.title,
pointStart: pointStart,
pointInterval: 5 * 60 * 1000,
data: item.array,
dataGrouping:{
approximation: 'average',
enabled:true,
forced:true,
groupAll:true,
groupPixelWidth:20
}
}
]
}
What am I doing wrong?
Thanks
It sounds like an issue setting the tick count. The documentation states
If a tickAmount is set, the axis may be extended beyond the set max in order to reach the given number of ticks. The same may happen in a chart with multiple axes, determined by chart. alignTicks, where a tickAmount is applied internally.
You need to disable oridinal option, which is enabled by default in Highstock:
xAxis: {
ordinal: false,
...
}
Live demo: http://jsfiddle.net/BlackLabel/6rqcLhp0/
API Reference: https://api.highcharts.com/highstock/xAxis.ordinal
I want to show multiple lines on a chart plotting numbers and dates. I want to X Axis to always show all the months, starting at January through to December, even if there is only data for, say, february and march. I have created a fiddle here. How can I do this? You can see in the fiddle that only the months I have data for show.
I would also like the X axis to show 'Jan', 'Feb' etc, and no numbers. Is this possible?
My code so far is:
$('#container').highcharts({
title: {
text: 'Chart reflow is set to true'
},
subtitle: {
text: 'When resizing the window or the frame, the chart should resize'
},
xAxis: {
type: "datetime"
},
series: [{
data:[[1456444800000,173682],[1456531200000,21136],[1457049600000,21136],[1457395200000,199158],[1457913600000,413265],[1458777600000,21136],[1459209600000,199158],[1459987200000,413265],[1460505600000,21136],[1461024000000,199158],[1461715200000,413265],[1462406400000,199158]]
}]
});
Set a min and max value for your x axis:
xAxis: {
type: "datetime",
tickInterval:86400000 * 30,
min: Date.UTC(2016,0,1),
max: Date.UTC(2016,11,31)
}
Example:
http://jsfiddle.net/jlbriggs/ejjtc73h/2/
I have a Highchart bar graph (column type) which will show the data for each of the dates. Now it is getting the values through AJAX and date range
can be selected. Because of size limitations, I need to display the date labels in 5 day interval if the date range selected is more than 10 days.
That is all bars needs to be shown, but the interval for labels should be in 5 days interval if the date range is more than 10 days. If it is 10 days or lower, it should show all the dates.
My graph config is like the following :
var chart = new Highcharts.Chart({
credits: {
enabled: false
},
legend: {
align: 'right',
verticalAlign: 'top',
layout: 'vertical',
x: 20,
y: 10
},
chart: {
renderTo: 'id_name',
type: 'column'
},
xAxis: {
categories: dates,
crosshairs: true
},
yAxis: {
title: {
text: 'Y Axis Title'
}
},
colors: ['#1A7BB9', '#18A689', '#21B9BB', '#F7A54A', '#EC4758'],
title: {
text: 'My title goes here'
},
subtitle: {
text: 'my subtitle goes here'
},
series: PHP formatted data goes here
});
I'm not sure about the interval (every fifth label should be displayed? Or you want to compare time-range to determine that?), but in general you have two solutions:
easier one: disable dataLabels by default (series.dataLabels.enabled = false) but enable that for a specific points, for example:
series: [{
data: [{
x: timestamp_1,
y: timestamp_1,
dataLabels: {
enabled: true
}
}, [timestamp_2, value_2], [timestamp_3, value_3], ... , {
x: timestamp_N,
y: timestamp_N,
dataLabels: {
enabled: true
}
}]
}]
harder one: wrap drawDataLabels method, and remove unnecessary labels:
(function (H) {
H.wrap(H.seriesTypes.column.prototype, 'drawDataLabels', function (p) {
var step = H.pick(this.options.dataLabels.step, 0),
iterator = 0;
p.call(this);
if(step) {
H.each(this.points, function (point) {
if (point.dataLabel) {
if (iterator % step !== 0) {
point.dataLabel = point.dataLabel.destroy();
}
iterator ++;
}
});
}
});
})(Highcharts)
jsFiddle for the second solution: http://jsfiddle.net/gL2kw73b/2/
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 using Highcharts/Highstock to plot a fairly large amount of data (~10,000 points). The data consists of Date objects on the X axis and floats on the Y, formatted as such: [[(date), 1.728], [(date), 0.346], ...]. The dates are always 1 hour apart and there are no gaps in the data.
When the chart's range is >= 21 days (such that at least 21 days of data is graphed), the chart appears correctly. Whenever the range is less than that, though, the chart becomes blank and the tooltip displays each point as having a Y-value of 0.0. The Y values for those points do exist in the array (I can see them in Firebug), but they aren't displayed on the chart. Here's how I'm initializing it:
mainChart = new Highcharts.StockChart({
chart: {
renderTo: 'linegraph'
},
rangeSelector: {
buttons: [{
type: 'day',
count: 1,
text: '1 d'
}, {
type: 'week',
count: 1,
text: '1 wk'
}, {
type: 'month',
count: 1,
text: '1 mo'
}, {
type: 'year',
count: 1,
text: '1 yr'
}, {
type: 'all',
text: 'All'
}],
selected: 2
},
series: [{
name: 'Electricity usage (kWh)',
data: graphData,
tooltip: {
valueDecimals: 2,
valueSuffix: "kWh"
}
}],
});
I had the same issue, but it was everything normal with timestamps on X axis.
Resolved it by sorting data by ascending (provided firstly in reversed order).
It turns out that you can't use Date in the X axis of your data. Instead, use the Unix timestamp of the date: Date.getTime(). Major props to FloppyDisk for pointing me in the right direction.