I am stuck on a series disappearance issue on highstock v1.3.10.
I have tried setting ignoreHiddenSeries to false, adjusting minRange and min/maxPadding but adjusting range still wipes off one of my series (called raffData, myChart.series[3])
Any ideas on how to resolve this please?
Issue reproduction steps:
change series type to stepline.
select 2yr in range selector
Raff channels disappear when in a widescreen resolution (desktop).
They will reappear when adjusting the xAxis range, when candle or ohlc is re-selected, or when the browser width is minimized (with chart.reflow set to true).
jsfiddle
fullscreen result
myChart = new Highcharts.StockChart({
chart : {
panning: false,
ignoreHiddenSeries: false,
renderTo : 'container',
alignTicks: false,
marginLeft : 25
},
plotOptions : {
line : {
lineWidth : 0.7
},
series : {animation : true}
},
rangeSelector : {
inputDateFormat: '%e %b, %Y',
inputEditDateFormat: '%d/%m/%Y',
//selected : 1,
buttons: [{
type: 'month',
count: 6,
text: '6m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'year',
count: 2,
text: '2y'
}, {
type: 'year',
count: 3,
text: '3y'
}, {
type: 'year',
count: 5,
text: '5y'
}, {
type: 'year',
count: 10,
text: '10y'
}, {
type: 'all',
text: 'All'
}]
},
title : {
text : getTick
},
tooltip : {
valueDecimals : 2
},
navigator : {
enabled : true
},
yAxis : [{
gridLineWidth : 0.8,
height : 410
}],
series : [{
type : series_type, // ohlc, candlestick, spline...
step : true,
name : getTick,
data : data,
lineWidth : 1,
dataGrouping : {
enabled : false,
units : [[
'week',
[1]
], [
'month',
[1, 2, 3, 4, 6]
],[
'year',
null
]]
}
},
{
type: 'spline',
name : 'linReg',
data : lrData,
enableMouseTracking : true,
color : '#F0F0F0',
dashStyle : 'Dash',
lineWidth : 1
},
{
type: 'areasplinerange',
name : 'RaffChannel',
data : raffData,
enableMouseTracking : false,
color : '#839bfc',
dashStyle : 'Dash',
fillOpacity : 0.2,
lineWidth : 1,
yAxis : 0
}] //end series
}); //ends chart
Nevermind, I overcame the issue by loading an additional hidden series that contains just date and the close price.
So for line, spline or area types I simply hide the OHLC series and show the close-only series using setVisible without redraw. Referring to the series by myChart.get(id) is a reliable way of pointing to the correct series.
Related
I am trying to plot a flot graph, but the date won't show. I do have flot.time loading and the time stamps are correct as I validated them. Can anyone see anything wrong with the code. The graph plots perfectly, but it shows the time stamp instead of the date.
if ($("#site-stats").length) {
var companies = [[1534892400000,4], [1534978800000,1], [1535065200000,1], [1535151600000,0], [1535238000000,0], [1535324400000,1], [1535410800000,5], [1535497200000,3], [1535583600000,2], [1535670000000,3], [1535756400000,1], [1535842800000,3], [1535929200000,2], [1536015600000,1], [1536102000000,1], [1536188400000,1], [1536274800000,1], [1536361200000,0], [1536447600000,0], [1536534000000,4], [1536620400000,0], [1536706800000,0], [1536793200000,0], [1536879600000,0], [1536966000000,0], [1537052400000,0], [1537138800000,0], [1537225200000,0], [1537311600000,0], [1537398000000,0], ];
var users = [[1534892400000,6], [1534978800000,8], [1535065200000,1], [1535151600000,0], [1535238000000,0], [1535324400000,1], [1535410800000,5], [1535497200000,3], [1535583600000,2], [1535670000000,4], [1535756400000,1], [1535842800000,3], [1535929200000,2], [1536015600000,1], [1536102000000,1], [1536188400000,1], [1536274800000,2], [1536361200000,0], [1536447600000,0], [1536534000000,5], [1536620400000,0], [1536706800000,0], [1536793200000,0], [1536879600000,0], [1536966000000,0], [1537052400000,0], [1537138800000,0], [1537225200000,0], [1537311600000,0], [1537398000000,0], ];
var plot = $.plot($("#site-stats"), [{
data : companies,
label : "Company Registrations"
}, {
data : users,
label : "User Registrations"
}], {
series : {
lines : {
show : true,
lineWidth : 1,
fill : true,
fillColor : {colors : [{ opacity : 0.1}, {opacity : 0.15}]}
},
points : {show : true},
shadowSize : 0
},
xaxis : {
mode : "time",
dateFormat : "%y-%0m-%0d"
},
yaxes : [{
min : 0,
tickLength : 2
}],
grid : {
hoverable : true,
clickable : true,
tickColor : $chrt_border_color,
borderWidth : 0,
borderColor : $chrt_border_color,
},
tooltip : true,
tooltipOpts : {
content : "Your sales for <b>%x</b> was <b>%y</b>",
dateFormat : "%y-%0m-%0d",
defaultTheme : false
},
colors : [$chrt_main, $chrt_second],
xaxis : {
ticks : 10,
tickDecimals : 0
},
yaxis : {
ticks : 20,
tickDecimals : 0
},
});
}
});
You have two xaxis properties in your options object:
xaxis : {
mode : "time",
dateFormat : "%y-%0m-%0d"
},
and
xaxis : {
ticks : 10,
tickDecimals : 0
},
The second overwrites the first one with the time format. Put them together and it works fine (see this fiddle):
xaxis: {
mode: "time",
dateFormat: "%y-%0m-%0d",
ticks: 10,
tickDecimals: 0
},
I have to set up a graph for a web application, and I decided to use Highcharts because it seems to be the most flexible. I managed to create what I wanted, but I can't do it in one graphic, I have to create two.
My goal is to have a bar graph, with negative values on the left and positive values on the right, and category names in the middle (and being able to place HTML in it but it's secondary).
Here is the link to what I have today:
$(function() {
Highcharts.setOptions({
chart : {
type : 'bar'
},
title : { text : '' },
subtitle : { text : '' },
plotOptions : {
bar : { dataLabels : { enabled : true }}
},
legend : { enabled : false },
credits : { enabled : false },
yAxis : {
title : false,
opposite : true
},
xAxis : {
categories : ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
labels : { format : "" },
type : "category",
visible : false,
title : false,
showEmpty: false,
reversed : true
}
});
// Graphique gauche (négatifs)
var leftChart = new Highcharts.Chart({
chart: { renderTo: 'gphLeft' },
yAxis: { reversed : false },
xAxis: { opposite : true },
series : [{
data : [null, -150, null, null, -680]
}]
});
// Graphique droite (positifs)
var rightChart = new Highcharts.Chart({
chart: { renderTo: 'gphRight' },
yAxis: { reversed : false },
xAxis: { opposite : false },
series : [{
data : [180, null, 258, 487, null]
}]
});
});
I have tried different techniques and answers found on the Internet, but I can't find a solution.
(I hope you understand, because I use a translator)
Can somebody help me?
I have a json dataset with millions of points.The structure is like this:
[[1436997600000,7],[....]]
The first number is a data and second one is a value.
I want to plot this in a highchart so that it doesn't take so much time to load the chart and to navigate in it. I followed this example: http://www.highcharts.com/stock/demo/lazy-loading
but can't get it work with my data. It take so much time to load and when I zoom the message 'loading from server' doesn't disappear. Can anyone help me on this please?
JS:
$(function () {
/**
* Load new data depending on the selected min and max
*/
function afterSetExtremes(e) {
var chart = $('#container').highcharts();
chart.showLoading('Loading data from server...');
$.getJSON('http://localhost/public_html/webservice.php/re/pap/' + Math.round(e.min) + '/' + Math.round(e.max), function (data) {
chart.series[0].setData(data);
chart.hideLoading();
});
}
// See source code from the JSONP handler at https://github.com/highcharts/highcharts/blob/master/samples/data/from-sql.php
$.getJSON('http://localhost/public_html/webservice.php/re/pap', function (data) {
// Add a null value for the end date
data = [].concat(data, [[Date.UTC(2016, 9, 14, 19, 59), null]]);
// create the chart
$('#container').highcharts('StockChart', {
chart : {
type: 'scatter',
zoomType: 'x'
},
navigator : {
adaptToUpdatedData: false,
series : {
data : data
}
},
scrollbar: {
liveRedraw: false
},
title: {
text: 'AAPL history by the minute from 1998 to 2011'
},
subtitle: {
text: 'Displaying 1.7 million data points in Highcharts Stock by async server loading'
},
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',
text: 'All'
}],
inputEnabled: false, // it supports only days
selected : 4 // all
},
xAxis : {
events : {
afterSetExtremes : afterSetExtremes
},
minRange: 3600 * 1000 // one hour
},
yAxis: {
floor: 0
},
series : [{
data : data,
dataGrouping: {
enabled: false
}
}]
});
});
});
Fiddle: http://jsfiddle.net/f0u5c4pg/
Thanks in advance!
I have a serious problem with the canvas height of my jqplot graph.
It is an horizontal bar graph. The number of bars is dynamic, so the height of the canvas SHOULD BE dynamic as well.
What I get is that whatever is the number of bars, the height of the canvas is always the same.
barWidth, barMargin, barPadding are ignored.
Here is my code:
$.jqplot(tip, data, {
stackSeries : false,
captureRightClick : true,
seriesDefaults : {
renderer : $.jqplot.BarRenderer,
rendererOptions : {
barDirection : 'horizontal',
barWidth : 15,
barPadding : 5,
barMargin : 15,
highlightMouseDown : true
},
shadowAngle : 135,
pointLabels : {
show : true,
location : 'e',
edgeTolerance : -40
}
},
title : {
show : true
},
series : [{
label:'aaa'
}],
axesDefaults : {
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
}
},
});
Does someone understand why height doesn't adapt automatically?
I'm facing a serious problem. Whenever I try to add any trendline starting from a bit below to the top of the chart (near about 70-85 degree angle), it changes its width. But in case of vertical and horizental line I'm not facing the problem. Is there any way to prevent this?
My code is:
$(function() {
$.getJSON('http://api-sandbox.oanda.com/v1/candles?instrument=EUR_USD&candleFormat=midpoint&granularity=W', function(data) {
// create the chart
var onadata =[];
var yData=[];
var type='line';
var datalen=data.candles.length;
var all_points= [];
var all_str="";
for(var i=0; i<datalen;i++)
{
var each=[Date._parse(data.candles[i].time), data.candles[i].openMid, data.candles[i].highMid, data.candles[i].lowMid, data.candles[i].closeMid]
onadata.push(each);
yData.push(data.candles[i].closeMid);
}
chart();
function chart()
{
$('#container').highcharts('StockChart', {
credits: {
enabled : 0
},
rangeSelector : {
buttons: [{
type: 'month',
count: 1,
text: '1M'
}, {
type: 'month',
count: 3,
text: '3M'
},{
type: 'month',
count: 6,
text: '6M'
},{
type: 'all',
text: 'All'
}],
selected:3
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
title : {
text : 'Stock Price'
},
xAxis :{
minRange : 3600000
},
chart: {
events: {
click: function(event) {
var x1=event.xAxis[0].value;
var x2 =this.xAxis[0].toPixels(x1);
var y1=event.yAxis[0].value;
var y2 =this.yAxis[0].toPixels(y1);
selected_point='['+x1+','+y1+']';
all_points.push(selected_point);
all_str=all_points.toString();
if(all_points.length>1)
{
this.addSeries({
type : 'line',
name : 'Trendline',
id: 'trend',
data: JSON.parse("[" + all_str + "]"),
color:'#'+(Math.random()*0xEEEEEE<<0).toString(16),
marker:{enabled:true}
});
}
if(all_points.length==2)
{
all_points=[];
}
}
}
},
series : [{
//allowPointSelect : true,
type : type,
name : 'Stock Price',
id: 'primary',
data : onadata,
tooltip: {
valueDecimals: 5,
crosshairs: true,
shared: true
},
dataGrouping : {
units : [
[
'hour',
[1, 2, 3, 4, 6, 8, 12]
], [
'day',
[1]
], [
'week',
[1]
], [
'month',
[1, 3, 6]
], [
'year',
[1]
]
]
}
},
]
});
}
});
});
and this is my JSfiddle.
Please check the images also.
Normal chart
Chart with trendline
This is normal. It is adjusting the height of the chart (not the width) to accommodate the points you are adding. It adds a little buffer to make the chart point a bit more readable.
You can also use min/max parameters or set tickPositions / tickPositioner to keep ticks always in the same postions.
Docs: http://api.highcharts.com/highcharts