Need to create a chart similar to the one you see here: http://imgbin.org/index.php?page=image&id=20802. So far managed to put together a jsfiddle that displays both charts but its far from complete.
How would you correctly place the bottom chart (column) over the first to achieve the effect you see in example? http://jsfiddle.net/e106L47h/6/
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) {
// split the data set into ohlc and volume
var ohlc = [],
volume = [],
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
]);
}
// create the chart
$('#container').highcharts('StockChart', {
navigator: {
enabled: false
},
rangeSelector: {
selected: 1,
inputEnabled: false
},
credits: {
enabled: false
},
yAxis: [{
height: '60%',
lineWidth: 0
}, {
top: '65%',
height: '35%',
offset: 0,
lineWidth: 0,
// gridLineWidth: 0,
labels:
{
//enabled: false
}
}],
series: [{
type: 'candlestick',
name: 'AAPL',
data: ohlc,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
});
});
});
I would remove the height 35%/65% split and show both series with the same baseline.
Then I would hide the volume axis to reduce clutter.
You can modify the height of the volume bars by setting the max of the second hidden axis rather than the height (I have used maxValue*3 to approximate your 35% height value).
Find the maximum value in the volume series like this:
var maxVolume = Math.max.apply(Math, volume.map(function(v) { return v[1]}))
Example: http://jsfiddle.net/cvezpup7/
Related
Let´s say you have an x-axis that goes [0, 3, 6, ...] and a y-axis that is like [0, 5, 10, ...].
Highcharts handles those values so that automatically, somehow a difference of 5 in y direction does not look bigger than a difference of 3 in x direction.
How can you change the distances between the values / make a 5 on the y axis appear as big as 5/3 of the change on the x axis? (so that p.e. a line from (0,0) to point (5,5) has a 45° angle)
Code example:
$.getJSON('https://cdn.jsdelivr.net/gh/highcharts/highcharts#v7.0.0/samples/data/usdeur.json', function (data) {
Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
title: {
text: 'USD to EUR exchange rate over time'
},
subtitle: {
text: document.ontouchstart === undefined ? 'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
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')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: data
}]
});
});
taken from demo
In the load event, you can calculate and adjust the height or width of the chart:
chart: {
events: {
load: function() {
var xAxis = this.xAxis[0],
yAxis = this.yAxis[0];
// Adjust xAxis
this.setSize(
yAxis.height / (yAxis.max - yAxis.min) *
(xAxis.max - xAxis.min) + this.plotLeft + this.chartWidth -
(this.plotLeft + this.plotWidth),
null,
false
);
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/64Lxutce/
or if you do not want to change the size, you can adjust one of the axis extremes:
chart: {
events: {
load: function() {
var xAxis = this.xAxis[0],
yAxis = this.yAxis[0],
xAxisMax = xAxis.width /
(yAxis.height / (yAxis.max - yAxis.min)),
yAxisMax = yAxis.height /
(xAxis.width / (xAxis.max - xAxis.min));
if (xAxisMax < xAxis.max) {
this.update({
yAxis: {
max: yAxisMax - yAxis.min
}
}, true, true, false);
} else {
this.update({
xAxis: {
max: xAxisMax - xAxis.min
}
}, true, true, false);
}
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/w3byrL28/
API Reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.Chart#update
https://api.highcharts.com/class-reference/Highcharts.Chart#setSize
I need to show some empty space to far right of the chart. To do so I use "overscroll" option (https://api.highcharts.com/highstock/xAxis.overscroll). But if user zoom in chart and pans chart to far right there can be empty space without any part of candlestick chart displayed (https://screencast-o-matic.com/watch/cqnfFq3CII). Please advise is it possible to implement following chart behaviour and how to do so: to keep some part of chart in visible area always, even if "overscoll" option is set and user pans chart to the far right? Thanks!
Here is my code:
var ohlc = JSON.parse(ohlcStringified),
volume = JSON.parse(volumeStringified);
var interval = ohlc[ohlc.length - 1].x - ohlc[ohlc.length - 2].x;
var chart = Highcharts.stockChart('container', {
chart: {
borderWidth: 1,
panning: true,
},
title: {
text: 'Chart'
},
legend: {
enabled: true
},
rangeSelector: {
selected: 1,
enabled: false
},
scrollbar: {
enabled: false
},
xAxis: {
minPadding: 0.2,
overscroll: 50 * interval,
},
yAxis: [{
height: '40%'
}, {
top: '40%',
height: '30%',
offset: 0
}, {
top: '70%',
height: '30%',
offset: 0
}],
series: [{
type: 'candlestick',
id: 'candlestick',
name: 'AAPL',
data: ohlc,
tooltip: {
valueDecimals: 2
},
dataGrouping: {
enabled: false,
}
}, {
type: 'column',
id: 'volume',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
enabled: false,
}
}]
});
Here is live demo: http://jsfiddle.net/ogorobets/bfcs9gx7/2/
It's possible, however, it requires some custom logic. It can be achieved using xAxis.events.afterSetExtremes callback where you can check if the current axis minimum is greater than your limit (a value lower than maximum xData value). When it is true, set new axis extremes with your limit as a minimum value. Check the code and demo posted below.
Code:
xAxis: {
minPadding: 0.2,
overscroll: 50 * interval,
events: {
afterSetExtremes: function() {
var chart = this.chart,
xData = chart.series[0].xData,
maxValue = xData[xData.length - 5],
min = chart.xAxis[0].min,
max = chart.xAxis[0].max
if (min > maxValue) {
chart.xAxis[0].setExtremes(maxValue, max, true, false);
}
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/p6d73nk8/
API reference:
https://api.highcharts.com/highcharts/xAxis.events.afterSetExtremes
https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
Here's what I'm trying to do:
Use papa parse to parse a CSV file.
Create two JS Objects(ohlc and volume) with that parsed data.
Then that data is used to create a highstocks chart.
Parsing with papa parse example:
function doStuff(data) {
//do stuff here
console.log(data);
}
function parseData(url, callBack) {
Papa.parse(url, {
download: true,
dynamicTyping: true,
complete: function(results) {
callBack(results.data);
}
});
}
parseData("https://www.quandl.com/api/v3/datasets/WIKI/AAPL.csv", doStuff);
A working Highchart example: jsfiddle
Me trying to combine the top two examples: jsfiddle
$(function () {
var ohlc = [],
volume = [],
dataLength = data.length,
// set the allowed units for data grouping
groupingUnits = [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]],
i = 1;
function parseData(url, callBack) {
Papa.parse(url, {
download: true,
dynamicTyping: true,
complete: function(results) {
callBack(results.data);
}
});
}
function setObjects(data) {
console.log(data[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
]);
}
}
parseData("https://www.quandl.com/api/v3/datasets/WIKI/AAPL.csv", setObjects);
// create the chart
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Historical'
},
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'OHLC'
},
height: '60%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume'
},
top: '65%',
height: '35%',
offset: 0,
lineWidth: 2
}],
series: [{
type: 'candlestick',
name: 'AAPL',
data: ohlc,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
});
});
Can anyone help me out with what I am doing wrong? I know two things that haven't been done. The data needs to be reverse so that it is in ascending order by date. And the date needs to be converted to milliseconds. However it would help me to get the current data at least inserting to the objects first and then go from there.
This bit
var i = 1;
dataLength = data.length;
Should be in the first lines of the setObjects function, where data is present and the value dataLength is actually used.
I'm trying to use yahoo finance data to generate a Highcharts candlestick chart like this http://www.highcharts.com/stock/demo/candlestick-and-volume. But I keep getting this error: http://www.highcharts.com/errors/15
Highcharts Error #15
Highcharts expects data to be sorted
This happens when you are trying to create a line series or a stock chart where the data is not sorted in ascending X order. For performance reasons, Highcharts does not sort the data, instead it is required that the implementer pre-sorts the data.
My code is as follows.
$(function () {
$.getJSON('http://websitescraper.heroku.com/?url=http://ichart.finance.yahoo.com/table.csv?s=000338.sz&callback=?', function (csvdata) {
//console.log(csvdata);
var arr = csvdata.split('\n').slice(1);
var data = [];
for (var i = arr.length-1; i >= 0; --i) {
//console.log(arr[i]);
var line = arr[i].split(',');
line[0] = Date.parse(line[0]);
line = $.map(line, function(v) {
return parseFloat(v);
});
line = line.slice(0,6);
//var j = JSON.stringify(line.slice(0,0+6));
console.log(line);
data.push(line);
}
data = JSON.stringify(data.slice(1));
console.log(data);
run(data);
});
});
function run(data) {
// split the data set into ohlc and volume
var ohlc = [],
volume = [],
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
]);
}
// create the chart
$('#container2').highcharts('StockChart', {
rangeSelector: {
selected: 1
},
title: {
text: 'Shanghai Composite Index Historical'
},
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'OHLC'
},
height: '60%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume'
},
top: '65%',
height: '35%',
offset: 0,
lineWidth: 2
}],
series: [{
type: 'candlestick',
upLineColor: 'red',
downLineColor: 'green',
name: 'SSE',
data: ohlc,
/*dataGrouping: {
units: groupingUnits
}*/
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1
/*dataGrouping: {
units: groupingUnits
}*/
}]
});
}
Can somebody help? Thanks a lot!
The problem is the data = JSON.stringify(data.slice(1));. It turns the array to a string, therefore Highstock doesn't recognize it. Remove JSON.stringify and it will work fine:
data = data.slice(1);
Here's the DEMO.
Updated substantially to make my question more clear (I hope). I have data that I'm charting in columns to show change by year, and a sort of drill down that I'd like to put on a second X-axis to show the breakdown in the last year. If I do this:
var yearbyyear = [
[2002, 591856],
[2003, 839446],
[2004, 848463],
[2005, 1034755],
[2006, 1569442],
[2007, 1484477],
[2008, 2280282],
[2009, 3261702],
[2010, 4132972],
[2011, 5321516]
];
function createSeries(data, yAxisIndex) {
var i;
var series = [];
for (i = 0; i < data.length - 1; i++) { // Node length-1
var start = data[i];
var end = data[i + 1];
series.push({
yAxis: yAxisIndex
});
}
return series;
}
var options = {
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: [{
min: 2002,
tickInterval: 1
}, {
offset: 0,
labels: false,
left: 400,
width: 100
}],
plotOptions: {
column: {
stacking: 'normal',
}
},
series: [{
xAxis: 0,
name: 'Year over Year',
data: yearbyyear
}, {
xAxis: 1,
name: 'Top Stack',
data: [2011, 2770158]
}, {
xAxis: 1,
name: 'Next Stack',
data: [2011, 2551358]
}]
};
var chart = new Highcharts.Chart(options);
The chart is fully fluid, but the series all overlap. I can keep them from overlapping, but only by giving the first chart an explicit width, and the second an x-offset to accommodate that width. Is there a way I can keep that fluidity but keep the second x-axis to the right of the first?
A commenter here pointed out that I can fudge the chart by putting the drilldown at 2012 on the same x-axis but I don't love the idea of introducing inaccuracy, even under the hood, by saying the data belongs to 2012 when it is definitely 2011 numbers.