Move flags tooltip to upper side - highcharts

I have Highstock chart with flags. Everything is fine but I wanted to change the position of the tooltip of the flags. (Move tooltip of flags to upper side of the flags). And also i want to give link to flags text "Test test", which will open in new tab. Can any one help me? This my full code http://jsfiddle.net/anant_ghate/8byc9/1/
// Create the chart
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
tooltip: {
positioner: function(boxWidth, boxHeight, point) {
return {
x: point.plotX + 20,
y: point.plotY + -20
};
},
shared:true,
formatter: function(){
var p = '';
if(this.point) {
p += '<span>'+ Highcharts.dateFormat('%A, %b %e, %Y', this.point.x) +'</span><br/>';
p += '<b>'+ this.point.title + '</b>' // This will add the text on the flags
}
else {
p += '<b>'+ Highcharts.dateFormat('%A, %b %e, %Y', this.x) +'</b><br/>';
$.each(this.points, function(i, series){
p += '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>'+ this.y;
});
}
return p;
},
},
rangeSelector: {
selected: 1
},
title: {
text: 'USD to EUR exchange rate'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
series: [{
name: 'USD to EUR',
data: data,
id: 'dataseries',
tooltip: {
yDecimals: 4
}
}, {
type: 'flags',
data: [{
x: Date.UTC(2011, 1, 20),
title: 'Test test'
}, {
x: Date.UTC(2011, 3, 20),
title: 'Test test'
}],
onSeries: 'dataseries',
allowPointSelect : true,
shape: 'squarepin',
y : -40
}]
});

You can tweak the tooltip like in this answer Highcharts tooltip always on right side of cursor
And make the flags clickable with an approach similar to this highcharts clickable labels how to goto anchor

To redirect to a url when clicking a flag you can create a function on the "click-event":
http://jsfiddle.net/8byc9/5/
I don't think it will be easy to create your own positioner only for the flag-tooltip but not for the currencytooltip...

Related

highcharts xaxis label data display

The date displayed on the highcharts xaxis label is showing non-existent dates, not actual data. What should be set on the xaxis label to show the existing date values?
My code is below.
Highcharts.stockChart('dataChart', {
credits: {
enabled: false
},
rangeSelector: {
selected: 5
},
title: {
text: result[0].chartRptCdNm
},
xAxis: {
type: "datetime",
labels: {
formatter: function() {
return Highcharts.dateFormat('%Y-%m-%d', this.value);
}
}
},
yAxis: {
title: {
text: result[0].graphYaxis
},
opposite: false,
lineWidth: 1,
margin: 0,
labels: {
format: '{value}' + result[0].graphYaxisUnit,
align: "right",
y: -5,
x: -5
}
},
tooltip: {
headerFormat: "",
useHTML: true,
valueDecimals: 2,
split: true,
formatter: function () {
var s = "";
$.each(this.points, function() {
s += '<span style="color:' + this.series.color + ';">\u25CF</span><b>' + this.series.name + '</b><br/>';
s += '<span style="font-size: 13px"> 일자 : ' + Highcharts.dateFormat('%Y-%m-%d', new Date(this.x)) + '</span><br/>';
s += '<span style="font-size: 13px"> 금리 : ' + (Math.floor(this.y * 100) / 100) + '</span><br/>';
});
return s;
}
},
series: seriesArr
});
I am making a chart using a single line series.

Fix both y-axis to 0 highcharts

I am trying to make a highchart, with both negative and positive values. Now the thing is, that negative values, are not very big, compared to the positive ones.
Here is a picture of the graph as is:
Now if you look closely on both the y-axis, they do not meet up at 0, there is a tiny gap. Is it possible to make them both start at 0, but allowing them to be negative?
This is my code:
Highcharts.chart('chart', {
chart: {
type: 'column'
},
title: {
text: 'Sales Graph'
},
xAxis: {
categories: xAxisTicks
},
plotOptions: {
column: {
stacking: 'normal'
}
},
tooltip: {
formatter: function() {
debugger;
if (this.series.type == "column") {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + prettyNumber(this.y) + '<br/>' +
'Sales without discount: ' + prettyNumber(this.point.stackTotal);
} else {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + prettyNumber(this.y) + '<br/>';
}
}
},
colors: ['yellow', 'orange', 'red', 'blue', 'green', 'red', 'blue', 'green'],
yAxis: [
{
title: {
text: 'Daily sales'
},
min: minYAxisValue,
startOnTick: false
}, {
title: {
text: 'Accumulated sales'
},
min: minYAxisValue,
startOnTick: false,
opposite: true
}
],
series: data
});
If you want two to align 0 tick together that is not yet possible with highcharts. Follow this discussion https://highcharts.uservoice.com/forums/55896-general/suggestions/2554384-multiple-axis-alignment-control?page=3&per_page=20.
However you can try this simple workaround:
Have fixed min/max on both y Axes:
yAxis: [{ min: minYAxisValue, max: maxYAxisValue }
Or just link second axis to the first:
yAxis: [{ opposite: true, linkedTo: 0 }

Point title in bubble chart (Highcharts)

I have the following code:
var chart = new Highcharts.Chart({
chart: {
type: 'bubble',
zoomType: 'xy',
renderTo: 'municipalgraph'
},
title: {
text: ''
},
yAxis: {
title: {
text: ''
}},
tooltip: {
formatter: function() {
return this.point.name + '<br/><b>' + this.x + '</b><br/><b>' + this.y + '</b>'
}},
series: [{
data: [67,78,75],[64,12,10],[30,77,82]]
}]
});
I would like to add a name to each point to display it in the tooltip. Is it possible?
You need to replace array of point with object, like:
series: [{
data: [{
x: 67,
y: 78,
z: 20,
customParam: 'custom text1'
},{
x: 14,
y: 68,
z: 50,
customParam: 'custom text2'
},[20,20,20]]
}]
And in the tooltip get parameter form point.options
tooltip: {
formatter: function () {
return this.point.name + '<br/><b>' + this.x + '</b><br/><b>' + this.y + '</b><br/>custom text: '+this.point.options.customParam;
}
},
http://jsfiddle.net/JKLzy/2/

How to display bars next to each other

Problem
When I have only 1 series to show with multiple users in highcharts bar graph it display on top of each other instead of next to each other. Below is the code am using. Please guide me in the right direction.
Also if I add 1 more date in any user's series it shows up properly but that is not the solution as I will always have 1 date on my graph.
JS fiddle link: http://jsfiddle.net/bhats1989/b33mN/3/
Code
$(function () {
$('#team_container').highcharts({
chart: {
type: 'bar',
//inverted: true,
renderTo: 'container',
zoomType: 'xy',
events: {
},
zIndex: 5
},
title: {
text: 'Team Activity Game',
x: -20 //center
},
subtitle: {
text: 'Click and drag in the plot area to zoom in and scroll',
x: -25 //center
},
xAxis: {
title: {
text: 'Week Ending'
},
type: 'datetime',
maxZoom: 24 * 3600000, // Two days
labels: {
rotation: -45,
align: 'right',
formatter: function() {
return Highcharts.dateFormat('%d/%m/%Y', this.value);
}
},
tickInterval: 24 * 3600 * 1000,
},
plotOptions: {
series: {
events: {
legendItemClick: function(event) {
if (!this.visible)
return true;
var seriesIndex = this.index;
var series = this.chart.series;
var j = series.length;
for (var i = 0; i < series.length; i++)
{
if (series[i].index != seriesIndex)
{
series[i].visible ? series[i].hide() : series[i].show();
series[j-1].hide();
}
}
return false;
}
}
}
},
yAxis: {
plotBands: [{ // mark the weekend
color: '#f4e3e7',
from: 0,
to: 15,
events: {
mouseover: function(e) {
team_tooltipUpdate();
}
},
zIndex: 3
}],
gridLineColor: null,
title: {
text: 'Distance (kms)'
},
plotLines: [{
color: '#FF0000',
width: 2,
value: 15 }]
},
tooltip: {
useHTML: true,
formatter: team_myFormatter
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [
{
name: 'Mark',
data: []
}, {
name: 'Joe',
data: [[Date.parse('7/28/2013 UTC'), 7.2954706108315 ]]
}, {
name: 'Max',
data: [[Date.parse('7/28/2013 UTC'), 25.668099736872 ]]
}, {
name: 'John',
data: [[Date.parse('7/28/2013 UTC'), 16.576099736872 ]]
} ,{
name: 'yellowline',
visible: false,
showInLegend: false,
data: []
}
]
});
});
function team_tooltipUpdate(){
var chart = $('#team_container').highcharts();
chart.tooltip.refresh(chart.series[4].points[0]);
}
function team_myFormatter(){
var game_parameter = 'running';
if(this.series.name == 'yellowline'){
return '<span style="color:Red;"><b>Danger Area</b></div>';
}else{
if(game_parameter == 'running'){
return '<span style="color:'+ this.series.color + '"><b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%d\/%m\/%Y', this.x) +': '+ parseFloat(this.y).toFixed(2) +' kms</span>';
}else if(game_parameter == 'steps'){
return '<span style="color:'+ this.series.color + '"><b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%d\/%m\/%Y', this.x) +', No. of Steps: '+ parseFloat(this.y).toFixed(2) +'</span>';
}else if(game_parameter == 'floors'){
return '<span style="color:'+ this.series.color + '"><b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%d\/%m\/%Y', this.x) +', No. of Floors: '+ parseFloat(this.y).toFixed(2) +'</span>';
}else if(game_parameter == 'cycling'){
return '<span style="color:'+ this.series.color + '"><b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%d\/%m\/%Y', this.x) +': '+ parseFloat(this.y).toFixed(2) +' kms</span>';
}else if(game_parameter == 'heartrate'){
return '<span style="color:'+ this.series.color + '"><b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%d\/%m\/%Y', this.x) +': '+ parseFloat(this.y).toFixed(2) +' BPM</span>';
}
}
}
You have to set your pointRange option for series.
pointRange : On linear and datetime axes, the range will be computed as the distance between the two closest data points.
As there is only one point, Highchart won't be able to calculate the pointRange...
To be sure that it will work, put it at the tickInterval value.
// ...
plotOptions: {
series: {
pointRange: 24 * 3600 * 1000, // tickInterval has the same value
// ...
},
// ...
},
// ...
For your question about First and Last label :
xAxis: {
// ...
showFirstLabel: false,
showLastLabel: false,
// ...
}
Look at this Example.
The problem is that with one point Highcharts won't be able to calculate pointRange for any of series. In that case set directly pointRange for series, see: http://jsfiddle.net/b33mN/5/
In the example, pointRange = tickInterval, it's probably you want to achieve.
I know this is a late but helpful answer, I use pointPlacement attribute of the config when using column charts and here is a plunker that shows how to use it to make columns stay next to each other .Results: http://plnkr.co/edit/uqZ4LEugMefLD6WSzHZT?p=preview
$(function () {
$('#container2').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'category',
categories:["Population","Kokulation"]
},
legend: {
enabled: false
},
plotOptions: {
series: {
pointPadding: 0,
groupPadding: 0,
pointWidth:20
},
},
tooltip: {
shared: false
},
series: [{
name: 'Population',
data: [
['Shanghai', 23.7],
['Lagos', 16.1]
],
pointPlacement:0.23
},
{name:"Kokulation",
data:[
['Istanbul', 14.2],
['Karachi', 14.0]
],
pointPlacement:-0.2146
}
]
});
});

highcharts scatter 1 second update with user defined lables on x-axis for each point

Here is a simplified version of the live scatter chart http://jsfiddle.net/ashwinp/z6QXW/8/
Now i am getting 0 1 2 etc like this on x-axis.i want user defined name on x axis.X axis labels should be pickup-ed from XLables array.
Same code from jsfiddle i have added here
var InfluenceCnt=0;
var QResiduals=[];
var XLables=[];
var HottelingT2=[];
var EllipseChartData;
var EllipseShift;
QResiduals.push('0.5356899');
QResiduals.push('0.5356899');
QResiduals.push('0.6356899');
QResiduals.push('0.2356899');
QResiduals.push('0.3356899');
QResiduals.push('0.1356899');
HottelingT2.push('0.1')
HottelingT2.push('0.2');
HottelingT2.push('0.3');
HottelingT2.push('0.4');
HottelingT2.push('0.5');
HottelingT2.push('0.6');
XLables.push('a')
XLables.push('b');
XLables.push('c');
XLables.push('d');
XLables.push('e');
XLables.push('f');
$(function () {
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
// Ellipse Plot
EllipseChartData = new Highcharts.Chart({
chart: {
renderTo: 'EllipseContainer',
type: 'scatter',
marginRight: 10,
zoomType: 'xy',
events: {
load: function () {
// set up the updating of the chart each second
EllipseSeries = this.series[0];
setInterval(function () {
EllipseShift = EllipseSeries.data.length > 20;
if (!isNaN(QResiduals[InfluenceCnt]) && $.isNumeric(QResiduals[InfluenceCnt]) && typeof (QResiduals[InfluenceCnt]) != "undefined") { //alert(QResiduals[InfluenceCnt]);
var x = HottelingT2[InfluenceCnt], // current time
y = parseFloat(QResiduals[InfluenceCnt]);
InfluenceCnt++;
EllipseSeries.addPoint([x, y], true, EllipseShift);
}
}, 1000);
}
}
},
title: {
text: 'Ellipse Plot'
},
xAxis: {
title: {
text: 'Sample'
},
plotLines: [{
value:2.5,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: ''
}
}]
},
yAxis: {
title: {
text: ''
},
plotLines: [{
value: 0.4,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: ''
}
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>X: ' +
Highcharts.numberFormat(this.x, 2) + '<br/> Y: ' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: true
},
series: [{
name: 'Ellipse Plot',
data: []
}]
});
});
});
The option you need is 'categories' on the xAxis. Try this:
xAxis: {
title: {
text: 'Sample'
},
categories:XLables,
http://jsfiddle.net/euVvy/
To fix the tooltip, you just need to refer to 'this.x', which will return the category name:
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>X: ' +
this.x + '<br/> Y: ' +
Highcharts.numberFormat(this.y, 2);
}
},
http://jsfiddle.net/4aDQ2/
You can use categories or labels formatter which allows to define "displayed label http://api.highcharts.com/highstock#xAxis.labels.formatter

Resources