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/
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 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
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
});
});
});
Simply put Highstocks seems to be rounding all of the data that I put into it, I need up to two decimal places shown which I have set up in the tooltip however at the moment all I am receiving for the two places are 0's. So instead of 1.5 its 1.
$.getJSON('mkjson.php?device=<?echo $device_name;?>&sensor=<?echo $sensor_name;?>&pin=<?echo $pin;?>&user=<?echo $_SESSION['user'];?>', function(data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container',
zoomType: 'x'
},
rangeSelector : {
selected : 1
},
title : {
text : 'Device:<?echo $device_name;?>'
},
subtitle : {
text : 'Sensor:<?echo $sensor_name;?>'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
second: '%Y-%m-%d<br/>%H:%M:%S',
minute: '%Y-%m-%d<br/>%H:%M',
hour: '%Y-%m-%d<br/>%H:%M',
day: '%Y<br/>%m-%d',
week: '%Y<br/>%m-%d',
month: '%Y-%m',
year: '%Y'
}
},
yAxis : {
title : {
text : '<?echo $unit;?>'
}
},
rangeSelector : {
buttons : [{
type : 'minute',
count : 10,
text : '10m'
}, {
type : 'hour',
count : 1,
text : '1H'
}, {
type : 'day',
count : 1,
text : '1D'
},
{
type : 'day',
count : 3,
text : '3D'
}],
selected : 3,
inputEnabled : false
},
series : [{
name : 'Voltage',
data : data,
tooltip: {
valueDecimals: 2
},
dataGrouping: {
enabled: false
}
}]
});
});
You can format numbers using Highcharts.numberFormat().
tooltip: {
formatter: function() {
return Highcharts.numberFormat(this.y, 2);
}
}
Demo: http://jsfiddle.net/em7h6/
Btw according to this sample: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/tooltip/valuedecimals/
using valueDecimals should also work, don't know whats missing in your case.
It should works http://jsfiddle.net/rbr23/ without using numberFormat();
chart: {
renderTo: 'container'
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
series: [{
data: [29.92, 71.51, 106.433, 129.12, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.61, 54.43]
}]