I am using a bubble chart in Highcharts and I am trying to change the hover tooltip to show more meaningful output - at the moment I can get it to show the axis values but I cannot get it to show the labels.
I am using this in my plotoptions:
plotOptions: {
bubble: {
minSize: 1,
maxSize: 40,
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x}:00 UTC on {point.y} => total of {point.z} tickets'
}
}
}
and in my y axis I have:
yAxis:{
categories: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday","Sunday"]
}
which displays as:
11:00 on 0 => total of 32 tickets
but I would like it to show the actual day in the label:
11:00 on Monday => total of 32 tickets
I have looked at formatter but then I cannot seem to access the z axis as it gives an undefined.
How can I use the y axis name in the tooltip?
http://jsfiddle.net/qvw5gurc/1/
As #Ondkloss said in their comment, use tooltip.formatter instead:
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br>' + this.point.x + ':00 UTC on ' + this.series.yAxis.categories[this.point.y] + '=> total on ' + this.point.z + 'tickets';
}
},
Updated fiddle.
Related
I am using highcharts (StockChart) to draw a timeline of events (X axis therefore represents a datetime) and my JS knowledge is extremely basic. Each event (represented as a bar/column) has some data attached which I show in a tooltip. My timeline has multiple types of event (= series) and it can happen that there is 2 or more events of different types that happen at the exact same time. So in other words, 2 points in the plot series share the same X axis value.
My issue is that in these cases I end up with a timeline that has 2 columns but only 1 tooltip containing a merge of the 2 piece of data.
Here is how it looks like right now:
hover any column
1.7xxxx represents the first column value
3.xxx represents the second column value
To be noted as well: the "snap" point is roughly in the middle of the 2 columns (the slim white vertical bar) instead of on the column itself, which is a bit weird on a UX standpoint.
What I want is to have them split so that each column has its own tooltip floating over the column like a regular scenario.
What I want it to look like (rough sketch):
hover left column
hover right column
Here is how I handle the chart:
return function (yaxisTitle, targetId, dataHighStock) {
// Line timeline chart
// create the chart
var config = {
chart: {
renderTo: targetId,
height: 269,
type: 'column'
},
plotOptions: {
column: {
cursor: 'pointer',
pointRange: 1,
pointPlacement: "on",
pointWidth: 10
}
},
xAxis: {
type: 'datetime',
ordinal: false,
dateTimeLabelFormats: {
millisecond: '%Y-%m-%d',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%e. %b',
week: '%e. %b',
month: '%b \'%y',
year: '%Y'
},
minPadding: 0.05,
maxPadding: 0.05
},
yAxis: {
offset: 30,
min: 0,
title: {
text: yaxisTitle
},
labels: {
enabled: true
}
},
rangeSelector: {
inputDateFormat: '%Y-%m-%d',
inputBoxStyle: {
left: '270px',
width: '250px'
},
selected: 5
},
tooltip: {
formatter: function () {
var s = '';
var examDate = new Date(this.x);
var month = examDate.getMonth() + 1;
var day = examDate.getDate();
s = examDate.getFullYear() + "-" + (month < 10 ? '0' + month : month) + "-" + (day < 10 ? '0' + day : day) + "<br />";
$.each(this.points, function (i, point) {
s += point.y+"<br>";
});
return s;
},
snap: 1
},
legend: {
y: 20,
x: 80,
enabled: true,
align: 'left',
layout: 'horizontal',
verticalAlign: 'top',
shadow: true
},
series: dataHighStock
};
//add series to navigator
new Highcharts.StockChart(config, function (loadedChart) {
for (var i = 0; i < dataHighStock.length; i++) {
loadedChart.addSeries($.extend({}, dataHighStock[i],
{
enableMouseTracking: false,
type: "spline",
xAxis: loadedChart.xAxis.length - 1,
yAxis: loadedChart.yAxis.length - 1,
color: loadedChart.options.colors[i],
showInLegend: false
}));
}
});
};
"dataHighStock" is just a regular json I pass, which looks something like this:
[ { type: "column", name: "Event Type 1", color: "#08A5E1", data: [ { x: 1431430804000, y: 1.7153846153846155, name: '1' }] }, { type: "column", name: "Event Type 2", color: "#772971", data: [ { x: 1431430804000, y: 3.63636, name: '14915'}] }, ]
I could make the tooltip "kinda" work (= 1 tooltip per column) when I changed the Highcharts creation to be done through Highcharts.chart(...) instead of Highcharts.StockChart(...) and removing the for loop in the navigator + removing the specific data displayed in the tooltip formatter ($.each(this.points, ......){...}). The downside to that is that I lose all the features of a StockChart (time range, navigator, etc.), obviously, but also the tooltip content.
Here is a jfiddle link that reproduces all this: https://jsfiddle.net/eq3mz7y1/20/
Changing the tooltip.split into false is a solution for your issue. Notice that this solution requires some changes in your formatter callback output because the this.points array doesn't exist anymore.
Demo: https://jsfiddle.net/BlackLabel/01sqhdyv/
API: https://api.highcharts.com/highcharts/tooltip.split
I coverted all the x value with Date.parse() function
How could I get my expectation
- change x label and x value as "%Y%m%d" in tooltip
- remove the strange 12:00 empties on x-axis
Thanks
Covert function
$.each($scope.flights, function() {
var current_flight_no = this
$.each(current_flight_no.data, function(){
this.x = Date.parse(this.x);
})
});
Chart option
options: {
chart: {
type: 'scatter'
},
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%b %e (%a)',
},
tooltip: {
formatter: function () {
return 'Extra data: <b>' + this.point.price + '</b>';
}
},
To fix the tooltip issue, use the formatter option:
formatter: function() {
return this.y + '<br />' +Highcharts.dateFormat('%Y %M %d', this.x);
},
The x values are in milliseconds, Highcharts.dateFormat(...) is needed to change milliseconds to regular date
To fix the 12:00, just go with minTickInterval
http://api.highcharts.com/highcharts#xAxis.minTickInterval
It will be great if you can share the data to better assist you.
I'm using highcharts to display data for over a period of one month so it it could be displaying anywhere form 1 data point to 31 data points (I'm using the jQuery Datepicker widget to select dates). My problem is with the x-Axis. When viewing between 2 and 7 data points the x-axis is automatically trying to adjust itself which works fine the more data points are being rendered but when there are less as previously mentioned there are problems.
I have captured some screenshots showing my perdicament as well as created a JSFiddle. I do have a specific size that I need to fit the chart in and I have used the same size in the JSfiddle.
What I would like ideally is for the x-axis to start on the first of the month (or at the lest NOT start on the end of the previous month) and avoid overlapping issues. I'm hoping it's a setting that I'm overlooking that controls how highcharts "automatically" calculates what is displayed on the x-axis and it's interval. I know there is a tick-interval setting but I've not had any luck with that in my situation.
Image: http://i.imgur.com/p0bQg6U.png
JSFiddle: http://jsfiddle.net/engemasa/sgKcB/
Here is the highcharts code:
$('.chart').highcharts({
chart: {
type: 'column'
},
xAxis: {
labels: {
enabled: true,
formatter: function() {
return Highcharts.dateFormat("%b %e, '%y", this.value);
}
}
},
title: {
text: null
},
tooltip: {
formatter: function() {
var date = '<b>' + Highcharts.dateFormat('%A, %b %e, %Y', this.x) + '</b><br />';
return date + this.y;
}
},
yAxis: {
labels: {
enabled: true
}
},
credits: {
enabled: false
}
});
Assistance is greatly appreciated!
Solution seems to be datetime xAxis and dateTimeLabelFormats option for Highcharts. For example: http://jsfiddle.net/sgKcB/26
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: "%b %e, '%y",
week: "%b %e, '%y"
}
},
You can use tickPositioner parameter, which allows your own function. You can calculate and return correct order of your ticks.
http://api.highcharts.com/highstock#xAxis.tickPositioner
The issue I am having is that the tooltip on my line graph for the first few points is behind the values on the Y-Axis. I assume this is just a z-index issue between the tooltips and yaxis.
I wasnt sure the correct way to fix this issue, if there was some option I should use or is this something that needs to be addressed CSS.
This issue did not start happening until I changed the yaxis to use HTML. Maybe is it caused by my formatting?
yAxis: {
labels: {
useHTML:true,
formatter: function() {
var amount = this.value;
if(this.value > 0 ){
return '<span class="format_positive">' + amount + '</span>';
} else {
return '<span class="format_negative">' + '(' + amount + ')' + '</span>'
}
}},
alternateGridColor: '#F5F5F5',
minorTickInterval: 'auto',
lineWidth: 1,
tickWidth: 1,
title:{ text: 'Total Amounts'}
}
I have a data set where the series values are angles in degrees (0 to 360). Is it possible to plot a graph like the one illustrated here (ignore the green vertical line) in highcharts? Specifically, if any of the following criteria holds, the chart should avoid linking the two data points directly in the sense of passing through south (180), and should pass through north (0/360) instead:
A point is below 90 and the next one is above 270, or;
A point is above 270 and the next one is below 90.
Any help is appreciated.
What I would do to make this happen is to simply pre-process your data to create two series and then plot both of them onto the same plot. One series is for 0-179 and the other is for 180-359.
You may also want to consider a scatter plot instead of a line plot especially if your data in either of the series is not as smooth as the data in the example. Meaning that one data point is say 10 and the next one is 110 and then the next one after that is 12 or some such.
This code gives you an example, the data is provided by JSON but you should be able to just easily replace it with however your data comes in:
<script type="text/javascript">
$(document).ready(function () {
var chart = new Highcharts.Chart({
title: {
text: 'Wind Direction'
},
chart: {
renderTo: 'dataplot4',
borderWidth: 1,
defaultSeriesType: 'scatter',
zoomType: 'x'
},
legend: {
enabled: false
},
plotOptions: {
series: {
marker: {
radius: 3,
states: {
hover: {
enabled: true
}
}
}
}
},
xAxis: {
type: 'datetime'
},
yAxis: {
tickInterval: 90,
min: 0,
max: 360,
title: {
text: 'Wind Direction (deg)'
}
},
tooltip: {
crosshairs: true,
formatter: function () {
return '<b>' + Highcharts.dateFormat('%e. %b %Y, %H:00', this.x) + ' AKST</b> ' +
this.series.name + ': ' + this.y + ' deg';
}
},
series: [
{
name: 'Wind Direction',
data: JSON.parse("[" + wind_dir + "]"),
pointStart: Number(startDateTime),
pointInterval: 3600000
}
]
});
});
</script>
I'd like to think that I have a jsfiddle for this somewhere, will update the answer when I dig it up.
EDIT: Here's a fiddle that shows the scatter plot in action. http://jsfiddle.net/Reality_Extractor/pNFYL/