Highcharts multiple panes, with plotOptions Compare Percent in only one pane - highcharts

I have two panes (yAxis:0 and yAxis:1) for two different sets of data series. When I use plotOptions Compare set to Percent, the second pane (yAxis:1) becomes blank (or actually I think the curve is pushed to the very top, but still not visible). If I remove the plotOptions section, then the second pane comes out just like I want it. But then I don't get the first pane the way I want it (normalized so I can see the percentage difference rather than absolute value).
Is there a way to apply the plotOptions only to the first pane / yAxis:0?
window.chart = new Highcharts.StockChart({
chart: {
renderTo : 'container'
},
title: {
text : 'Relative rates for <?=$stock1?>, <?=$stock2?>, and OMX30, and positions taken'
},
rangeSelector: {
buttons: [{
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 3,
text: '3m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'ytd',
text: 'YTD'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'year',
count: 4,
text: '4y'
}, {
type: 'all',
text: 'All'
}],
selected: 5
},
yAxis: [{
title: {
text: 'Normalized rates'
},
height: 250,
labels: {
formatter: function() {
return (this.value > 0 ? '+' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
}, {
title: {
text: 'Positions taken'
},
top: 300,
height: 100,
offset: 0,
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
}],
xAxis: {
type: 'datetime',
minRange: 1728000000 //Minimibredden på grafen i ms
},
plotOptions: {
series: {
compare: 'percent'
}
},
series: [{
name : '<?=$stock1?>',
data : json_data,
yAxis : 0,
tooltip: {
yDecimals: 2
}
},{
name : '<?=$stock2?>',
data : json_data2,
yAxis : 0,
tooltip: {
yDecimals: 2
}
},{
name : 'OMX30',
data : json_data3,
yAxis : 0,
tooltip: {
yDecimals: 2
}
},{
name : '<?=$stock1?>',
data : json_data4,
yAxis : 1,
tooltip: {
yDecimals: 1
}
},{
name : '<?=$stock2?>',
data : json_data5,
yAxis : 1,
tooltip: {
yDecimals: 1
}
}]
});
});

Related

Display tooltips exact format outside, into another div

I want to display my exact tooltips display ( 'LabelName:y.axis' (with legend color)) , into another div (most probably above the chart). And it should be per panehovering (currently having 3 panes). Is this possible?..
Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-ohlcv.json',
function(data) {
// split the data set into ohlc and volume
var ohlc = [],
volume = [],
volume2 = [],
dataLength = data.length,
// set the allowed units for data grouping
groupingUnits = [
[
'week', // unit name
[1] // allowed multiples
],
[
'month',
[1, 2, 3, 4, 6]
]
],
i = 0;
for (i; i < dataLength; i += 1) {
ohlc.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
volume.push([
data[i][0], // the date
data[i][5] // the volume
]);
volume2.push([
data[i][0], // the date
data[i][5] // the volume
]);
}
// create the chart
Highcharts.stockChart('container', {
title: {
text: 'AAPL Historical'
},
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'OHLC'
},
height: '33%',
lineWidth: 2,
id: '0',
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume'
},
top: '33%',
height: '33%',
offset: 0,
lineWidth: 2,
id: '1',
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume 123'
},
top: '66%',
height: '33%',
offset: 0,
lineWidth: 2,
id: '2'
},{
opposite:false,
labels: {
align: 'right',
x: -3
},
title: {
text: 'second AAPL'
},
height: '33%',
offset: 0,
lineWidth: 2,
id: '3'
}],
xAxis: [{
offset: -4,
lineWidth: 2
}],
legend: {
enabled: true
},
tooltip: {
split: true
},
series: [{
type: 'candlestick',
name: 'AAPL',
data: ohlc,
yAxis: 0
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
}, {
type: 'column',
name: 'Volume123',
data: volume,
yAxis: 2,
}, {
type: 'spline',
name: 'second AAPL',
data: ohlc,
yAxis: 3,
}]
});
});
This is my working demo fiddle . This is how my code look like.I want to make the tooltip data to be displayed in other div,so far I have tried, only one data series getting called..
Visual Representation of desired tooltips
I really appreciate any help
Use the below options to position a tooltip in the div above the chart:
tooltip: {
...,
shared: true,
split: false,
shape: 'rect',
outside: true,
positioner: function() {
return {
x: 0,
y: 0
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/akwgf7hm/
API Reference: https://api.highcharts.com/highcharts/tooltip.positioner

highstocks intraday chart with timestamp and non decimal y axis

Have a highstock chart with a large number of data around 60-80 thousand timestamp and sum. The problem is that none of the data which i give to highstock contains decimal but highstock shows some values that are decimals like 1.5 but my data does not have any 1.5. Does the highstock averages the data if timestamp is more than 1hour or anything? If it does averages the data than how to stop this averaging as i dont need decimal data
var chart = Highcharts.stockChart('container', {
chart: {
height: 400
},
title: {
text: 'Tweets Count'
},
xAxis: {
gapGridLineWidth: 0,
events: {
afterSetExtremes: function (e) {
min=e.min
max=e.max
src="http://34.66.198.6/"+id+"/map/"+parseInt(min).toString()+"/"+parseInt(max).toString()+"/"
loadIframe("map",src)
src="http://34.66.198.6/"+id+"/hashtags/"+parseInt(min).toString()+"/"+parseInt(max).toString()+"/"
loadIframe("hashtags",src)
src="http://34.66.198.6/"+id+"/mentions_screen_name/"+parseInt(min).toString()+"/"+parseInt(max).toString()+"/"
loadIframe("mentions_screen_name",src)
src="http://34.66.198.6/"+id+"/screen_name/"+parseInt(min).toString()+"/"+parseInt(max).toString()+"/"
loadIframe("screen_name",src)
src="http://34.66.198.6/"+id+"/sentiments/"+parseInt(min).toString()+"/"+parseInt(max).toString()+"/"
loadIframe("sentiments",src)
src="http://34.66.198.6/"+id+"/sentiments/"+parseInt(min).toString()+"/"+parseInt(max).toString()+"/All/all"
loadIframe("twitter",src)
src="http://34.66.198.6/"+id+"/sentiments/"+parseInt(min).toString()+"/"+parseInt(max).toString()+"/All/all/word"
loadIframe("word-cloud",src)
}
}
},
yAxis:{
text:'Tweets Count'
}
,
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1H'
}, {
type: 'day',
count: 1,
text: '1D'
},
{
type: 'month',
count: 1,
text: '1M'
},
{
type: 'year',
count: 1,
text: '1Y'
},
{
type: 'all',
count: 1,
text: 'All'
}],
selected: 1,
inputEnabled: false
},
series: [{
name: 'Tweets Count',
data: {{data}},
type: 'area',
gapSize: 5,
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
threshold: null
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
chart: {
height: 300
},
subtitle: {
text: null
},
navigator: {
enabled: false
}
}
}]
}
});
Highstock provides dataGrouping feature, which is enabled by default.
Please check the docs below and compare the result with:
disabled dataGrouping: http://jsfiddle.net/BlackLabel/tokz3aum/
enabled dataGrouping http://jsfiddle.net/BlackLabel/co16j85p/
You can disable dataGrouping or define your own approximation function which will round the result, for example:
series: [{
data: [...],
dataGrouping: {
approximation: function(arr) {
var len = arr.length,
ret = Highcharts.approximations.sum(arr);
if (Highcharts.isNumber(ret) && len) {
ret = ret / len;
}
return Math.round(ret);
}
}
}]
Live demo: http://jsfiddle.net/BlackLabel/q6ukvrp9/
API Reference: https://api.highcharts.com/highstock/series.line.dataGrouping.approximation
Docs: https://www.highcharts.com/docs/advanced-chart-features/data-grouping

Highstock flags onSeries

I am using highstock and wants to add flags to my graphs.
I have two charts in the same container and are using "onSeries" to add
the flags on the correct chart. However, the flags are always applied to the upper graph eventhough I specify in the "onSeries" parameter in my flags config.
fiddler: https://jsfiddle.net/rick822/mtw0oxxy/
$(function () {
$('#container').highcharts('StockChart', {
chart: {
height: 1800
},
title : {
text : 'AAPL Stock Price'
},
yAxis: [
{
labels: {},
title: {
text: 'test1'
},
height: 100,
opposite: false,
offset: 0
},
{
labels: {},
title: {
text: 'test2'
},
height: 100,
top: 300,
opposite: false,
offset: 0
}
],
series : [{
name : 'AAPL',
data : [[1241136000000,18.18],[1243555200000,19.40],[1246320000000,20.35]],
id: 'test1',
tooltip: {
valueDecimals: 2
}
,
yAxis: 0
},
{
name : 'AAPL',
data : [[1241136000000,18.18],[1243555200000,19.40],[1246320000000,20.35]],
id: 'test2',
tooltip: {
valueDecimals: 2
},
yAxis: 1
},
{
type: 'flags',
data: [{x: 1241136000000, title: "TEST1" }],
onSeries: 'test1',
shape: 'squarepin',
width: 16,
fillColor: 'red'
},
{
type: 'flags',
data: [{x: 1243555200000, title: "TEST2" }],
onSeries: 'test2',
shape: 'squarepin',
width: 16,
fillColor: 'lightgreen'
}
]
});
});
As you have several y-axis you also have to specify the associated y-axis for the flag series, at least when they are not going to be on the index 0 y-axis.
For example (JSFiddle):
{
type: 'flags',
data: [{x: 1241136000000, title: "TEST1" }],
onSeries: 'test1',
shape: 'squarepin',
width: 16,
fillColor: 'red',
yAxis: 0
},
{
type: 'flags',
data: [{x: 1243555200000, title: "TEST2" }],
onSeries: 'test2',
shape: 'squarepin',
width: 16,
fillColor: 'lightgreen',
yAxis: 1
}

HighStock pointRange issue

I am having some difficulty getting pointRange to work for a HighStock combination chart I've written.
You can see the issue here, the bars should be 28 days wide but they are not. I can get this code to work on a non-HighStock chart but something is preventing it from working in HighStock and I've been unable to figure it out.
http://jsfiddle.net/3fnfy434/
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
height: 450
},
credits: {
enabled: false
},
rangeSelector : {
inputEnabled: false,
selected : 2,
buttons: [{
type: 'month',
count: 3,
text: '3m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
labelStyle: {
color: '#40C6CE',
fontWeight: 'bold'
}
},
title : {
text : 'test'
},
xAxis: {
type: 'datetime'
},
yAxis: [{
allowDecimals: false,
labels: {
formatter: function() {
return this.value;
},
style: {
color: '#25408F'
}
},
title: {
text: 't',
style: {
color: '#25408F'
}
}
}],
navigator: {
baseSeries: 1
},
series : [{
name: 's1',
data: d1,
type: 'column',
visible: true,
pointRange: 28 * 24 * 3600 * 1000,
tooltip: {
valueDecimals: 0,
valueSuffix: ''
}
},
{
name : 's2',
data : d2,
color: '#25408F',
dataGrouping: {
enabled: false
},
pointRange: 24 * 3600 * 1000,
tooltip: {
valueDecimals: 1,
valueSuffix: ''
}
}]
});
Any help greatly appreciated.

Two different thresholds in HighCharts 3.0

With HighCharts 3.0, it is now possible to indicate to colors above and below one threshold. Like this example :
http://jsfiddle.net/highcharts/YWVHx/
Following code :
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', function(data) {
$('#container').highcharts({
chart: {
type: 'arearange'
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: data,
color: '#FF0000',
negativeColor: '#0088FF'
}]
});
});
});
Is it possible to have another threshold with a third color, like this for example :
Thanks in advance for your help.
It actually is possible if you don't mind plotting the data twice.
$('#container').highcharts({
chart: {
type: 'arearange'
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
threshold : 0,
data: data,
color: 'orange',
negativeColor: 'blue'
},
{
name: 'Temperatures',
threshold : 10,
data: data,
color: 'red',
negativeColor: 'transparent'
}]
});
});
http://jsfiddle.net/YWVHx/97/
A feature to solve this without "hacks" was added in Highcharts 4.1.0 (February 2015), called zones (API). The given problem can be solved like this, using zones:
plotOptions: {
series: {
zones: [{
value: 0, // Values up to 0 (not including) ...
color: 'blue' // ... have the color blue
},{
value: 10, // Values up to 10 (not including) ...
color: 'orange' // ... have the color orange
},{
color: 'red' // Values from 10 (including) and up have the color red
}]
}
}
See this JSFiddle demonstration of how it looks.
Unfortunately this option is not possible, but you can request your suggestion in http://highcharts.uservoice.com and vote for it.
By the way, I can try use a plotLine, like this:
yAxis: {
title: {
text: 'My Chart'
},
plotLines: [{
id: 'limit-min',
dashStyle: 'ShortDash',
width: 2,
value: 80,
zIndex: 0,
label : {
text : '80% limit'
}
}, {
id: 'limit-max',
color: '#008000',
dashStyle: 'ShortDash',
width: 2,
value: 90,
zIndex: 0,
label : {
text : '90% limit'
}
}]
},

Resources