I understand we could use tick interval for type:"datetime". It works for type: category also as shown below:
http://jsfiddle.net/n0s72zeh/1/
But tick interval does not work when I use 'categories: dateFromJson'. I get custom date from json file. Is it possible to have set interval on my x-axis (like for every one hour on average ?)
xAxis: {
categories: DateFromJson,
labels: {
rotation: 270,
}
}
For eg: rite now it shows 15:06, 15:56, 15:58, instead can we make it show just 15:00?.. It should show 13:00, 14:00, 15:00 and so on(every one hour). Thank you
I am currently trying to plot some data which I receive via a HTTP request. The issue that I am having is that the x-axis doesn't plot the timestamp correctly because it it's in Unix format. I've read some other similar question on SO such as: Example One
The issue is that I'm not passing an object but directly an Unix time data. When hovering the graph, you can see that the x-axis doesn't display the date and hour correctly.
Here is a fiddle with my current graph: Graph Fiddle
Since you actually have datetime values, showing them using category is sort of a hack, and would also not show gaps between points correctly if they are not evenly spaced.
Instead you could merge your two arrays into pairs and then supply it to the series as proper X-Y values for a datetime axis. You also have to multiply your datetime values by 1000 to get milliseconds, which Highcharts expects.
For example (JSFiddle), merging:
dataArray.push(selectedData);
timeDataArray.push(selectedTime);
var mergedArray = timeDataArray.map(function(e, i) {
return [e*1000, dataArray[i]];
});
And axis and series:
xAxis: {
type: 'datetime'
},
series: [{
name: 'AAPL',
data: mergedArray
}]
I have 2 timeseries that I would like to 'share' tooltip across. However, I have a problem where only the first point of each series is aligned and shares the tooltip. The rest of the points are slightly misaligned and therefore fail to show in the tooltip at the same time.
This fiddle will help demonstrate the problem. Fiddle
If you hover over the very first point, the tooltip appears with an entry for both series. But the very next datapoint only displays a single entry in the tooltip.
May I ask for your advice please? What have I missed for 'aligning' both series in order to share the tooltip? Clearly it's not enough to just add
tooltip: {
shared: true,
}
Thank you.
Assuming that the end goal is to compare two different dates based on the time of day, and assuming that the data points are at regular intervals, or are close enough and can be fudged (ie 1 point per hour, or every 10 minutes, etc), I would approach this differently:
1) use a single date. it can be today's date, or any other date, it doesn't matter, as the time of day is the important segment of the date string.
2) use the pointStart and pointInterval properties to set the proper timing (based on the artificial date, but the correct time interval)
3) Set the actual date of each data series as the series name, which will show in the legend and the shared tooltip to properly display the date of each data set.
4) use the formatting options on the x axis labels to show only the time portion of the label and not the date
In this way you remove the need for a 2nd x axis, remove any complications in tooltip formatting, remove the need to use more complex data structures like in your comment ( "{"y":0.87,"realDateTime":'25/12/2015 03:00'}" ), and only ever have to pass the appropriate date to the name property of each series.
//use the current date as the base - the date doesn't matter, just the time
var d = new Date();
var date = new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0,0,0);
var pointStart = date.getTime();
var pointInterval = 3600 * 1000 // 1 hour
.
series: [{
name : 'Apr 17, 2015',
data : [2,5,8,9,8,7,4,5,6,9,8,7,8,9,8,7,8,5,3,2,1,4,4,5]
},{
name : 'Jun 12, 2015',
data : [3,6,9,5,4,7,8,5,2,1,4,5,9,8,7,5,6,9,8,7,4,5,6,3]
}]
Example:
http://jsfiddle.net/jlbriggs/b3t7ueam/
[[and, of course, you can do this with as many different dates as desired (though this many obviously doesn't make sense):
http://jsfiddle.net/jlbriggs/v76u9w2L/
]]
I know that this is an old question, but an alternative approach which I've found to work is to reformat the data into a CSV format and add an import for the data module.
There's a demo on the Highcharts site which does pretty much what you're asking for (albeit nested inside an ajax request) over here. The two key parts from there are:
<script src="https://code.highcharts.com/modules/data.js"></script>
and
data: {
csv: csvData
}
The example reads in an actual csv file, but it'll accept any string which is formatted similarly. Also, if you set up headers in that csv string, you don't need to declare their names in your series options.
I am trying to use a Highstock chart with the navigator window as a way of filtering some content based on time on a page.
Ideally I would like the user to narrow the navigator to a time of interest and be able to pass the start and end date/time to a button that would filter the page.
Does anyone know how I could extract these dates/times from the chart?
Thanks in advance
Dave
Create a highstock Chart and pass over the options as shown in the code exaple. This creates a handler for the afterSetExtremes event. As you can see in the code this allows you to extract the min and max Date values as unix-like timestamp. Now you can do whatever you want with these values. It is a good idea to set scrollbar.liveRedraw to false, otherwise afterSetExtremes would fire permanently while dragging the navigator.
$('#chart-main').highcharts('StockChart', {
... other options
xAxis:{
events: {
afterSetExtremes:function(event){
console.log('---- Date from Chart Object after setting Extremes');
console.log(new Date(event.min));
console.log(new Date(event.max));
}
},
type: 'datetime'
},
scrollbar:{
liveRedraw: false
},
});
jsfiddle: http://jsfiddle.net/RjPRd/
Times & Labels are displayed incorrectly.
I think the timestamp should be multiplied by 1000 for Javascript Time but what's the best approach? Also I believe the setup is still incorrect because the labels seem opposite to where the cursor is.
You are right, timestamps in Javascript are milliseconds so you should multiply everything by 1000.
For the other problem it comes from the fact that your data is ordered backwards. Apparently HighCharts is messing up when the series are not properly ordered.
Here's the correction for your code: http://jsfiddle.net/cvedovini/RjPRd/2/
An easy way to work with timestamp (milliseconds) in Highcharts is use the formatter. So first receive your time values as unix timestamp and then set one of the features below in the chart:
Using in xAxis labels:
xAxis:[{
labels:{
formatter:function(){
return Highcharts.dateFormat('%Y %M %d',this.value);
}
}
}]
Using in tooltip:
tooltip: {
readerFormat: {
formatter: function(){
return Highcharts.dateFormat('%Y %M %d',this.value);
}
},
pointFormat: '{point.y} ms',
shared: true
},
An exemple of code with tooltip
A reference about formatter