I am having a strange response when I show/hide series clicking in the legend. When I hide a serie the other is incorrectly drawn.
Here is my fiddle:
http://jsfiddle.net/JorgeDuenasLerin/kkE8h/36/
This is the code of the initialization
$('#container').highcharts('StockChart', {
yAxis : [{
height : 180,
lineWidth : 2
}, {
top : 220,
height : 180,
lineWidth : 2
}],
rangeSelector : {
selected : 5
},
tooltip: {
shared: true
},
legend : {
enabled : true
},
title : {
text : 'AAPL Stock Price'
},
series : [
{
name : 'Click on Me!',
data : data,
yAxis: 0,
tooltip: {
valueDecimals: 2
}
},
{
name : 'Click on Me!',
data : data2,
yAxis: 1,
tooltip: {
valueDecimals: 2
}
}
]
});
Someone knows something about it?
Indeed it looks like a known bug reported here: https://github.com/highslide-software/highcharts.com/issues/2348
Related
How can i use Highstock rangeSelector get the yAxis Max_value and Min_Value ??
http://jsfiddle.net/r2wm5dyj/
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=new-intraday.json&callback=?', function (data) {
// create the chart
$('#container').highcharts('StockChart', {
title: {
text: 'AAPL stock price by minute'
},
subtitle: {
text: 'Using ordinal X axis'
},
xAxis: {
events: {
setExtremes: function(e) {
$('#Sdate').html( Highcharts.dateFormat(null, e.min));
$('#Edate').html( Highcharts.dateFormat(null, e.max));
}
}
},
rangeSelector : {
buttons : [{
type : 'hour',
count : 1,
text : '1h'
}, {
type : 'day',
count : 1,
text : '1D'
}, {
type : 'all',
count : 1,
text : 'All'
}],
selected : 1,
inputEnabled :false
},
series : [{
name : 'AAPL',
type: 'area',
data : data,
gapSize: 8,
tooltip: {
valueDecimals: 1
},
fillColor : {
linearGradient : {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops : [
[0, Highcharts.getOptions().colors[5]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
threshold: null[enter link description here][1]
}]
});
});
});
i find a solution in myself
xAxis: {
events: {
setExtremes: function(e) {
$('#Sdate').html( Highcharts.dateFormat(null, e.min));
$('#Edate').html( Highcharts.dateFormat(null, e.max));
},
afterSetExtremes:function(e)
{
var chart = $('#container').highcharts(),
extremes = chart.yAxis[0].getExtremes();
$('#HiestTemp').html(extremes.dataMax);
$('#LowestTime').html(extremes.dataMin);
}
}
},
i would like do make highchart like this:
http://www.highcharts.com/stock/demo/dynamic-update
The data will be received realtime.
First time i pull data (quote and timestamp).
After this the data will be pushed.
My code:
//drow chart - pull
var highChart = function () {
Highcharts.setOptions({
global : {
useUTC : false
}
});
$('#container').highcharts('StockChart', {
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0
},
title : {
text : 'Intraday chart'
},
exporting: {
enabled: false
},
series : [{
name : 'DAX DATA',
data :
}]
});
}
var setHighChart = function(lastPriceTimestamp,lastPrice) {
highChart.series[0].setData([lastPriceTimestamp,lastPrice]);
};
...
//push data
setHighChart(lastPriceTimestamp,lastPrice);
Maby you could help me
thx
I have a problem with the bubble chart. In fact, i have some points which have the same coordinates with a different name and maybe a different size (z point). For these points, i have a superposition of labels. The z-index solution doesn't work (https://stackoverflow.com/questions/15843238/highcharts-bubble-chart-datalabels-overlappinghttps://stackoverflow.com/questions/15843238/highcharts-bubble-chart-datalabels-overlapping).
Does anyone know of any solution to this problem ?
I thought to do a label connector like the pie chart but i do not how to do.
My code :
$(function () {
$('#container').highcharts({
credits: {
enabled: false
},
chart: {
type: 'bubble',
zoomType: 'xy'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories:['R0', 'R1', 'R2','R3', 'R4', 'R5', 'R6']
},
yAxis: {
title: {
text: ''
}
},
plotOptions: {
bubble: {
dataLabels: {
enabled: true,
useHTML: true,
//inside: false,
//y:-10,
//overflow: false,
//crop: false,
style: { textShadow: 'none',fontSize: '10px',color:'black' },
formatter: function() {
return "<i>" + this.point.name.split(' ').join('<br>') + "</i>";
}
},
tooltip : {
headerFormat: '<b>{series.name}</b><br>',
pointFormat : 'S : <i>{point.name}</i><br>Y : {point.y}<br>Num : {point.z}'
}
}
},
series: [
{
name: 'Sample1',
marker: { fillColor: '#89A54E' },
data: [
{ name:'A',x:2,y:0.0,z:47},
{ name:'Z',x:3,y:1.0,z:35},
{ name:'E',x:4,y:0.5,z:9},
{ name:'R',x:0,y:1.0,z:34},
{ name:'T',x:3,y:0.0,z:37},
{ name:'T',x:2,y:0.0,z:22},
{ name:'p',x:0,y:1.0,z:39},
{ name:'m',x:2,y:0.5,z:47},
{ name:'h',x:0,y:0.5,z:48},
{ name:'l',x:5,y:1.0,z:25},
]
},
{
name: 'Sample2',
marker: { fillColor: '#92A8CD' },
data: [
{ name:'AB',x:2,y:0.5,z:23},
{ name:'CA',x:6,y:0.5,z:19},
{ name:'OP',x:3,y:0.5,z:21},
{ name:'CP',x:1,y:0.75,z:38},
{ name:'TS',x:3,y:1.0,z:13},
{ name:'SP',x:0,y:1.0,z:43},
{ name:'SE',x:4,y:1.0,z:2},
{ name:'CS',x:6,y:0.5,z:48},
{ name:'CL',x:1,y:0.5,z:5},
{ name:'H',x:1,y:0.0,z:11},
]
}
]
});
});
Apparently there is a labelrank property on the Highcharts point objects that can be used to dictate which point labels are on top. It can be used when you're creating your data like this:
data: [{
x: 1, y: 1, labelrank: 1, name: 'A'
},{
x: 1, y: 1, labelrank: 2, name: 'B'
}]
Or it can be updated on an individual point to bring that point's dataLabel to the front by doing something like this: chart.series[0].points[0].update({labelrank: 3});
I had a similar issue and created this question on SO that just was answered.
EDIT
They have updated their docs to include series.data.labelrank as well: http://api.highcharts.com/highcharts#series.data.labelrank
Here seems highstock is not working as expected
http://jsfiddle.net/gCuLJ/1/
I simply created a highstock chart with yaxis with fixed top and height.
Then i added a new y-axis with top and height set as to stack the chart below the first one.
Now i set some flags on the second y-Axis series.
Flags are showing somewhere on first y-Axis series.
add button handler code:
$('#button').click(function() {
var chart = $('#container').highcharts();
chart.addAxis({
id:'secondY',
top:300,// making this 140 positions flags correctly
height:150
});
chart.addSeries({
id:'adbe',
yAxis:'secondY',
name: 'ADBE',
data: ADBE
});
$(this).attr('disabled', true);
chart.addSeries(
// the event marker flags
{
type : 'flags',
data : [{
x : Date.UTC(2011, 3, 25),
title : 'H',
text : 'Euro Contained by Channel Resistance'
}, {
x : Date.UTC(2011, 3, 28),
title : 'G',
text : 'EURUSD: Bulls Clear Path to 1.50 Figure'
}],
onSeries : 'adbe',
shape : 'circlepin',
width : 16
});
});
Answer is here: http://jsfiddle.net/nmccready/wXZ4H/1/ and https://github.com/highslide-software/highcharts.com/issues/2425 .
You need to assign an id to whatever yAxis you need.
$(function() {
$('#container').highcharts('StockChart', {
chart: {
zoomType: 'x',
marginTop: 100, //avoid overlapping with navigator
spacingLeft: 0
},
scrollbar: {
enabled: false
},
navigator: {
enabled: true,
top: 40
},
rangeSelector: {
selected: 1
},
yAxis:[{
id: 'firstY',
top:140,
height:150
}],
series: [{
id:'msft',
name: 'MSFT',
data: MSFT,
yAxis: 'firstY'
}]
});
$('#button').click(function() {
var chart = $('#container').highcharts();
chart.addAxis({
title:'duh',
id:'secondY',
top:300,
height:150
});
chart.addSeries({
id:'adbe',
yAxis:'secondY',
name: 'ADBE',
data: ADBE
});
$(this).attr('disabled', true);
chart.addSeries(
// the event marker flags
{
yAxis:'firstY',
type : 'flags',
data : [{
x : Date.UTC(2011, 3, 25),
title : 'H',
text : 'Euro Contained by Channel Resistance'
}, {
x : Date.UTC(2011, 3, 28),
title : 'G',
text : 'EURUSD: Bulls Clear Path to 1.50 Figure'
}],
onSeries : 'msft',
shape : 'circlepin',
width : 16
});
});
});
Problem:
When i zoom in and out (with the buttons), the color of the zoomed area changes (becomes darker).
Is this a known issue/bug? How can i prevent this color change?
(tested in Firefox, Internet Explorer, Chrome and Opera.)
Here is my code:
$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1
},
series : [{
name : '1',
data : data,
color: '#FF0000',
type : 'area',
tooltip : {
valueDecimals : 2
},
stacking: 'normal'
},{
name : '2',
data : data,
color: '#A6A6A6',
type : 'area',
tooltip : {
valueDecimals : 2
},
stacking: 'normal'
},{
name : '3',
data : data,
color: '#D9D9D9',
type : 'area',
tooltip : {
valueDecimals : 2
},
stacking: 'normal'
}]
});
});
});
http://jsfiddle.net/5fpCP/1/