fiddle - http://jsfiddle.net/z8fw7/
When I hover over the column I can see this weird big number, where is it coming from.
If I add one more date entry. e.g
[Date.UTC(2010,2,31), 28.84],
[Date.UTC(2011,2,31), 28.84],
[Date.UTC(2012,2,31), 32.65]
The tooltip then displays the proper year value as expected. It works flawlessly with 3 data values while it does not work with 2 data values. How can I make sure that it works with even 2 data values.
Looks like a bug in Highcharts with 2 data points when using the pointFormat. I suggest using the more customizable formatter function.
So in your option for configuring the tooltip, use this:
tooltip: {
formatter: function() {
var date = new Date(this.x);
var year = date.getFullYear();
return year + '<br/>' + '<span style="color:'+this.series.color+'">'+ this.series.name +'</span>: '+ this.y + '%';
},
}
Works fine with the 2 data points or 3, etc. See: http://jsfiddle.net/UqbKQ/
the value you are seeing is the timestamp of the data point from the x axis.
This formatting (or lack thereof) seems like a bug to me...
I don't see an obvious answer except to use the formatter function to fully customize the tooltip display.
Related
I have a dataset (csv) that renders into a line graph, there is also a tool tip that displays amongst other data, the date from the dataset. In chrome it works ok, but in IE (latest) and firefox 58, it is rendering the date as '01 Jan 1970'. I assume that if the date displays ok in Chrome, other browsers would follow suit.
This is my tooltip line:
<div class="tooltip-date">' + Highcharts.dateFormat('%d %b %Y', this.x) + '</div>
Has anyone any idea as to how to fix this?
The date in the csv is like so: 25-Jan-2016
I have the latest versions of highchart js and highcharts data module.
The value provided to Highcharts.dateFormat must be a timestamp as a number. From what I understand from your explanation the provided value is a 25-Jan-2016. You have to first parse the date either with Highcharts or before to be able to use the dateFormat function.
I'm feeding my Highcharts.js series object with data containing date and a number, for example: ["2017-1-22",262] which shows up correctly when hovering a point, but which is not displayed correctly in the xAxis. Below codes does not do much, probably because the date format is not what Highcharts expects? But what format is expected? Unixtime does not seem to work.
xAxis: {
type: 'datetime'
}
https://jsfiddle.net/80v2k0tv/
Highcharts expects time in the form of milliseconds since 1970.
See for example: https://api.highcharts.com/highcharts/series.line.data.x
The x value of the point. For datetime axes, the X value is the timestamp in milliseconds since 1970.
Unixtime is in seconds, so using unixtime * 1000 will give the correct highcharts time.
I am rendering a category chart with time on the y-axis. This chart will show the completed time for each ticket.
`` http://jsfiddle.net/6oz3075d/14/
However, I am unable to show the date and time in DD:MM:YY format. Also the interval is in years. I tried using dateTimeFormat,tickInterval etc. Nothing seems to help.
You can use formatter and Highcharts.dateFormat
labels:{
formatter:function(){
return Highcharts.dateFormat('%d:%m:%Y', this.value);
}
},
http://jsfiddle.net/6oz3075d/15/
I have this fiddle which enables you to get the selected period of time using the afterSetExtremes() event.
My problem is figuring out how to get a sum of the y-axis data for selected period.
I see that in the event object via target > series > data you can get the currently selected points and then loop through them getting a sum of the total, however it seems a bit of an unwieldy method and I was wondering if there was a quick simple API function which would give you this data a little more cleanly?
Edit - found an example of how to do this by the original author so presume there is no other way.
Thanks,
http://jsfiddle.net/L3rych99/1/
xAxis:{
events: {
afterSetExtremes:function(event){
var start_date = new Date(event.min);
var end_date = new Date(event.max);
//console.log(event)
//console.log(start_date + ' ' + end_date);
//how to get sum of y-axis data between start and end data?
},
},
},
Im trying to mark certain Day Times on my Chart - iE: 15:00 - 21:00
The Date information comes in form of a timestamp - "1365362890000" for example.
Is there any convenient way to say start from time X and go until time Y?
Else I would probs need to loop through all the times to find start/end points.
The timeframe can be anything from a day to a month.
(The plotBands themselves are working for me - just looking if there might be a better way then looping through all the data)
Edit: I meant something like you see in my picture here - its working like this and all is fine. Im just wondering if there was a simple way to say - "mark time x to time y with color z" instead of doing "by hand".
Yes, plotBands have a #from and #to property. Just use the #from and #to of the converted datetime (i.e. the unix time * 1000)
$('#container').highcharts('StockChart', {
xAxis: {
plotBands: [
{
from: 1374658200000,
to: 1374681600000,
color: "rgba(68, 170, 213, .2)"
}
]
}
});
In the xAxis you can set min value and tickInterval.
http://api.highcharts.com/highcharts#xAxis.tickInterval
http://api.highcharts.com/highcharts#xAxis.min (should be timestamp too)
Also you can define pointStart for serie: http://api.highcharts.com/highcharts#plotOptions.series.pointStart and pointInterval http://api.highcharts.com/highcharts#plotOptions.series.pointInterval