I'm trying to use a stacked bar to represent up/down status over time. For some reason, I'm not able to get the start date to work correctly.
This is what I'm going for, but the start date won't update past epoch start.
http://jsfiddle.net/t5d72ka5/4/
Highcharts.chart('container', {
chart: {
type: 'bar',
backgroundColor:'transparent',
zoomType:'y'
},
title: {
text: ''
},
xAxis: {
},
yAxis: {
//min: 1502236800000 or min: Date.UTC(2011, 4, 31)
type: 'datetime',
"tickInterval": 86400000,
"minTickInterval": 86400000,
dateTimeLabelFormats: {
day: '%Y %b %e'
},
title: {
enabled: false
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [
{
name: 'down',
data: [83621000],
color: 'red'
}, {
name: 'up',
data: [83621000],
color: 'green'
}, {
name: 'down',
data: [83621000],
color: 'red'
}, {
name: 'up',
data: [83621000],
color: 'green'
}]
});
I've tried to add the start date in min: 1502236800000 or with UTC and while it sets the start date right, the data doesn't render.
Also tried a few other things with the data values, pointStart, etc. but can't this to work.
I suppose that threshold option is what you're looking for:
plotOptions: {
series: {
stacking: 'normal',
threshold: 1502236800000
}
},
Live demo: http://jsfiddle.net/BlackLabel/jyjfvoac/
API reference: https://api.highcharts.com/highcharts/series.column.threshold
Related
I am trying to re-create the same line chart that is seen below using the Highcharts library. I can't figure out how can I display the date on the x-axis the same way it is shown on the image, and also why my third data series is not getting displayed?
Here's my code:
https://jsfiddle.net/samwhite/271gxvuL/1/
xAxis: {
crosshair: true,
title: { text: 'Date' },
categories: ['Jan 04', 'Jan 11', 'Jan 18', 'Jan 25'],
tickmarkPlacement: 'on'
},
yAxis: {
tickInterval: 10,
min: 5,
max: 40,
title: {
text: '# of Shares (mm)'
},
gridLineWidth: 0,
minorGridLineWidth: 0
},
legend: {
title: { text: 'Option Series' },
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
series: [{
name: 'GME Call',
color: "#00429d",
data: [18.40345395, 18.32595087, 19.15087983, 19.16410026, 18.55687485, 20.95533447, 20.4068335, 30.04684925, 33.73630533, 32.00319773, 20.66296168, 20.77395832, 23.55373851, 38.30826413, 29.98265297, 34.92300725, 32.19425239, 28.27697149, 31.92597248],
marker: { enabled: false },
label: { enabled: false }
}, {
name: 'GME Net',
color: "#009c56",
data: [3.981667259, 3.699835889, 5.707331914, 5.583661701, 4.031818851, 9.716787874, 8.218344693, 24.91298209, 29.72145703, 27.10696218, 15.76613521, 15.21344769, 18.31385242, 33.94138296, 24.14691476, 30.91437069, 30.15361859, 24.33123219, 29.52458396],
marker: { enabled: false },
label: { enabled: false }
}, {
name: 'GME Put',
color: "#f79646",
data: [-14.42178669, -14.62611498, -13.44354791, -13.58043856, -14.525056, -11.2385466, -12.18848881, -5.133867153, -4.014848306, -4.896235549, -4.896826466, -5.560510629, -5.239886084, -4.366881175, -5.835738209, -4.00863656, -2.040633802, -3.945739308, -2.401388521],
marker: { enabled: false },
label: { enabled: false }
}],
You need to change your data into the array of arrays, where nested array includes the x date format, something like:
[[ x date in miliseconds, y value]]
You can use the pointStart & pointInterval features:
https://api.highcharts.com/highcharts/series.line.pointStart
https://api.highcharts.com/highcharts/series.line.pointInterval
You can define wanted a array of categories that you want to display on the xAxis - just like is done in your example
I want to add a dash like in the red circle from the first point(blue). Is it possible?
Here is my code
function graph(graph_id, value_array,tool_tip_title, max, min){
$('#'+graph_id).highcharts({
chart: {
type: 'areaspline',
backgroundColor:'transparent'
},
title: {
text: false
},
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
return moment(this.value).format("HH:mm:ss");
}
}
},
yAxis: {
title: {
text: false
},
gridLineColor: 'transparent',
labels:{enabled: true},
gridLineWidth: 0,
minorGridLineWidth: 0,
min: min,
max: max
},
tooltip: {
shared: true
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 1
},
series: {
tooltip: {
dateTimeLabelFormats: {
second:"%A, %b %e, %H:%M:%S"
}
},
marker: {
fillColor: '#3D84B1',
lineWidth: 2,
lineColor: 'white',
radius: 6
}
}
},
series: [{
showInLegend: false,
name: tool_tip_title,
color: "#EC615F",
data: value_array
}]
});
}
I have also tried setting up the startOnTick to true and min to the least dateTime of x axis but nothing is happening.
Highcharts by default calculates some nice dates and sometimes the first possible label/datapoint is not fitting into that 'nice labels' algorithm. In case you want to display specific labels, use xAxis.tickPositioner. In your case, I think you can simply add two extra dates, like this:
tickPositioner: function() {
var tp = this.tickPositions; // get default positions
tp.splice(0, 1, this.min); // replace first label
tp.splice(tp.length - 1, 1, this.max); // replace last label
return tp;
}
Simple demo: http://jsfiddle.net/p98rggva/
you can use startOnTick and min as per your minimum data.
startOnTick: true,
min: your smallest data of xAxis/in date use first timestamp of sorted data
Here's a fiddle with my problem: http://jsfiddle.net/v0bxdqa7/5/
As you can see, the point is not aligned with the xaxis value.
I've come to believe, from the examples shown in highcharts website, that the problem is with my data, but I can't find the exact problem with it.
Any ideas?
My options:
rangeSelector: {
inputEnabled: false,
selected: 1,
buttons: [{
type: 'day',
count: 7,
text: '7'
}, {
type: 'day',
count: 30,
text: '30'
}, {
type: 'year',
count: 1,
text: '365'
}, {
type: 'ytd',
text: 'year'
}]
},
tooltip: {
headerFormat: '<small style="color: #666680">{point.key}</small><br>',
pointFormat: '<span style="color: #acacbf">{series.name}: </span>' +
'<span style="color: #666680"><b>{point.y}</b></span>'
},
xAxis: {
lineColor: '#ebebeb',
type: 'datetime',
labels: {
style: {
color: '#acacbf'
},
align: "center",
maxStaggerLines: 1,
overflow: false
}
},
yAxis: {
allowDecimals: false,
gridLineWidth: 0,
labels: {
enabled: false,
style: {
color: '#acacbf'
}
},
min: 0,
floor: 0,
minRange:1
},
navigator: {enabled: false},
chart: {
className: "line-chart",
backgroundColor: "#f7f7f7",
margin:[10,5,22,5]
},
plotOptions: {
series: {
marker: {
enabled: true,
states: {
hover: {
radius: 5
},
select: {
enabled: true,
radius: 5,
fillColor: '#ffffff',
lineColor: '#ad49a5'
}
}
}
}
},
scrollbar: {
enabled: false
},
colors: ["#ad49a5"]
Indeed your (timestamp) data is wrong.
Take the first one for example: 1370787037000 if you convert it you get Sun, 09 Jun 2013 14:10:37 GMT and that is exactly what's drawn on the chart.
If you want this point to be precisely on Sun, 09 Jun 2013 00:00:00 GMT its correct timestamp is 1370736000000. You have to do this for each date.
In the chart described in this fiddle, the date-labels on the x axis are missing. Can anyone tell me why that is? The code in the fiddle is listed below:
$(function () {
var counts = [[635172879695710000, 383], [635172882696280000, 271], [635172885696780000, 274]],
averages = [[635172879695710000, 288774], [635172882696280000, 85592], [635172885696780000, 79455]],
ranges = [[635172879695710000, 12, 2760740], [635172882696280000, 12, 2761263], [635172885696780000, 12, 2761265]];
$('#container').highcharts({
title: {
text: 'Testing!'
},
xAxis: {
type: 'datetime'
},
yAxis: [{
labels: {
format: '{value}B',
style: {
color: '#89A54E'
}
},
title: {
text: 'Size',
style: {
color: '#89A54E'
}
},
min: 0
}, {
labels: {
format: '{value}M',
style: {
color: '#4572A7'
}
},
title: {
text: 'Messages',
style: {
color: '#4572A7'
}
},
min: 0,
opposite: false
}],
tooltip: {
shared: true
},
series: [{
name: 'Line',
type: 'spline',
data: averages,
color: '#89A54E',
zIndex: 1,
marker: {
enabled: false
}
}, {
name: 'Area',
data: ranges,
type: 'areasplinerange',
lineWidth: 0,
linkedTo: ':previous',
color: '#89A54E',
fillOpacity: 0.3,
zIndex: 0
}, {
name: 'Count',
data: counts,
type: 'spline',
zIndex: 2,
color: '#4572A7',
yAxis: 1,
marker: {
enabled: false
}
}]
});
});
High charts is unable to parse the datetime that you have given.
Check console for the following error
Cannot call method 'substr' of undefined
Your dateTime seems to be micromilliseconds, which is not valid
635172879695710000
635172882696280000
635172885696780000
Try to change the format to milliseconds
check the timestamp they are invalid.
[timestamp, value]
updated your timestamps and got it working http://jsfiddle.net/BbZq7/7/
I am using Highstock.js to represent a chart. The problem is that the plotting is showing values little to the right of the actual date on x-axis. The date in the legend matches to the date on x-axis. But the plotting is a bit to the right of that date when zoomed.
please check the fiddle
http://jsfiddle.net/HL7jX/
$('#container').highcharts('StockChart', {
chart: {
//type: 'area',
},
title: {
text: "Weekly Managed Product Fund Flows",
margin:50
},
rangeSelector: {
selected: 0,
align: "left",
buttons: [
{
type: 'month',
count: 1,
text: '1m'},
{
type: 'month',
count: 3,
text: '3m'},
{
type: 'month',
count: 6,
text: '6m'},
]
},
navigator: {
height: 10
},
xAxis: {
type:'datetime',
maxZoom: 24 * 3600000,
alignTicks : false
},
yAxis:[{
title: {
text: 'Flow US$ mill'
}
}, {
title: {
text: 'AMZ'
},
labels: {
format: '{value}'
},
opposite: true
}],
exporting: {
enabled: false
},
credits: {
enabled: false
},
legend: {
align: "top",
layout: "horizontal",
enabled: true,
verticalAlign: "middle",
x:250,
y:-150
/*labelFormatter: function() {
return this.name + ' (T)';
}*/
},
plotOptions:{
series:{
stacking: 'normal'
},
line:{
marker: {
symbol:"circle",
enabled: true
}
}
},
series: [/*{
type: 'area',
name: 'Total Flows',
data: all,
tooltip: {
valuePrefix: '$',
valueDecimals: 2
}
},*/{
type: 'area',
name: 'Mutual Fund Flows',
data: mf,
tooltip: {
valuePrefix: '$',
valueDecimals: 2
}
}, {
type: 'area',
name: 'ETF Flows',
data: etf,
tooltip: {
valuePrefix: '$',
valueDecimals: 2
}
},
{
type: 'line',
name:'Alerian AMZ Index',
yAxis: 1,
data: AMZ_YTD,
tooltip: {
valueDecimals: 2
}
}]
});
This apepars to be a matter of the timestanp passed.
For example: The AMZ Index series, for June 13th - your time stamp is 1371097800000.
This converts to Thu Jun 13 2013 00:30:00 GMT-0400 (Eastern Standard Time)
The tick is set for midnight, the data point value is a half hour later.
If you want the points to match up exactly, make sure the timestamps are set for midnight.
You can also set useUTC false to avoid issues with timezones.
http://api.highcharts.com/highcharts#global.useUTC